PDA

View Full Version : [CLOSED] Gridpanel cell afteredit



BEVIS
Jan 23, 2014, 4:46 PM
I had a gridpanel and column b value is depends on column a. Can I get the column a value and call a function to write to column b after a is edited?

Daniil
Jan 24, 2014, 2:41 AM
Hi @BEVIS,

Please answer these questions first.

Are those columns "a" and "b" regular columns?

<ext:Column />

How do you bind data to the column "b" initially?

BEVIS
Jan 24, 2014, 3:08 AM
Hi,

a & b is combobox columns. a is the charge code and b is the charge description. Users want to select either code or description. If they select by code, description will automatically fill with the right description and can be modified. If user select the description, the code will be filled also.

I user sqldatasource for both combobox.




<ext:Column ID="Column10" runat="server" DataIndex="chg_cd" Text="Charge Code">
<Editor>
<ext:ComboBox ID="chg_code" runat="server" EmptyText="Select Code" DisplayField="chg_cd" ValueField="chg_cd" QueryMode="Local" MatchFieldWidth="false" ForceSelection="true" >
<Store>
<ext:Store ID="stChg_code" runat="server" DataSourceID="sqlCharge">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="chg_cd" />
<ext:ModelField Name="chg_desc" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig Width="450" Height="300" ItemSelector=".x-boundlist-item">
<Tpl ID="Tpl1" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="cbStates-list">
<tr>
<th>Code</th>
<th>Description</th>
</tr>
</tpl>
<tr class="x-boundlist-item">
<td>{chg_cd}</td>
<td>{chg_desc}</td>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Tpl>
</ListConfig>
<Listeners>
<Change Handler="if(this.valueModels.length>0) {this.setIconCls(this.valueModels[0].get('iconCls'));}" />
<Render fn="wrtChgDesc"/>
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column11" runat="server" DataIndex="chg_desc" Text="Description" >
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" EmptyText="Select Code" DisplayField="chg_desc" ValueField="chg_desc" QueryMode="Local" MatchFieldWidth="false">
<Store>
<ext:Store ID="Store2" runat="server" DataSourceId="sqlChgDesc">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="chg_desc" />
<ext:ModelField Name="chg_cd" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig Width="450" Height="300" ItemSelector=".x-boundlist-item">
<Tpl ID="Tpl2" runat="server">
<Html>
<tpl for=".">
<tpl if="[xindex] == 1">
<table class="cbStates-list">
<tr>
<th>Description</th>
<th>Code</th>
</tr>
</tpl>
<tr class="x-boundlist-item">
<td>{chg_desc}</td>
<td>{chg_cd}</td>
</tr>
<tpl if="[xcount-xindex]==0">
</table>
</tpl>
</tpl>
</Html>
</Tpl>
</ListConfig>
<Listeners>
<%--<Change Handler="if(this.valueModels.length>0) {this.setIconCls(this.valueModels[0].get('iconCls'));}" />--%>

<DirtyChange Fn="wrtChgDesc" />
</Listeners>
</ext:ComboBox>
</Editor>

</ext:Column>

Daniil
Jan 24, 2014, 3:35 AM
Ok, it looks possible to do what you need.

I think you should listen to a CellEditing's Edit event:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-edit

Inside a listener you can change a record's ModelFields.

record.set("ModelField's Name");

BEVIS
Jan 24, 2014, 6:47 AM
In the below code, [edit] prompt after every keypress but no response when I leave the column.

Can you provide code sample since I am really new in Ext.NET.





<ext:Column ID="Column22" runat="server" DataIndex="cn_ret_co_nm" Text="Return Company name">
<Editor>
<ext:TextField ID="TextField16" runat="server" >
<Listeners>
<change Handler="alert('edit');" />
</Listeners>
</ext:TextField>
</Editor>

</ext:Column>

Daniil
Jan 24, 2014, 6:54 AM
Here is a sample. Not fully functioning, but should help you to start.

Example

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

<%@ 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 object[]
{
new object[] { "Value 1", "Description 1" },
new object[] { "Value 2", "Description 2" },
new object[] { "Value 3", "Description 3" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1">
<Editor>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Value 1" />
<ext:ListItem Text="Value 2" />
<ext:ListItem Text="Value 3" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column runat="server" Text="Test 2" DataIndex="test2" Width="200">
<Editor>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Description 1" />
<ext:ListItem Text="Description 2" />
<ext:ListItem Text="Description 3" />
</Items>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server">
<Listeners>
<Edit Handler="if (e.field === 'test1') {
e.record.set('test2', 'Description for ' + e.value);
}" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>

BEVIS
Jan 24, 2014, 7:20 AM
Thank you so much, it works perfectly.