ODataDataSource - Hierarchical Binding with RadGrid

 CategoryNameDescription
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
  
 
ProductNameQuantityPerUnitUnitPriceUnitsInStockDiscontinued
    
    
    
    
    
    
    
    
    
    
    
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?