New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Hierarchical Binding with RadGrid

 CategoryNameDescription
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    

ODataSource is a client data source component that allows querying local and remote services that expose OData feed. It features design-time wizard for visual configuration of the data model for the data, which should be obtained from the service.

The following demo implements manual hierarchical binding to hierarchical RadGrid. The first level displays product categories and each category loads its products in a detail table.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="ODataDataSource.Examples.Functionality.HierarchicalBinding.DefaultCS"%>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <script type="text/javascript" src="scripts.js"></script>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

      <div class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowPaging="false"
            AllowSorting="false" AllowFilteringByColumn="false">
            <MasterTableView HierarchyLoadMode="Client">
                <DetailTables>
                    <telerik:GridTableView HierarchyLoadMode="Client">
                        <Columns>
                            <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="QuantityPerUnit">
                            </telerik:GridBoundColumn>
                            <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="UnitPrice" NumericType="Currency"
                                DataType="System.Decimal">
                            </telerik:GridNumericColumn>
                            <telerik:GridBoundColumn DataField="UnitsInStock" HeaderText="UnitsInStock" DataType="System.Int32">
                            </telerik:GridBoundColumn>
                            <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean">
                            </telerik:GridCheckBoxColumn>
                        </Columns>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>
                    <telerik:GridBoundColumn DataField="CategoryID" HeaderText="CategoryID" DataType="System.Int32"
                        Visible="false">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CategoryName" HeaderText="CategoryName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Description" HeaderText="Description" AllowSorting="false">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnHierarchyExpanding="gridHierarchyExpanding" OnCommand="onCommand">
                </ClientEvents>
            </ClientSettings>
        </telerik:RadGrid>
    </div>

    <telerik:RadODataDataSource ID="RadODataDataSource1" runat="server">
        <Schema>
            <telerik:DataModel ModelID="Category" Set="Categories" />
            <telerik:DataModel ModelID="Product" Set="Products" />
        </Schema>
        <ClientEvents RequestSucceeded="requestSucceeded" Requesting="requesting" />
    </telerik:RadODataDataSource>

    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.dataSource = $find("<%=RadODataDataSource1.ClientID%>");
                demo.grid = $find("<%=RadGrid1.ClientID%>");
                demo.loadingPanel = $find("<%=RadAjaxLoadingPanel1.ClientID %>");

                demo.dataSource.fetch("Category");
             });
        </script>
    </telerik:RadScriptBlock>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance