Select cells in RadGrid with Hierarchy

1 posts, 0 answers
  1. Attila Antal
    Attila Antal avatar
    1 posts
    Member since:
    Aug 2016

    Posted 04 Oct Link to this post

    Requirements

    Telerik Product and Version used

    Telerik Web UI for ASP.NET AJAX 2018.3.910.45

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    HTML/XML, JavaScript, C#, VB

    PROJECT DESCRIPTION 

    Code Library sample to demonstrate how to select cells in RadGrid and its DetailTables using client-side (JavaScript) logic.


    DEMO
    Select cells in RadGrid with Hierarchy

    CSS & FONT
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <style type="text/css">
        .RadGrid.RadLabel_Bootstrap,
        .RadGrid.RadGrid_Bootstrap {
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
        }
     
        .RadGrid {
            outline: none;
        }
     
        .rgCaption {
            background-color: #808080;
            color: #ffffff;
        }
     
        .rgMasterTable tbody tr td:not(.rgSelectedCell) {
            cursor: pointer;
        }
    </style>


    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
    <telerik:RadGrid ID="RadGrid1" Width="500px" runat="server" AutoGenerateColumns="true" ShowHeader="false"
        OnNeedDataSource="RadGrid1_NeedDataSource"
        OnDetailTableDataBind="RadGrid1_DetailTableDataBind"
        OnColumnCreated="RadGrid1_ColumnCreated">
        <MasterTableView Name="MasterTable" DataKeyNames="ID" ClientDataKeyNames="ID" Caption="MasterTable" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true">
            <DetailTables>
                <telerik:GridTableView Name="Level1Table" DataKeyNames="ID" ClientDataKeyNames="ID" Caption="Level 1 DetailTable" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true">
                    <DetailTables>
                        <telerik:GridTableView Name="Level2Table" DataKeyNames="ID" ClientDataKeyNames="ID" Caption="Level 2 DetailTable" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true">
                            <DetailTables>
                                <telerik:GridTableView Name="Level3Table" DataKeyNames="ID" ClientDataKeyNames="ID" Caption="Level 3 DetailTable" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true">
                                    <DetailTables>
                                        <telerik:GridTableView Name="Level4Table" DataKeyNames="ID" ClientDataKeyNames="ID" Caption="Level 4 DetailTable" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true">
                                        </telerik:GridTableView>
                                    </DetailTables>
                                </telerik:GridTableView>
                            </DetailTables>
                        </telerik:GridTableView>
                    </DetailTables>
                </telerik:GridTableView>
            </DetailTables>
        </MasterTableView>
        <ClientSettings>
            <ClientEvents OnRowClick="OnRowClick" />
            <Selecting CellSelectionMode="SingleCell" />
        </ClientSettings>
    </telerik:RadGrid>

    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


Back to Top