RadGrid CheckBox in the header

6 posts, 0 answers
  1. Jagat
    Jagat avatar
    135 posts
    Member since:
    Jan 2011

    Posted 16 Dec 2013 Link to this post

    I have a RadGrid with 3 checkbox columns with a checkbox in the header of those 3 columns. I'm trying to check/uncheck only the checkboxes belonging to the column whose header checkbox is checked.

    With the code that I have  even though I'm checking/unchecking checkbox of only one header, it is checking/unchecking all the checkboxes in all the 3 columns


    How do I change my code to check/uncheck only the checkboxes belonging to the header checkbox that has been checked/unchecked?


    Appreciate your help!

                var gridToCheckAll = '<%= rgrdTrips.ClientID %>';
     
                function checkAllRows(sender) {
                    var checked = sender.checked;               
                    var container = document.getElementById(gridToCheckAll);
                    var checkboxes = container.getElementsByTagName('input');
                    for (var i = 0, l = checkboxes.length; i < l; i++) {
                        if (checkboxes[i] != sender && !checkboxes[i].disabled)
                            checkboxes[i].checked = checked;
                    }
                }
     
    <telerik:RadGrid ID="rgrdTrips" runat="server" AutoGenerateColumns="true" AllowPaging="false"
            AllowMultiRowSelection="true" AllowSorting="true">
            <MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="Trip_ID">
                <Columns>
                    <telerik:GridTemplateColumn HeaderText="<input type='checkbox' id='checkAll' onclick='checkAllRows(this);'>"
                        HeaderStyle-Width="50px" UniqueName="Select">
                        <HeaderTemplate>
                            <asp:CheckBox ID="checkAll" runat="server" onclick="checkAllRows(this);" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="cboxSelect" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <%-- <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn1">
                    </telerik:GridClientSelectColumn>--%>
                    <telerik:GridTemplateColumn HeaderText="<input type='checkbox' id='ResAvail' onclick='checkAllRows(this);'>"
                        HeaderStyle-Width="50px" UniqueName="ResourceAvailable">
                        <HeaderTemplate>
                            <asp:CheckBox ID="ResAvail" runat="server" onclick="checkAllRows(this);" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="cboxResAvailSelect" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn
                        HeaderStyle-Width="50px" UniqueName="RequestHelp">
                        <HeaderTemplate>
                            <asp:CheckBox ID="RqstHelp" runat="server" onclick="checkAllRows(this);" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="cboxRqstHelpSelect" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
                <CommandItemTemplate>
                    <asp:Button ID="btnExportAll" runat="server" Text="Export All" OnClientClick="showModalPopup('Are you sure you want to export all the trips?'); return false;" />
                    <asp:Button ID="btnExportSelected" runat="server" Text="Export Selected" OnClick="ExportSelectedTrips" />
                </CommandItemTemplate>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true"></Selecting>
            </ClientSettings>
        </telerik:RadGrid>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2013 Link to this post

    Hi Jagat,

    Please try the following code snippet to control the check event for the respective checkboxes. Below I have shown how to access the header for one checkbox, similarly, you can do it for other checkboxes.

    ASPX:
    <telerik:GridTemplateColumn UniqueName="Select">
        <HeaderTemplate>
            <asp:CheckBox ID="checkAll" runat="server" onclick="CheckAll(this)" />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="cboxSelect" runat="server" onclick="unCheckHeader(this)" />
        </ItemTemplate>
    </telerik:GridTemplateColumn>
     . . . . .
    <asp:HiddenField ID="HiddenField1" runat="server" />

    C#:
    protected void rgrdTrips_ItemCreated(object sender, GridItemEventArgs e)
    {
      if (e.Item is GridHeaderItem)
      {
          GridHeaderItem hItem = (GridHeaderItem)e.Item;
          CheckBox chk1 = (CheckBox)hItem.FindControl("checkAll");
          HiddenField1.Value = chk1.ClientID.ToString();
      }
    }

    JS:
    <script type="text/javascript">
        function CheckAll(id) {
            var masterTable = $find("<%= rgrdTrips.ClientID %>").get_masterTableView();
            var row = masterTable.get_dataItems();
            if (id.checked == true) {
                for (var i = 0; i < row.length; i++) {
                    masterTable.get_dataItems()[i].findElement("cboxSelect").checked = true; // for checking the checkboxes
                }
            }
            else {
                for (var i = 0; i < row.length; i++) {
                    masterTable.get_dataItems()[i].findElement("cboxSelect").checked = false; // for unchecking the checkboxes
                }
            }
        }
        function unCheckHeader(id) {
            var masterTable = $find("<%= rgrdTrips.ClientID %>").get_masterTableView();
            var row = masterTable.get_dataItems();
            if (id.checked == false) {
                var hidden = document.getElementById("HiddenField1");
                var checkBox = document.getElementById(hidden.value);
                checkBox.checked = false;
            }
        }
    </script>

    Thanks,
    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jagat
    Jagat avatar
    135 posts
    Member since:
    Jan 2011

    Posted 17 Dec 2013 Link to this post

    Hi Princy,

    Thanks for your response.

    The first part 'CheckAll' worked. But in the second part of the code 'unCheckHeader()' are you trying to save the id of the header CheckBox in an HiddenField?

    Can we not access the header checkbox through masterTable.get_headerItem or something since we know the column number when the user is checking/unchecking a single checkbox in any row?

    Appreciate your help!!
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Dec 2013 Link to this post

    Hi Jagat,

    As from this this forum thread there is no separate property or method for accessing the grid header. You can access its html element using jQuery as follows.

    JavaScript:
    function unCheckHeader(id)
    {
           var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
           //accessing header checkbox
           var chkBox = $('input[id$="checkAll"]');
           chkBox[0].checked = false;
    }

    Thanks,
    Princy.
  6. MV
    MV avatar
    21 posts
    Member since:
    Dec 2015

    Posted 24 Mar Link to this post

    Hello,

    How can this be accomplished when the RadGrid is inside Edit Form Template? 

    I am using this to find the RadGrid....

     var editForm = $find('<%=RGContacts.ClientID%>').get_masterTableView().get_editItems()[0].get_editFormItem();
     var RGApps = $telerik.findElement(editForm, "RGApps"); // RadGrid inside Edit Form

    but do I accomplish this?

    var masterTable = $find("<%= RGApps.ClientID %>").get_masterTableView();

     

    Thank you!

  7. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 29 Mar Link to this post

    Hello,

    You can check the attached web site sample for a similar reference. You can also examine the RadGridGetAllSelectedItemsImproved.zip sample provided in the following post and see the implementation demonstrated there:
    http://www.telerik.com/support/code-library/get-selected-items-through-all-pages#1eTU8nr-GUG8zfGgOGbIcA


    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017