Javascript - get number of checkboxes that are checked in the radgrid

[Dave Hollen]

Hello,

I am trying to write some Javascript that will traverse all the rows of a radgrid and determine how many rows have a checkbox that is checked. 

I have a GridTemplateColumn that contains a Checkbox in the radgrid.  This is the checkbox I am trying to determine (for each record) if it is checked or not.

How do I do this in Javascript?

I was able to do it on Server side, but I would prefer to do this in Java script.

Thanks!

[Shinu]

Hello Dave,

You can use the following client side code in order to get the number of checkboxes checked those are placed in template column of grid.

aspx mark-up:

<telerik:GridTemplateColumn UniqueName="Features" HeaderText="Checkbox">
    <ItemTemplate>
        <div id="resultList">
            <asp:CheckBox ID="CheckBox 1" runat="server" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

client side code:

    function getNumber() {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var masterTable = grid.get_masterTableView();
        var number = 0;
        for (var i = 0; i < masterTable.get_dataItems().length; i++) {
            var gridItemElement = masterTable.get_dataItems()[i].findElement("checkTag");
            if (gridItemElement.checked) {
                number++;
            }
        }
        alert(number); // shows number of checkboxes that are checked
    }

Regards,
Shinu.

[Waseem]

This does not work when sometime div in RadGrid is visible or some time div is RadGrid invisble. So this javascript does not work.

                                       <ItemTemplate>
                                            <div id="CheckDiv1" visible='<%# CanChangeData( Eval("CreatorID").ToString() ) %>' >
                                                <nobr>
                                                    <asp:CheckBox ID="CkboxDel" runat="server" Width="20px" ToolTip="Delete note" />&nbsp;
                                                    <asp:ImageButton ID="btnNoteEdit" ToolTip="Edit note" ImageUrl="~/hris/images/EmailAlertEdit.png" runat="server" /> &nbsp;
                                                    <asp:ImageButton ID="btnDel" ToolTip="Delete note" ImageUrl="~/hris/images/EmailAlertDelete.png"  CommandArgument='<%# DataBinder.Eval(Container.DataItem, "NotesID") %>' CommandName="DelNote"
                                                        OnClientClick='<%# confirmDelete( Eval("NotesID").ToString() ) %>' runat="server" /> &nbsp;
                                                </nobr>
                                            </div>
                                        </ItemTemplate>

function getNumber() {

var grid = $find("<%=RadGrid1.ClientID %>");

var masterTable = grid.get_masterTableView();

var number = 0;

for (var i = 0; i < masterTable.get_dataItems().length; i++) {

var gridItemElement = masterTable.get_dataItems()[i].findElement("checkTag");

if (gridItemElement.checked) {

number++;

}

}

alert(number); // shows number of checkboxes that are checked

}

[Waseem]

This does not work when sometime div in RadGrid is visible or some time div is RadGrid invisble. So this javascript does not work.

                                       <ItemTemplate>
                                            <div id="CheckDiv1" visible='<%# CanChangeData( Eval("CreatorID").ToString() ) %>' >
                                                <nobr>
                                                    <asp:CheckBox ID="CkboxDel" runat="server" Width="20px" ToolTip="Delete note" />&nbsp;
                                                    <asp:ImageButton ID="btnNoteEdit" ToolTip="Edit note" ImageUrl="~/hris/images/EmailAlertEdit.png" runat="server" /> &nbsp;
                                                    <asp:ImageButton ID="btnDel" ToolTip="Delete note" ImageUrl="~/hris/images/EmailAlertDelete.png"  CommandArgument='<%# DataBinder.Eval(Container.DataItem, "NotesID") %>' CommandName="DelNote"
                                                        OnClientClick='<%# confirmDelete( Eval("NotesID").ToString() ) %>' runat="server" /> &nbsp;
                                                </nobr>
                                            </div>
                                        </ItemTemplate>

[Waseem]

Thanks i got solution. when div in Radgird is invisble .

function CheckAll(id)
{
 var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                var row = masterTable.get_dataItems();
                if (id.checked == true) {
                    for (var i = 0; i < row.length; i++) {
                        var txtBox = masterTable.get_dataItems()[i].findElement("CheckDiv1");
                        if (txtBox != null) {
                            masterTable.get_dataItems()[i].findElement("CkboxDel").checked = true;
                        }
                    }
                }
}