loop through each row to check if ceckbox is checked, client side

[mabs]

I would like to loop through every row in the grid, then check the checkbox on that row if checked, if it is I would require a datakeyvalue. This all need to be client side using javascript.

The problems I am having facing,

1) looping through the rows.
2) find a checkbox on the row.

Any help with this would be much appreciated.

[Shinu]

Hello Russell,


The following client code will help you to achieve requirement.

Client code:

<script type="text/javascript">
    function getDataKeyValues() {
        var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
        var count = masterTable.get_dataItems().length;
        var checkbox;
        var item;
        for (var i = 0; i < count; i++) {
            item = masterTable.get_dataItems()[i];
            checkbox = item.findElement("chkProduct");
            if (checkbox.checked) {
                var dataKeyValue = item.getDataKeyValue("ContactName");
                alert(dataKeyValue);
            }
        }
    }
</script>

And the ASPX is shown below:

<Columns>
    <telerik:GridTemplateColumn>
        <ItemTemplate>
            <asp:CheckBox ID="chkProduct" runat="server" />
        </ItemTemplate>
    </telerik:GridTemplateColumn>

-Shinu.

[mabs]

Thank you, very helpfull.

[Thomas Derenthal]

Is there a way to loop through using this technique to get the datakeyvalue from a checked row and pass it back to the server?

[Eyup]

Hello Thomas,

I'm sending a sample RadGrid web site to demonstrate a more advanced implementation. Please run the attached application and let me know if it helps you.

Regards,
Eyup
Telerik

 

 

[Thomas Derenthal]

Thank you. This is very helpful

[Thomas Derenthal]

Thank you for this. This works well for one bound column. Is it possible to have two or more bound columns and a textbox in a template column? I am having difficulty referencing the textbox in my template column in Javascript. Here is what my grid looks like. I am interested in getting several of the bound column values stored and passed to the server as in the example you have created, but also the textbox in the template column. Thanks for your help.

<telerik:RadGrid ID="gridFundingBills" runat="server" Width="1100px" AllowMultiRowSelection="True"
                CssClass=" MyGridClass"
                AutoGenerateColumns="False"
                OnNeedDataSource="gridFundingBills_NeedDataSource"
                OnItemDataBound="gridFundingBills_ItemDataBound">
                <MasterTableView DataKeyNames="FundingDtlID" EditMode="InPlace">
                    <Columns>
                        <telerik:GridBoundColumn DataField="CustomerNm" FilterControlAltText="Filter CustomerNm column" HeaderText="Property" SortExpression="CustomerNm" UniqueName="CustomerNm">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="VendorNm" FilterControlAltText="Filter VendorNm column" HeaderText="Vendor" SortExpression="VendorNm" UniqueName="VendorNm">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="BankAcct" FilterControlAltText="Filter BankAcct column" HeaderText="Bank" ReadOnly="True" SortExpression="BankAcct" UniqueName="BankAcct">
                        </telerik:GridBoundColumn>
                        <telerik:GridHyperLinkColumn UniqueName="BillNo" HeaderText="Bill Reference Number" DataTextField="BillNo" DataNavigateUrlFields="BillUrl" DataNavigateUrlFormatString="http://{0}" Target="_blank">
                        </telerik:GridHyperLinkColumn>
                        <telerik:GridBoundColumn DataField="BillURL" FilterControlAltText="Filter BillURL column" ReadOnly="True" SortExpression="BillURL" UniqueName="BillURL" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="BillPeriod" FilterControlAltText="Filter BillPeriod column" HeaderText="Bill Period" ReadOnly="True" SortExpression="BillPeriod" UniqueName="BillPeriod" ItemStyle-Width="150px" HeaderStyle-Width="150px">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DueDt" DataType="System.DateTime" FilterControlAltText="Filter DueDt column" HeaderText="Due Date" SortExpression="DueDt" UniqueName="DueDt" DataFormatString="{0:d}" ItemStyle-Width="75px" HeaderStyle-Width="75px">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="TotalAmt" DataType="System.Decimal" FilterControlAltText="Filter TotalAmt column" HeaderText="TotalAmt" SortExpression="Total Due" UniqueName="TotalAmt" DataFormatString="{0:F}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="75px" HeaderStyle-Width="75px">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="RemainingAmt" DataType="System.Decimal" FilterControlAltText="Filter RemainingAmt column" HeaderText="Remaining Balance" ReadOnly="True" SortExpression="RemainingAmt" UniqueName="RemainingAmt" DataFormatString="{0:F}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" ItemStyle-Width="75px" HeaderStyle-Width="75px">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FundingDtlID" DataType="System.Guid" FilterControlAltText="Filter FundingDtlID column" HeaderText="FundingDtlID" ReadOnly="True" SortExpression="FundingDtlID" UniqueName="FundingDtlID" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="SourceBankAcctID" DataType="System.Guid" FilterControlAltText="Filter BankAcctID column" HeaderText="BankAcctID" ReadOnly="True" SortExpression="BankAcctID" UniqueName="BankAcctID" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Amount Approved" UniqueName="AmtApproved" HeaderStyle-Width="55px"
                            ItemStyle-Width="55px" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
                            <ItemTemplate>
                                <asp:TextBox ID="AmountApproved" runat="server" Width="55px" OnTextChanged="AmountApproved_TextChanged"
                                    AutoPostBack="true" CssClass="numericAlign"></asp:TextBox>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
                        </telerik:GridClientSelectColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings AllowKeyboardNavigation="true" EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                    <ClientEvents OnRowSelected="handleTextBoxValue" OnRowDeselected="handleTextBoxValue" OnActiveRowChanged="sumAmtApproved" />
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>

[Eyup]

Hi Thomas,

Do you mean you want to preserve their values through all pages? Something like this?
http://www.telerik.com/help/aspnet-ajax/grid-persist-checkbox-state-in-gridtemplatecolumn-on-rebind.html

Looking forward to your reply.

Regards,
Eyup
Telerik