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
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
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.
Regards,
Shinu.
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:
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)
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.
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:
C#:
JS:
Thanks,
Shinu.
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
>
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.
}
}
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:
JS:
Thanks,
Shinu.
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
>
function
CheckAll(id) {
alert(
"fired"
);
}
Thanks,
Shinu.