Guys,
Apologies if this has been asked before however I've been searching for a while and couldn't find an answer.
I have a RadGrid with grouping. The gird does not posts back when a group is expanded and collapsed. I have checkboxes for each row in the grid. What i need to achieve is to have a checkbox in header of each group and when that checkbox is checked/unchecked all the items of the group should be checked/unchecked. I wish to accomplish this with client side code. No Post-backs
Any suggestions most appreciated. Thx in advance
Apologies if this has been asked before however I've been searching for a while and couldn't find an answer.
I have a RadGrid with grouping. The gird does not posts back when a group is expanded and collapsed. I have checkboxes for each row in the grid. What i need to achieve is to have a checkbox in header of each group and when that checkbox is checked/unchecked all the items of the group should be checked/unchecked. I wish to accomplish this with client side code. No Post-backs
Any suggestions most appreciated. Thx in advance
9 Answers, 1 is accepted
0

Shinu
Top achievements
Rank 2
answered on 13 Jul 2012, 11:42 AM
Hello,
Try the following javascript.
aspx:
JS:
Thanks,
Shinu.
Try the following javascript.
aspx:
<
telerik:GridTemplateColumn
>
<
HeaderTemplate
>
<
asp:CheckBox
ID
=
"chkSelectAll"
runat
=
"server"
onclick
=
"CheckAll(this);"
/>
</
HeaderTemplate
>
</
telerik:GridTemplateColumn
>
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.
0

Amit
Top achievements
Rank 1
answered on 13 Jul 2012, 02:32 PM
Thx for the reply Shinu.. however when we try your code .. we get error :
I'am assuming its because of
<%= causes the issue... when we change it to <%# the control is not found in the JavaScript
can you suggest how do we deal with this..
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
I'am assuming its because of
this line
$find("<%= Radgrid1.ClientID %>")
<%= causes the issue... when we change it to <%# the control is not found in the JavaScript
can you suggest how do we deal with this..
0

Amit
Top achievements
Rank 1
answered on 14 Jul 2012, 10:44 AM
Okay .. we have overcome the problem of <%= by using RadCodeBlock .. now next prb :)
Following Line is returning NULL and I'm not able to work out why ,, any ideas ?
Following Line is returning NULL and I'm not able to work out why ,, any ideas ?
var masterTable = $find("RadGrid1").get_masterTableView();
0

Amit
Top achievements
Rank 1
answered on 16 Jul 2012, 08:47 AM
Guys and Idea .. ?
I thought this was a very responsive forum ..
I thought this was a very responsive forum ..
0

Shinu
Top achievements
Rank 2
answered on 16 Jul 2012, 09:57 AM
Hi,
I am pasting the entire code that I tried which worked as expected.
aspx:
JS:
Thanks,
Shinu.
I am pasting the entire code that I tried which worked as expected.
aspx:
<
telerik:RadGrid
AllowSorting
=
"true"
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"false"
OnNeedDataSource
=
"approval_NeedDataSource"
>
<
MasterTableView
>
<
GroupByExpressions
>
<
telerik:GridGroupByExpression
>
<
SelectFields
>
<
telerik:GridGroupByField
FieldName
=
"FirstName"
/>
</
SelectFields
>
<
GroupByFields
>
<
telerik:GridGroupByField
FieldName
=
"FirstName"
/>
</
GroupByFields
>
</
telerik:GridGroupByExpression
>
</
GroupByExpressions
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"EmployeeID"
UniqueName
=
"ProductID"
HeaderText
=
"EmployeeID"
></
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"FirstName"
UniqueName
=
"FirstName"
HeaderText
=
"FirstName"
></
telerik:GridBoundColumn
>
<
telerik:GridTemplateColumn
>
<
HeaderTemplate
>
<
asp:CheckBox
ID
=
"chkSelectAll"
runat
=
"server"
onclick
=
"CheckAll(this);"
/>
</
HeaderTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
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.
0

Amit
Top achievements
Rank 1
answered on 16 Jul 2012, 10:06 AM
Thx Shinu,
Will try and get back to you .
Will try and get back to you .
0

Ali
Top achievements
Rank 1
answered on 30 Aug 2012, 07:04 AM
The "CheckAll" functions selects all the items in the MasterTable. How can you only select all the items in the specific group checked?
0
Hello Amit,
You can use a GroupHeaderTemplate to declare a CheckBox and on clicking it select all items until the next group header. You can find a sample implementation in the attached project.
Additionally, in order to display the rest of the required data for the group header, you can use an approach similar to this demo:
Grid Group Header and Footer Templates
Regards,
Tsvetina
the Telerik team
You can use a GroupHeaderTemplate to declare a CheckBox and on clicking it select all items until the next group header. You can find a sample implementation in the attached project.
Additionally, in order to display the rest of the required data for the group header, you can use an approach similar to this demo:
Grid Group Header and Footer Templates
Regards,
Tsvetina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Amit
Top achievements
Rank 1
answered on 04 Sep 2012, 06:53 AM
Tsvetina Thx,
will give it a try and let you know if it works .. appreciate your help
will give it a try and let you know if it works .. appreciate your help