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

Select All Check box at row level

8 Answers 322 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rhbkv
Top achievements
Rank 1
Rhbkv asked on 07 Aug 2012, 01:19 PM
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

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 07 Aug 2012, 01:26 PM
0
Rhbkv
Top achievements
Rank 1
answered on 07 Aug 2012, 01:50 PM

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

 

 

 

 

 

0
Jayesh Goyani
Top achievements
Rank 2
answered on 07 Aug 2012, 02:07 PM
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
0
Rhbkv
Top achievements
Rank 1
answered on 07 Aug 2012, 02:40 PM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 08 Aug 2012, 06:37 AM
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
0
Rhbkv
Top achievements
Rank 1
answered on 08 Aug 2012, 01:46 PM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 08 Aug 2012, 04:22 PM
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
0
Rhbkv
Top achievements
Rank 1
answered on 08 Aug 2012, 06:17 PM
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.
Tags
Grid
Asked by
Rhbkv
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Rhbkv
Top achievements
Rank 1
Share this question
or