This is a migrated thread and some comments may be shown as answers.

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

7 Answers 862 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mabs
Top achievements
Rank 1
mabs asked on 15 Jul 2010, 03:03 PM
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.

7 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 16 Jul 2010, 07:00 AM
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.
0
mabs
Top achievements
Rank 1
answered on 16 Jul 2010, 09:20 AM
Thank you, very helpfull.
0
Thomas Derenthal
Top achievements
Rank 1
answered on 23 Oct 2014, 04:59 PM
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?
0
Eyup
Telerik team
answered on 28 Oct 2014, 11:29 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Thomas Derenthal
Top achievements
Rank 1
answered on 31 Oct 2014, 02:08 AM
Thank you. This is very helpful
0
Thomas Derenthal
Top achievements
Rank 1
answered on 31 Oct 2014, 03:40 PM
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>

0
Eyup
Telerik team
answered on 05 Nov 2014, 09:33 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
mabs
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
mabs
Top achievements
Rank 1
Thomas Derenthal
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or