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

5 posts, 0 answers
  1. Dave Hollen
    Dave Hollen avatar
    46 posts
    Member since:
    Jan 2010

    Posted 15 Jan 2010 Link to this post

    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!
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 08 Oct 2012 Link to this post

    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 
        } 

  5. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 08 Oct 2012 Link to this post

    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>
  6. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 08 Oct 2012 Link to this post

    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;
                            }
                        }
                    }
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017