Select All Check box at row level

[Rhbkv]

Hi,
I am using Telerik rad grid version 2010.1.519 in VS 2010 project.
Is it possible to have select All check box at row level? For example, if select check box at column 1 and row 1, all check boxes should be checked in the row1 like attached the screenshot (2nd row).
Could you please help me?
Thanks

[Jayesh Goyani]

Hello,

Please check below link.

http://stackoverflow.com/questions/11523707/telerikradgrid-aspcheckbox-inside-template-columnevent-for-checkbox-box-chang

Thanks,
Jayesh Goyani

[Rhbkv]

Thanks Jayesh for quick reply.

I am using "telerik:GridClientSelectColumn" to display first check column check box. In case if we click check box in the column header, we have to select "all" check boxes in the column 1 and all rows as well as all checkboxes in all other columns and rows. Could you please help me to solve this.
Thanks

 

 

 

 

 

[Jayesh Goyani]

Hello,

<telerik:RadGrid ID="RadGrid3" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid3_NeedDataSource"
           OnItemDataBound="RadGrid3_ItemDataBound">
           <MasterTableView>
               <Columns>
               <telerik:GridClientSelectColumn UniqueName="selectColumn"></telerik:GridClientSelectColumn>
                   <telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:CheckBox ID="Chk1" runat="server" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:CheckBox ID="Chk2" runat="server" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>
                   <telerik:GridBoundColumn HeaderText="ID" DataField="ID" UniqueName="ID">
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
           <ClientSettings>
               <Selecting AllowRowSelect="true" />
           </ClientSettings>
       </telerik:RadGrid>

<script type="text/javascript">
           function checkUncheckManage(chkA, chkB) {
               var _chkB = document.getElementById(chkB);
               _chkB.checked = chkA.checked;
           }
       </script>

protected void RadGrid3_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {

       dynamic data = new[] {
           new { ID = 1, Name ="Name1"},
           new { ID = 2, Name = "Name2"},
           new { ID = 3, Name = "Name3"}
       };
       RadGrid3.DataSource = data;


   }
   protected void RadGrid3_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridDataItem)
       {
           GridDataItem item = e.Item as GridDataItem;
           CheckBox Chk1 = item.FindControl("Chk1") as CheckBox;

           (item["selectColumn"].Controls[0] as CheckBox).Attributes.Add("onclick", "checkUncheckManage(this,'" + Chk1.ClientID + "')");

       }
   }

Thanks,
Jayesh Goyani

[Rhbkv]

Thanks again Jayesh.
The sample code is working fine. If i select header check box on "Select All" column, all check boxes on that column getting selected. but Chk1 check boxes are not getting selected.
Is there any way we can trigger check box on SelectColumn header?
Thanks

[Jayesh Goyani]

Hello,

<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
   <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
       <script type="text/javascript">
           function checkUncheckManage(chkA, chkB) {
               var _chkB = document.getElementById(chkB);
               _chkB.checked = chkA.checked;
           }
           function checkAll(chkh) {
               var grid = $find("<%=RadGrid3.ClientID %>");

               if (grid) {
                   var MasterTable = grid.get_masterTableView();
                   var Rows = MasterTable.get_dataItems();
                   for (var i = 0; i < Rows.length; i++) {
                       var row = Rows[i];
                       var Chk1 = $(row.get_element()).find("input[id*='Chk1']").get(0);
                       Chk1.checked = chkh.checked;
                   }
               }
           }
       </script>
   </telerik:RadCodeBlock>

<telerik:RadGrid ID="RadGrid3" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid3_NeedDataSource"
            OnItemDataBound="RadGrid3_ItemDataBound" AllowMultiRowSelection="true">
            <MasterTableView>
                <Columns>
                <telerik:GridClientSelectColumn UniqueName="selectColumn"></telerik:GridClientSelectColumn>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:CheckBox ID="Chk1" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <asp:CheckBox ID="Chk2" runat="server" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn HeaderText="ID" DataField="ID" UniqueName="ID">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        </telerik:RadGrid>

protected void RadGrid3_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridDataItem)
       {
           GridDataItem item = e.Item as GridDataItem;
           CheckBox Chk1 = item.FindControl("Chk1") as CheckBox;

           (item["selectColumn"].Controls[0] as CheckBox).Attributes.Add("onclick", "checkUncheckManage(this,'" + Chk1.ClientID + "')");

       }

       if (e.Item is GridHeaderItem)
       {
           GridHeaderItem item = e.Item as GridHeaderItem;
           (item["selectColumn"].Controls[0] as CheckBox).Attributes.Add("onclick", "checkAll(this)");

       }
   }

Thanks.
Jayesh Goyani

[Rhbkv]

Thanks Jayesh.

All check boxes under Column 1 where I used "Chk1" as check box ID are checked using below script. Column 2 check boxes are not checked.  Is there any way to all check boxes in the grid when we click "Header" check box?

Thanks

[Jayesh Goyani]

Hello,

function checkAll(chkh) {
               var grid = $find("<%=RadGrid3.ClientID %>");

               if (grid) {
                   var MasterTable = grid.get_masterTableView();
                   var Rows = MasterTable.get_dataItems();
                   for (var i = 0; i < Rows.length; i++) {
                       var row = Rows[i];
                       var Chk1 = $(row.get_element()).find("input[id*='Chk1']").get(0);
                       var Chk2= $(row.get_element()).find("input[id*='Chk2']").get(0);

                    Chk2.checked =    Chk1.checked = chkh.checked;
                   }
               }
           }

Thanks,
Jayesh Goyani

[Rhbkv]

Thanks a lot Jayesh for the quick reply.

I have created columns with Check box in the grid dynamically depends on the database values. So the number of checkboxes in a row will be vary. So I haven't created check boxes with ID at design time. I am able find all check boxes from server side as "foreach (Control C in GridDataItem.Controls)"  on ItemDataBound method. Is there any way we can do in the Javascript?
Thanks.