PDA

View Full Version : [CLOSED] rowEditing cannot start edit after column hide



rbtceo
Oct 23, 2014, 1:29 AM
Hi All,

An any grid with a plagin:

<ext:RowEditing runat="server" ClicksToEdit="1">
<Listeners>
<BeforeEdit Handler="Add(item, e);"/>
</Listeners>
</ext:RowEditing>
and

function Add(item, e) {

if (!#{GridPanelName}.columns[0].hidden) {
#{GridPanelName}.columns[0].hide();
}

var started = #{GridPanelName}.getRowEditor().startEdit();

}

the
#{GridPanelName}.getRowEditor().startEdit(); helps if it's a new row but it does not help if it tries to edit an existing row.

Any suggestions?

Thank you.

Daniil
Oct 23, 2014, 4:52 AM
Hi @rbtceo,

Could you, please, provide a full test case to test with?

rbtceo
Oct 23, 2014, 5:09 AM
1. click on any row (to update) -> the last column becomes hidden but row is not in 'edit' mode

the page from http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/



<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.ObjectModel" %>
<%@ Import Namespace="System.Collections.Generic" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();

store.DataSource = new List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};

store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<ext:XScript runat="server">
<script>
var addEmployee = function () {
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();

// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
name: 'New Guy',
email: 'new@object.net',
start: Ext.Date.clearTime(new Date()),
salary: 50000,
active: true
}, 'Employee');

grid.store.insert(0, r);
grid.editingPlugin.startEdit(0, 0);
};

var removeEmployee = function () {
var grid = #{GridPanel1},
sm = grid.getSelectionModel();

grid.editingPlugin.cancelEdit();
grid.store.remove(sm.getSelection());
if (grid.store.getCount() > 0) {
sm.select(0);
}
};

function Add(item, e) {

if (!#{GridPanel1}.columns[5].hidden) {
#{GridPanel1}.columns[5].hide();
}

var started = #{GridPanel1}.getRowEditor().startEdit();

}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager runat="server" />

<h1>GridPanel with RowEditor Plugin</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="400"
Frame="true"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server">
<Sorters>
<ext:DataSorter Property="start" Direction="ASC" />
</Sorters>
<Model>
<ext:Model runat="server" Name="Employee">
<Fields>
<ext:ModelField Name="name" ServerMapping="Name" Type="String" />
<ext:ModelField Name="email" ServerMapping="Email" Type="String" />
<ext:ModelField Name="start" ServerMapping="Start" Type="Date" />
<ext:ModelField Name="salary" ServerMapping="Salary" Type="Float" />
<ext:ModelField Name="active" ServerMapping="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" ClicksToEdit="1" >
<Listeners>
<BeforeEdit Handler="Add(item, e);"/>
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="btnRemoveEmployee" runat="server" Text="Remove Employee" Icon="UserDelete" Disabled="true">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="25" />
<ext:Column runat="server"
Text="Name"
DataIndex="name"
Flex="1">
<Editor>
<ext:TextField runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Email" DataIndex="email" Width="160">
<Editor>
<ext:TextField runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn runat="server"
Text="Start Date"
DataIndex="start"
Format="MM/dd/yyyy"
Width="100">
<Editor>
<ext:DateField
runat="server"
AllowBlank="false"
Format="MM/dd/yyyy"
MinDate="01.01.2006"
MinText="Can not have a start date before the Company existed."
MaxDate="<%# DateTime.Now %>"
AutoDataBind="true"
/>
</Editor>
</ext:DateColumn>
<ext:NumberColumn
runat="server"
Text="Salary"
DataIndex="salary"
Format="$0,0">
<Editor>
<ext:NumberField
runat="server"
AllowBlank="false"
MinValue="1"
MaxValue="150000"
/>
</Editor>
</ext:NumberColumn>
<ext:CheckColumn
runat="server"
Text="Active?"
DataIndex="active"
Width="50">
<Editor>
<ext:Checkbox runat="server" Cls="x-grid-checkheader-editor" />
</Editor>
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Listeners>
<SelectionChange Handler="#{btnRemoveEmployee}.setDisabled(!selected.length) ;" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Oct 23, 2014, 5:31 AM
Thank you.

At least, the startEdit method assumes that you pass some parameters.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowEditing-method-startEdit

Though, it is only a part of problem. The BeforeEdit listener is a part of "start editing" process. Then a user clicks a row, the startEdit method is called internally. It all means that you call the startEdit method inside another call of startEdit. It will lead to recursion.

Also, I don't think that hiding a column within the "start editing" process is going to work smoothly.

What about just to disable the Checkbox Editor when needed?

rbtceo
Oct 23, 2014, 5:41 AM
Daniil,

Thank you for your answer.

It is a "delete" button in a real project, not a check box.

I disabled it at first but a customer do not want to see it in the time of editing.

Are there any other ways to hide it?

Daniil
Oct 23, 2014, 7:06 AM
Please provide a test case with that Delete button. I am not sure how it is organized and it might affect on a possible solution.

rbtceo
Oct 23, 2014, 11:26 PM
Daniil,

I use a
ext:CommandColumn with
ext:GridCommand now.
It works fine.

Thank you.
The thread can be closed.

rbtceo
Oct 23, 2014, 11:53 PM
The question is:

Is it expected behaviour for CheckColumn and ImageCommandColumn?

They both have the same problem with "hide column".

Daniil
Oct 24, 2014, 4:18 AM
Is it expected behaviour for CheckColumn and ImageCommandColumn?

They both have the same problem with "hide column".

Well, I am not sure. I would rather not hide a column within a BeforeEdit listener at all. I mean that there is no guarantee that it will work with a CommandColumn forever. Maybe, it stops working at some point.

By the way, I think an ImageCommandColumn is better than a CommandColumn. It renders faster.

rbtceo
Oct 24, 2014, 4:22 AM
Daniil,

Thank you