select/dselect the rows on checkbox click at client side.

[Akki]

Hi,

        I am using GridTemplateColumn in Radgrid with checkbox in <headertemplate> and <itemtemplate>
I am unable to select/deselect the rows on <HeaderTemplate> checkbox click at client side....

Code is as follows...
<Columns>
                            <telerik:GridTemplateColumn AllowFiltering="false">
                                <HeaderTemplate>
                                    <asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll()" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="chkStatus" runat="server"  />
                                </ItemTemplate>
                                <HeaderStyle Width="50px" HorizontalAlign="Center" />
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn HeaderText="Security Code" UniqueName="Code" DataField="cod">
                                <HeaderStyle Width="200px" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Description" UniqueName="Description" DataField="dsc">
                                <HeaderStyle Width="500px" HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                        </Columns>

Please let me know.

[Shinu]

Hello Akki,

Try the following javascript.
aspx:

<HeaderTemplate>
    <asp:CheckBox ID="chkSelectAll" runat="server"  onclick="CheckAll(this);" />
</HeaderTemplate>

JS:

function CheckAll(id)
{
 var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
 var row = masterTable.get_dataItems();
 if (id.checked == true)
{
 for (var i = 0; i < row.length; i++)
 {
   masterTable.get_dataItems()[i].set_selected(true);
 }
}
else
{
 for (var i = 0; i < row.length; i++)
{
 masterTable.get_dataItems()[i].set_selected(false);
 }
}
}

Thanks,
Shinu.

[Akki]

i am getting error "Unable to get value of the property '_selectRowInternal': object is null or undefined"
in the js funtion at  masterTable.get_dataItems()[i].set_selected(true)

[Shinu]

Hi Akki,

I could replicate the issue. Try setting AllowRowSelect to true in client Settings.

ASPX:

<ClientSettings Selecting-AllowRowSelect="true"></ClientSettings>

Thanks,
Shinu.

[Akki]

thanks for your relply...
I am able to select/deselect the rows on <HeaderTemplate> checkbox click at client side..instead of rows how can i have checkbox of <itemtemplate> being checked...


 

[Shinu]

Hi Akki,

Please try the following code for checking and unchecking the CheckBox.

Javascript:

if(id.checked == true)
{
  for (var i = 0; i < row.length; i++)
  {
      masterTable.get_dataItems()[i].findElement("chkStatus").checked = true; // for checking the checkboxes
      masterTable.get_dataItems()[i].set_selected(true);
  }
}
else
{
  for (var i = 0; i < row.length; i++)
  {
      masterTable.get_dataItems()[i].findElement("chkStatus").checked = false; // for unchecking the checkboxes
      masterTable.get_dataItems()[i].set_selected(false);
  }
}

Thanks,
Shinu.

[Akki]

thanks for your relply...
I can have checkbox checked on click of checkbox which is at <HeaderTemplate>..
even though i selected all checkboxes by clicking checkbox of <headertemplate> if i uncheck any of the<itemtemplate> check box then it should uncheck checkbox of <headertemplate>..
How can i do it...

[Shinu]

Hi Akki,

One suggestion is to add a Hidden Field in the ASPX, so that you can get the ClientID of the Header CheckBox in the Javascipt to uncheck while checking any other CheckBoxes in ItemTemplate.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false">
 <MasterTableView>
   <Columns>
    <telerik:GridTemplateColumn AllowFiltering="false">
       <ItemTemplate>
          <asp:CheckBox ID="chkStatus" runat="server" onclick="unCheckHeader(this)" />
       </ItemTemplate>
    </telerik:GridTemplateColumn>
   </Columns>
 </MasterTableView>
</telerik:RadGrid>
<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
   if (e.Item is GridHeaderItem)
   {
       GridHeaderItem hItem = (GridHeaderItem)e.Item;
       CheckBox chk1 = (CheckBox)hItem.FindControl("chkSelectAll");
       HiddenField1.Value = chk1.ClientID.ToString();
   }
}

Javascript:

function unCheckHeader(id)
{
    var masterTable = $find("<%= RadGrid1.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;
     }
}

Thanks,
Shinu.