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

Checking/Unchecking all checkboxes client side in a templated column

6 Answers 832 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Troy
Top achievements
Rank 1
Troy asked on 20 Apr 2010, 03:49 PM
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

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 21 Apr 2010, 11:56 AM
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.
0
Troy
Top achievements
Rank 1
answered on 21 Apr 2010, 03:33 PM
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>

 


 

 

 

 

 

0
Kranthi
Top achievements
Rank 1
answered on 04 Jul 2012, 03:27 PM
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.

0
Shinu
Top achievements
Rank 2
answered on 05 Jul 2012, 06:43 AM
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.
0
Kranthi
Top achievements
Rank 1
answered on 05 Jul 2012, 11:29 AM
<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)
{
}


0
Shinu
Top achievements
Rank 2
answered on 06 Jul 2012, 05:28 AM
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.
Tags
Grid
Asked by
Troy
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Troy
Top achievements
Rank 1
Kranthi
Top achievements
Rank 1
Share this question
or