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

RadGrid CheckBox in the header

6 Answers 1608 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jagat
Top achievements
Rank 1
Jagat asked on 16 Dec 2013, 07:29 PM
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>

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 17 Dec 2013, 06:41 AM
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
0
Jagat
Top achievements
Rank 1
answered on 17 Dec 2013, 06:00 PM
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!!
0
Princy
Top achievements
Rank 2
answered on 18 Dec 2013, 04:37 AM
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.
0
MV
Top achievements
Rank 1
answered on 24 Mar 2016, 08:30 PM

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!

0
Eyup
Telerik team
answered on 29 Mar 2016, 10:32 AM
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.
0
yuvaraj
Top achievements
Rank 1
answered on 13 Jun 2017, 07:43 AM
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
Tags
Grid
Asked by
Jagat
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Jagat
Top achievements
Rank 1
MV
Top achievements
Rank 1
Eyup
Telerik team
yuvaraj
Top achievements
Rank 1
Share this question
or