RadControls for ASP .NET AJAX version |
Q2 2010 and later
|
.NET version |
3.5 and later
|
Visual Studio version |
2008 and later
|
Programming language |
C#
|
Browser support |
all browsers supported by RadControls for ASP .NET AJAX
|
PROJECT DESCRIPTION
The attached sample project demonstrates toggle selection of the RadGrid's rows. The example contains a GridTemplateColumn, with checkbox added into its ItemTemplate, instead of GridClientSelectColumn.
When the RadGrid row is clicked the javascript function changed its background and check the checkbox from the template column. If all rows are selected the header checkbox is checked too:
function
removeCssClass(className, element)
{
element.className = element.className.replace(className,
""
).replace(/^\s+/,
''
).replace(/\s+$/,
''
);
}
function
onRowClick(sender, eventArgs)
{
var
radGrid = sender;
var
index = eventArgs.get_itemIndexHierarchical();
var
dataItem = radGrid.get_masterTableView().get_dataItems()[index];
var
row = dataItem.get_element();
var
checkBox = row.children[0].children[0];
if
(!checkBox.checked)
{
checkBox.checked =
true
;
row.className = row.className +
" rgSelectedRow"
;
}
else
{
checkBox.checked =
false
;
removeCssClass(
"rgSelectedRow"
, row);
}
CheckHeaderCheckBoxIfNeeded(radGrid);
}
function
CheckHeaderCheckBoxIfNeeded(radGrid)
{
var
checkHeaderCheckBox =
true
;
var
dataItems = radGrid.get_masterTableView().get_dataItems();
for
(
var
i = 0; i < dataItems.length; i++)
{
var
dataItem = dataItems[i];
var
row = dataItem.get_element();
var
ckeckBox = row.children[0].children[0];
if
(!ckeckBox.checked)
{
checkHeaderCheckBox =
false
;
}
}
SelectCheckBox(checkHeaderCheckBox);
}
All selected items are saved into server side Dictionary object kept into the Session:
When the RadGrid fire some command the SelectedItems dictionary is updated:
When the RadGrid.ItemDataBound event handler is fired, for the current item, the logic checks if its ID field is contained into SelectedItems. If needed the item's check box is checked and the javascipt function is attached to the checkBox's onclick event:
This logic guarantees that all selected items will be persisted after filtering, paging and sorting.