RadGrid CheckBox in the header

[Jagat]

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>

[Princy]

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

[Jagat]

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!!

[Princy]

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.

[MV]

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!

[Eyup]

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

[yuvaraj]

Hi

masterTable.get_dataItems()[i].findElement("chkStatus").checked = true;

This line the following error comes
0x800a138f - JavaScript runtime error: Unable to set property 'checked' of undefined or null reference

Please check

Thanks
V.Yuvaraj