RadGrid for ASP .NET version
RadControls for ASP .NET AJAX version |
4.6.2 and later
2008.1.415 and later |
| .NET version |
2.0 and later
|
| Visual Studio version |
2005 and later
|
| Programming language |
C#
|
| Browser support |
all supported by RadGrid for ASP .NET
all browsers supported by RadControls for ASP .NET AJAX
|
| To convert code from posted projects |
Telerik online converter |
Note: The demonstrated functionality is supported automatically for RadControls for ASP .NET AJAX version 2010.1.309 and later.
PROJECT DESCRIPTION
The present project enhances
GridClientSelectColumn behavior so that if all the check boxes are checked (all rows selected), the check box in the header is also checked. Furthermore, if a single check box (row) is unchecked (unselected) the "Select All" check box is unchecked as well.
In order to achieved that, we have used Grid's
RowSelected/RowDeselected client events as well as a hidden field to store the ClientID of header check box through ItemCreated server-side event. This way we can easily access the check box's element client-side when needed.
JavaScript:
| <script type="text/javascript"> |
| var grid; |
| function GridCreated() |
| { |
| grid = this; |
| } |
| |
| function RowSelected() |
| { |
| if (grid.MasterTableView.SelectedRows.length == grid.MasterTableView.Rows.length) |
| { |
| setCheckBox(true); |
| } |
| } |
| |
| function RowDeselected() |
| { |
| if (grid.MasterTableView.SelectedRows.length < grid.MasterTableView.Rows.length) |
| { |
| setCheckBox(false); |
| } |
| } |
| |
| function setCheckBox(toCheck) |
| { |
| var checkBoxID = document.getElementById("hf1").value; |
| var checkBox = document.getElementById(checkBoxID); |
| checkBox.checked = toCheck; |
| } |
| </script> |
ASPX:
| <radG:RadGrid ID="RadGrid1" runat="server" AllowMultiRowSelection="True" AllowPaging="true" |
| OnItemCreated="RadGrid1_ItemCreated" DataSourceID="AccessDataSource1"> |
| <MasterTableView> |
| <Columns> |
| <radG:GridClientSelectColumn UniqueName="ClientSelectColumn" /> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings ApplyStylesOnClient="true"> |
| <Selecting AllowRowSelect="true" /> |
| <ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected" OnRowDeselected="RowDeselected"/> |
| </ClientSettings> |
| </radG:RadGrid> |
| <asp:HiddenField ID="hf1" runat="server" /> |
| <br /> |
| <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/App_Data/Nwind.mdb" |
| SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers" |
| runat="server"> |
| </asp:AccessDataSource> |
| |
Code-Behind:
| protected void RadGrid1_ItemCreated(object sender, Telerik.WebControls.GridItemEventArgs e) |
| { |
| if (e.Item.ItemType == GridItemType.Header) |
| { |
| GridHeaderItem headerItem = (GridHeaderItem)e.Item; |
| CheckBox chkSelectAll = (CheckBox)headerItem["ClientSelectColumn"].Controls[0]; |
| hf1.Value = chkSelectAll.ClientID; |
| } |
| } |
| |
Find fully-functional web site attached to this message.