PROJECT DESCRIPTION
Code Library sample to demonstrate how to select cells in RadGrid and its DetailTables using client-side (JavaScript) logic.
DEMO
CSS & FONT
JAVASCRIPT
<script type="text/javascript">
function OnRowClick(sender, args) {
var grid = sender; // reference to RadGrid firing the rowClick event (not the detailtable)
var tableView = args.get_tableView(); // reference to the current tableView
var tableName = tableView.get_name();// Name of the current tableView
// Find and Clear Previously selected cells
var selectedCell = $telerik.$(sender.get_element()).find("." + sender._cellSelection.selectable.options.styles.SELECTED);
grid._cellSelection.deselect(selectedCell); // deselect a cell
// Find and Select the newly clicked Cell
var rowIndex = args.get_gridDataItem().get_itemIndex();
var cellIndex = args.get_domEvent().target.cellIndex;
var newCell = args.get_tableView().get_dataItems()[rowIndex].get_element().cells[cellIndex];
sender._cellSelection.select(newCell); // Select a cell
// Get reference to labels
var rLabel1 = $('span[id$="RadLabel1"]');
var rLabel2 = $('span[id$="RadLabel2"]');
// Set labels' content (HTML)
rLabel1.html("Table Name: <b>" + tableName + "</b>");
rLabel2.html("Cell content: <b>" + newCell.innerText + "</b>");
}
</script>
MARKUP
CODE BEHIND - C#
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
if (!e.IsFromDetailTable)
{
RadGrid1.DataSource = GetGridSource().Select("ParentID = 0");
}
}
protected void RadGrid1_DetailTableDataBind(object sender, GridDetailTableDataBindEventArgs e)
{
var parentID = int.Parse(e.DetailTableView.ParentItem.GetDataKeyValue("ID").ToString());
e.DetailTableView.DataSource = GetGridSource().Select(string.Format("ParentID = {0}", parentID));
}
protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
if (e.Column is GridBoundColumn && e.Column.UniqueName == "ID") e.Column.Display = false;
}
private DataTable GetGridSource()
{
var dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("ParentID");
dt.Columns.Add("Text");
dt.Rows.Add(new object[] { 1, 0, "Master Data" });
dt.Rows.Add(new object[] { 2, 1, "Detail 1 Data" });
dt.Rows.Add(new object[] { 3, 2, "Detail 2 Data" });
dt.Rows.Add(new object[] { 4, 3, "Detail 3 Data" });
dt.Rows.Add(new object[] { 5, 4, "Detail 3 Data" });
return dt;
}
CODE BEHIND - VB
Protected Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs)
If Not e.IsFromDetailTable Then
RadGrid1.DataSource = GetGridSource().Select("ParentID = 0")
End If
End Sub
Protected Sub RadGrid1_DetailTableDataBind(sender As Object, e As Telerik.Web.UI.GridDetailTableDataBindEventArgs)
Dim parentID = Integer.Parse(e.DetailTableView.ParentItem.GetDataKeyValue("ID").ToString())
e.DetailTableView.DataSource = GetGridSource().Select(String.Format("ParentID = {0}", parentID))
End Sub
Protected Sub RadGrid1_ColumnCreated(sender As Object, e As Telerik.Web.UI.GridColumnCreatedEventArgs)
If TypeOf e.Column Is GridBoundColumn And e.Column.UniqueName = "ID" Then
e.Column.Display = False
End If
End Sub
Private Function GetGridSource() As DataTable
Dim dt = New DataTable
dt.Columns.Add("ID")
dt.Columns.Add("ParentID")
dt.Columns.Add("Text")
dt.Rows.Add(New Object() {1, 0, "Master Data"})
dt.Rows.Add(New Object() {2, 1, "Detail 1 Data"})
dt.Rows.Add(New Object() {3, 2, "Detail 2 Data"})
dt.Rows.Add(New Object() {4, 3, "Detail 3 Data"})
dt.Rows.Add(New Object() {5, 4, "Detail 3 Data"})
Return dt
End Function