Checking/Unchecking all checkboxes client side in a templated column

[Troy]

Hi All --

I have a templated column in my grid with a checkbox in each row.  Is there an easy way, client-side, to loop through and check/uncheck all of them?

This is not the built in checkbox column for selecting rows, but a separate column altogether.

Thanks!

Troy

[Shinu]

Hello Troy,

Here is the code that I tried for a similar scenario.

ASPX:

. . .

<Columns>

<telerik:GridTemplateColumn HeaderText="Select Options" UniqueName="Selections">

<ItemTemplate>

<asp:CheckBox ID="CheckBox2" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

. . .

</Columns>

</MasterTableView>

</telerik:RadGrid>

<input id="Button3" type="button" value="Check" onclick="Checked(this);" />

JavaScript:

<script type="text/javascript">

function Checked(btn) {

var grid = $find("<%=RadGrid1.ClientID %>");

var masterTable = grid.get_masterTableView();

var btnValue = btn.value;

for (var i = 0; i < masterTable.get_dataItems().length; i++) {

var gridItemElement = masterTable.get_dataItems()[i].findElement("CheckBox2");

if (btnValue == "Check") {

gridItemElement.checked = true;

btn.value = "UnCheck";

}

else {

gridItemElement.checked = false;

btn.value = "Check";

}

}

}

</script>

Regards,
Shinu.

[Troy]

Thanks for the reply --

I actually figured this one out as well with a little time --

In the grid, you'll need to place this:

 

 

 

<ClientEvents OnGridCreated="GetGridObject"></ClientEvents>

 

 

 

 

 

 

Then add this and call selectAllRows(true/false) from a client click event:

(FYI, my checkbox is called chkLocation in the templated column -- you could obviously abstract this)

 

<script type="text/javascript">

//<![CDATA[

var radGrid;

function GetGridObject(sender, eventArgs) {

radGrid = sender;

}

function selectAllRows(isChecked) {

var totalRows = radGrid.get_masterTableView().get_element().tBodies[0].rows.length - 1;

for (i = 0; i < totalRows; i++) {

$telerik.findElement(radGrid.MasterTableView.get_dataItems()[i].get_element(), "chkLocation").checked = isChecked;

}

}

//]]>     </script>

 

 

 

 

 

[Kranthi]

Hi All 

i need a solution for check/uncheck checkbox in a radgrid column

this is my piece of code

            <telerik:RadGrid ID="M" runat="server" Width="99%" AllowPaging="True" EnableViewState="False"
                GridLines="None" meta:resourcekey="MResource1" AllowFilteringByColumn="true"
                OnInit="GridControl_Init" EnableLinqExpressions="false" 
                EnableEmbeddedSkins="false" AutoGenerateColumns="False">
                <HeaderContextMenu EnableEmbeddedSkins="True">
                </HeaderContextMenu>
                <FilterMenu Skin="Nediso" EnableEmbeddedSkins="false">
                </FilterMenu>
                <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" AlwaysVisible="true" />
                <MasterTableView Width="100%" EnableViewState="False" AllowFilteringByColumn="true">
                
                <RowIndicatorColumn>
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                <Columns>  
                     <telerik:GridTemplateColumn  AllowFiltering="false" AutoPostBackOnFilter="false" HeaderStyle-Width="5%" ItemStyle-Width="5%" >
                    <HeaderStyle Width="3%" HorizontalAlign="Justify" />
                    <ItemStyle Width="3%" HorizontalAlign="Justify" />
                    <HeaderTemplate>
                    <input type="checkbox" runat="server" value="check" ID="checkbox"  />
                    </HeaderTemplate>
                    <ItemTemplate>
                    <asp:CheckBox runat="server" AutoPostBack="false" Width="5%" ID="checkbox2" />
                    </ItemTemplate>
                    </telerik:GridTemplateColumn>




                     <telerik:GridBoundColumn DataField="TOKEN" Visible="false" UniqueName="TOKEN" >
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="FIRST NAME" HeaderText="FIRST NAME" UniqueName="FIRST NAME">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="LAST NAME" HeaderText="LAST NAME" UniqueName="LAST NAME">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="STATUS" HeaderText="STATUS" UniqueName="STATUS">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="DESIGNATION" HeaderText="DESIGNATION" UniqueName="DESIGNATION">
                    </telerik:GridBoundColumn>
                    </Columns>
                    <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" Position="TopAndBottom" />
                    
                </MasterTableView>
                <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="True">
                    <Resizing AllowColumnResize="True" />
                    <Selecting AllowRowSelect="True" />                    
                    <ClientEvents OnFilterMenuShowing="OnFilterMenuShowing"></ClientEvents> 
                    </ClientSettings>
                <FilterMenu EnableTheming="True">
                    <CollapseAnimation Type="None" />
                    <ExpandAnimation Type="None" />
                </FilterMenu>
            </telerik:RadGrid>

please give me a solution for this, i am using ajax update panel for radgrid which is one problem if we use autopostback feature for checkbox column..

can anyone give me a client side or serverside solution for this event.

[Shinu]

Hello,

You can attach click event for checkbox using the following methods.
aspx:

<telerik:GridTemplateColumn>
  <ItemTemplate>
           <asp:CheckBox ID="CheckBox1" AutoPostBack="false" onclick="CheckAll(this);" runat="server" />
             <asp:CheckBox ID="CheckBox2" AutoPostBack="false"  runat="server" />
   </ItemTemplate>
</telerik:GridTemplateColumn>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
   GridDataItem item = (GridDataItem)e.Item;
   CheckBox chk = (CheckBox)item.FindControl("CheckBox2");
   chk.Attributes.Add("onclick", "check();");//accessing the checkbox and attaching event.
  }
}

JS:

  function CheckAll() {
alert("fired");
}
function check() {
alert("fired");
}

Thanks,
Shinu.

[Kranthi]

<telerik:GridTemplateColumn>

  <ItemTemplate>

           <asp:CheckBox ID="CheckBox1" AutoPostBack="false" onclick="CheckAll(this);" runat="server" />

             <asp:CheckBox ID="CheckBox2" AutoPostBack="false"  runat="server" />

   </ItemTemplate>

</telerik:GridTemplateColumn>


checkbox1 is in header template not in item template.. 

i have tried the code the alert is fired in checkall() but not fired in check()
it is not responding in this code

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

  if (e.Item is GridDataItem)

  {

   GridDataItem item = (GridDataItem)e.Item;

   CheckBox chk = (CheckBox)item.FindControl("CheckBox2");

   chk.Attributes.Add("onclick", "check();");//accessing the checkbox and attaching event.

  }

}

this event is not responding to the checkbox click.


i have some other events does it effect it.. those are
protected void GridControl_Init(object sender, EventArgs e)
{
}

 protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
}

void GridControl_ItemDataBound(object sender, GridItemEventArgs e)
{
}

[Shinu]

Hello,

You can attach onclick client event for the input checkbox as shown below.
aspx:

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

JS:

function CheckAll(id) {
alert("fired");
}

Thanks,
Shinu.