PDA

View Full Version : [CLOSED] How to get Cell ID or Row Index in Grid Panel with ComponentColumn



Digital.Dynamics
Aug 13, 2012, 12:40 PM
Hi,

We need to retrieve the cell id or the row index in GridPanel with Component Column. We tried with "CellSelectionModel" and "RowSelectionModel" but without success.
As you can see in the sample below, We are focusing on the second column (dataIndex= Acc_Code). When selecting a value from the combobox we want to update the next column (Acc_Name) with the retrieved value from server in the same row.
Thanks in advance.



<ext:GridPanel ID="GridPanelJournalVoucher" runat="server" Title="Receipt Journal Voucher"
ButtonAlign="Center" Region="Center" Frame="true" Header="false" ForceFit="true">
<Store>
<ext:Store ID="StoreReceiptJournalVoucher" runat="server">
<Model>
<ext:Model ID="ModelJrnRcpVoucher" Name="ModelJrnRcpVoucher" IDProperty="ReceiptJournalVoucher_ID" runat="server">
<Fields>
<ext:ModelField Name="ReceiptJournalVoucher_ID" Type="Int" />
<ext:ModelField Name="Acc_Code" />
<ext:ModelField Name="Acc_Name" />
<ext:ModelField Name="Acc_Desc" />
<ext:ModelField Name="Acc_Credit" />
<ext:ModelField Name="Acc_Debit" />
<ext:ModelField Name="Cheque_No" />
<ext:ModelField Name="Due_Date" Type="Date" />
<ext:ModelField Name="Bank_Name" />
<ext:ModelField Name="Cheque" />
<ext:ModelField Name="Voucher_Type" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server">
</ext:RowNumbererColumn>
<ext:ComponentColumn Text="Code" DataIndex="Acc_Code" ID="Acc_Code" runat="server" >
<Component>
<ext:ComboBox ID="cbxAccountCode" runat="server" DisplayField="Acc_ID" ValueField="Acc_ID"
StoreID="Store_AccountsCode" TypeAhead="false" LoadingText="Searching..." Width="140"
PageSize="10" HideTrigger="true" ItemSelector="div.search-item" MinChars="1">
<ListConfig LoadingText="Searching...">
<ItemTpl ID="ItemTpl2" runat="server">
<Html>
<div class="search-item">
<div class="code">{Acc_ID} </div>
<div class="name">{Acc_Name_En}</div>
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Select Fn="setAccName" />
</Listeners>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn Text="Name" DataIndex="Acc_Name" ID="Acc_Name" runat="server"
Width="170" >
<Component>
<ext:TextField ID="txfAccount_Name" DataIndex="Acc_Name" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn Text="Desc" DataIndex="Acc_Desc" ID="Acc_Desc" Width="185" runat="server" >
<Component>
<ext:TextField ID="txfAccount_Desc" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn Text="Credit" DataIndex="Acc_Credit" ID="Acc_Credit" Width="70"
runat="server" >
<Component>
<ext:NumberField ID="txfAccount_Credit" runat="server" Text="">
<Listeners>
<%--<Blur Fn="chckcb" />--%>
</Listeners>
</ext:NumberField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn Text="Debit" DataIndex="Acc_Debit" ID="Acc_Debit" Width="70"
runat="server" >
<Component>
<ext:NumberField ID="txfAccount_Debit" runat="server" Text="">
<Listeners>
<%--<Blur Fn="chckdb" />--%>
</Listeners>
</ext:NumberField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="Cheque_No" DataIndex="Cheque_No" Header="Cheque #" Editable="true"
Width="130" runat="server" >
<Component>
<ext:TextField ID="txfChequeNo" runat="server" Name="Cheque_No" FieldLabel="" Width="150">
</ext:TextField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="Due_Date" DataIndex="Due_Date" Editable="true" Width="90"
Text="Date" runat="server" >
<Component>
<ext:DateField ID="DateField1" runat="server">
</ext:DateField>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="Bank_Name" DataIndex="Bank_Name" Text="Bank Name" Width="130"
runat="server" >
<Component>
<ext:TextField ID="txfBank_Name2" runat="server" Name="Bank_Name" FieldLabel="" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
</ext:GridView>
</View>
<SelectionModel>
<ext:CellSelectionModel runat="server" ID="cellseltionmode">
<Listeners>
<Select Fn="Cell_Click" />
</Listeners>
</ext:CellSelectionModel>
<%--<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
</ext:RowSelectionModel>--%>
</SelectionModel>
</ext:GridPanel>

Daniil
Aug 13, 2012, 2:50 PM
Hi,

Each components contains the "record" property and the "column" property which, respectively, contains the "grid", "column", "rowIndex" and "record" properties.

cmp.column = {
grid : this.grid,
column : this,
rowIndex : index,
record: record
};

You can use:

<Select Handler="this.record.set('dataIndexOfNextColumn', 'Hello!');" />

Please note that a ComboBox will lose the focus after updating, because a row will be refreshed/rerendered.

Digital.Dynamics
Aug 14, 2012, 8:47 AM
Thanks Daniil, but still almost same issue. It's ok for record value, it is updating well the record but the component is not showing the value, the component value is empty but show the updates red mark.

Daniil
Aug 14, 2012, 12:58 PM
It appears to be working well in the example below. Please provide your test case.

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[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn runat="server">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" />
<ext:ListItem Text="Item 2" />
</Items>
<Listeners>
<Select Handler="this.record.set('test', records[0].data[this.displayField]);" />
</Listeners>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>