Unable to find the component column control from grid using java script file(Ext .Net 2.2)

[rakesh]

Hi

I am using component column and checkboxselectionModel in my ext.net grid. Inside the component column ,using a "ext:NumberField" .I want that:"On selection of the checkbox, the component column control should be enable or disabled as per the requirement.And I need the summation value of the component column ." I am trying to do the summation in "Blur" control of the number field,but I unable to get the value.

So,How I will get the component column value on "Blur" event of the grid component control i.e Number field.

--------
My grid control is, .aspx
.....

<ext:GridPanel ID="grdJV" runat="server" Height="100" Title="Select Journal Voucher for Payment Voucher"
                        Width="1100"
                        ColumnLines="true"
                        Region="West"
                        Frame="true"
                        ContextMenuID="contMenuDetail">
                      
                        <Store>
                            <ext:Store ID="strJV" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model ID="mdlJV" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="voucher_id" />
                                            <ext:ModelField Name="voucher_no" />
                                            <ext:ModelField Name="voucher_date" />
                                            <ext:ModelField Name="supp_inv_no" />
                                            <ext:ModelField Name="invoice_date" />
                                            <ext:ModelField Name="currency" />
                                            <ext:ModelField Name="voucher_amt" />
                                            <ext:ModelField Name="jv_balance_amt" />
                                            <ext:ModelField Name="payment_in_process" />
                                            <ext:ModelField Name="paid_amt" Type="String" />
                                            <ext:ModelField Name="payment_mode" />
                                            <ext:ModelField Name="payable_amount" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>

                                <ext:Column ID="Column5" runat="server" Header="Invoice ID" DataIndex="voucher_id" MenuDisabled="true" Sortable="true" Width="150" Hidden="true" />
                                <ext:Column ID="Column9" runat="server" Header="Voucher No" DataIndex="voucher_no" MenuDisabled="true" Sortable="true" Width="110" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Header="Voucher Date" DataIndex="voucher_date" MenuDisabled="true" Sortable="true" Width="90" Format="dd/MM/yyyy" />
                                <ext:Column ID="Column6" runat="server" Header="Invoice No" DataIndex="supp_inv_no" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:DateColumn ID="Columnd3" runat="server" Header="Invoice Date" DataIndex="invoice_date" MenuDisabled="true" Sortable="true" Width="90" Format="dd/MM/yyyy" />
                                <ext:Column ID="Column11" runat="server" Header="Currency" DataIndex="currency" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column10" runat="server" Header="JV Amount" DataIndex="voucher_amt" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column12" runat="server" Header="Balance Amount" DataIndex="jv_balance_amt" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column13" runat="server" Header="Posting-Pending" DataIndex="payment_in_process" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column14" runat="server" Header="Paid Amount" DataIndex="paid_amt" MenuDisabled="true" Sortable="true" Width="90">
                                 </ext:Column>
                                <ext:Column ID="Column15" runat="server" Header="Payment Mode" DataIndex="payment_mode" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:ComponentColumn ID="ComponentColumn1"
                                    runat="server"
                                    Editor="false"
                                    DataIndex="payable_amount"
                                    Flex="1"
                                    Text="Payable">
                                    <Component>
                                        <ext:NumberField ID="txtPVAmountEntered" runat="server" SelectOnFocus="true" MinValue="0" FieldStyle="text-align: right;" AllowDecimals="true" DecimalPrecision="3">
                                           <Listeners>
                                                 <Blur Fn="fnShouldBeLessThanBalance"></Blur>
                                            </Listeners>
                                        </ext:NumberField>
                                    </Component>
                                </ext:ComponentColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel2" Mode="Multi" runat="server">
                                  <Listeners>
                                      <Deselect Fn="chkSelection" />
                                </Listeners>
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>
                        <Plugins>
                            <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1" />
                        </Plugins>
                       <BottomBar>
                           <ext:Toolbar ID="Toolbar2" runat="server">
                               <Items>
                                       <ext:NumberField ID="numTotal" runat="server" SelectOnFocus="true" MinValue="0" FieldStyle="text-align: right;" AllowDecimals="true" DecimalPrecision="3">
                                        </ext:NumberField>
                               </Items>
                           </ext:Toolbar>
                       </BottomBar>
                    </ext:GridPanel>

Waiting for your suggestion...

Regards,
Rakesh

[Daniil]

Hi Rakesh,

Welcome to the Ext.NET forums!

On selection of the checkbox, the component column control should be enable or disabled

Here is an example.

Example

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

<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[] { "test", 1 },
                new object[] { "test", 2 },
                new object[] { "test", 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="text" />
                                <ext:ModelField Name="number" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Text" DataIndex="text" />
                    <ext:ComponentColumn runat="server" Text="Number" DataIndex="number" Editor="true">
                        <Component>
                            <ext:NumberField runat="server" />
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="e.config[0].disabled = e.grid.getSelectionModel().isSelected(e.record);" />
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel 
                    runat="server" 
                    Mode="Single" 
                    AllowDeselect="true"
                    ShowHeaderCheckbox="false">
                    <Listeners>
                        <Select Handler="this.view.refreshNode(index);" />
                        <Deselect Handler="this.view.refreshNode(index);" />
                    </Listeners>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

And I need the summation value of the component column .

Please keep one issue per thread.

[rakesh]

Hi Daniil,

Thanks for your response. After changed little bit ,its working , but not full-fill my requirement .All the requirements, I have mentioned below.

1. On selection of the checkbox , component column control(ext:NumberField) should be enable, otherwise its always disabled.
2. On deselection of checkbox ,component column control(ext:NumberField) values should be null and disabled.
3. While entering some value in the component column control(ext:NumberField) ,the value need to be compare with the another column value.
4. On footer of the component column, Need summation of the component column control(ext:NumberField) value
(only selected rows of the grid).

My Grid Control in .aspx page
-----------------------------

<ext:GridPanel ID="grdJV" runat="server" Height="50" Title="Select Journal Voucher for Payment Voucher"
                        Width="1100"
                        ColumnLines="true"
                        Region="West"
                        Frame="true"
                        ContextMenuID="contMenuDetail">

                        <Store>
                            <ext:Store ID="strJV" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model ID="mdlJV" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="voucher_id" />
                                            <ext:ModelField Name="voucher_no" />
                                            <ext:ModelField Name="voucher_date" />
                                            <ext:ModelField Name="supp_inv_no" />
                                            <ext:ModelField Name="invoice_date" />
                                            <ext:ModelField Name="currency" />
                                            <ext:ModelField Name="voucher_amt" />
                                            <ext:ModelField Name="jv_balance_amt" />
                                            <ext:ModelField Name="payment_in_process" />
                                            <ext:ModelField Name="paid_amt" Type="String" />
                                            <ext:ModelField Name="payment_mode" />
                                            <ext:ModelField Name="payable_amount" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                               
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column5" runat="server" Header="Invoice ID" DataIndex="voucher_id" MenuDisabled="true" Sortable="true" Width="150" Hidden="true" />
                                <ext:Column ID="Column9" runat="server" Header="Voucher No" DataIndex="voucher_no" MenuDisabled="true" Sortable="true" Width="110" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Header="Voucher Date" DataIndex="voucher_date" MenuDisabled="true" Sortable="true" Width="90" Format="dd/MM/yyyy" />
                                <ext:Column ID="Column6" runat="server" Header="Invoice No" DataIndex="supp_inv_no" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:DateColumn ID="Columnd3" runat="server" Header="Invoice Date" DataIndex="invoice_date" MenuDisabled="true" Sortable="true" Width="90" Format="dd/MM/yyyy" />
                                <ext:Column ID="Column11" runat="server" Header="Currency" DataIndex="currency" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column10" runat="server" Header="JV Amount" DataIndex="voucher_amt" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column12" runat="server" Header="Balance Amount" DataIndex="jv_balance_amt" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column13" runat="server" Header="Posting-Pending" DataIndex="payment_in_process" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:Column ID="Column14" runat="server" Header="Paid Amount" DataIndex="paid_amt" MenuDisabled="true" Sortable="true" Width="90">
                                    <%-- <Renderer Fn="fnViewPaymentDetails"></Renderer>--%>
                                </ext:Column>
                                <ext:Column ID="Column15" runat="server" Header="Payment Mode" DataIndex="payment_mode" MenuDisabled="true" Sortable="true" Width="90" />
                                <ext:ComponentColumn ID="ComponentColumn1"
                                    runat="server"
                                    Editor="false"
                                    DataIndex="payable_amount"
                                    Flex="1"
                                    Text="Payable">
                                    <Component>
                                        <ext:NumberField ID="txtPVAmountEntered" runat="server" Disabled="true" MinValue="0" FieldStyle="text-align: right;" AllowDecimals="true" DecimalPrecision="3">
                                            <Listeners>
                                                <Blur Fn="fnShouldBeLessThanBalance" />
                                            </Listeners>
                                        </ext:NumberField>
                                    </Component>
                                    <Listeners>
                                        <BeforeBind Handler="e.config[0].disabled  = e.grid.getSelectionModel().isSelected(e.record)?false:true; " />
                                    </Listeners>
                                </ext:ComponentColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:CheckboxSelectionModel ID="CheckboxSelectionModel2" Mode="Multi" runat="server">
              
                                <Listeners>
                                    <Select Handler="this.view.refreshNode(index);" />
                                    <Deselect Handler="this.view.refreshNode(index);" Fn="chkSelection" />
                                </Listeners>
                            </ext:CheckboxSelectionModel>
                        </SelectionModel>
                        <Plugins>
                            <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1" />
                        </Plugins>

         
                    </ext:GridPanel>

Waiting for your suggestion..

Regards,
Rakesh

[Daniil]

1. On selection of the checkbox , component column control(ext:NumberField) should be enable, otherwise its always disabled.
2. On deselection of checkbox ,component column control(ext:NumberField) values should be null and disabled.

This examples appears to be working as you need, doesn't it?

Example

<%@ Page Language="C#" %>
 
<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[] { "test", 1 },
                new object[] { "test", 2 },
                new object[] { "test", 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="text" />
                                <ext:ModelField Name="number" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Text" DataIndex="text" />
                    <ext:ComponentColumn 
                        runat="server" 
                        Text="Number" 
                        DataIndex="number" 
                        Editor="true" 
                        StopSelection="true">
                        <Component>
                            <ext:NumberField runat="server" />
                        </Component>
                        <Listeners>
                            <BeforeBind Handler="e.config[0].disabled = !e.grid.getSelectionModel().isSelected(e.record);" />
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel
                    runat="server"
                    Mode="Single"
                    CheckOnly="true"
                    AllowDeselect="true"
                    ShowHeaderCheckbox="false">
                    <Listeners>
                        <Select Handler="this.view.refreshNode(index);" />
                        <Deselect Handler="this.view.refreshNode(index);" />
                    </Listeners>
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>

3. While entering some value in the component column control(ext:NumberField) ,the value need to be compare with the another column value.
4. On footer of the component column, Need summation of the component column control(ext:NumberField) value
(only selected rows of the grid).

Please keep one issue per thread.