This topic contains the following sections:

• Introduction
• Load all child tables DataSource (default)
• Load child tables DataSource on demand
• Hierarchical strongly typed collection

Introduction

WebGrid allows a hierarchical data source to be displayed in hierarchical navigation layout. It supports unlimited nested tables inside another table and provides sophisticated data analytical presentation. It also includes built-in automatic functionality that handles the process of retrieving child row based on defined relationships, as well as flexibility to load child data on demand The latest WebGrid now supports hierarchical data binding through ISDataSource component, enabling you to bind hierarchical data instantly. Click here to learn more on ISDataSource support.

There are two types of hierarchical select operation supported in WebGrid:

Load all child tables DataSource (default)

By default, all tables defined in the dataset that are connected to the DataSource control will be loaded at first page request. For instance, a dataset containing hierarchical tables such as Customers => Orders => Order Details will have all three tables loaded. This default scenario is best used to display relatively small amount of hierarchical data.

With declarative hierarchical DataSource control support, displaying hierarchical data has never been easier. The following codes illustrate how the WebGrid can be declaratively connected to the DataSource control which is also declaratively defined.

Code

Copy Code

<ISWebGrid:WebGrid ID="WebGrid1" runat="server" Height="300px" UseDefaultStyle="True" Width="100%" DataMember="Customers" DataSourceID="ISDataSource1"> <RootTable Caption="Customers" DataKeyField="CustomerID" DataMember="Customers"> <ChildTables> <ISWebGrid:WebGridTable Caption="Orders" DataKeyField="OrderID" DataMember="Orders"> <ChildTables> <ISWebGrid:WebGridTable Caption="Order Details" DataMember="Order Details"> <Columns> ... columns definition </Columns> </ISWebGrid:WebGridTable> </ChildTables> <Columns> ... columns definition </Columns> </ISWebGrid:WebGridTable> </ChildTables> <Columns> ...columns definitions </Columns> </RootTable> <LayoutSettings Hierarchical="True"> </LayoutSettings> </ISWebGrid:WebGrid> <ISDataSource:ISDataSource ID="ISDataSource1" runat="server" SchemaName="dsNorthwind"> <Tables> <ISDataSource:ISDataSourceTable ConflictDetection="CompareAllValues" SelectMethod="GetData" TableName="Customers" TypeName="dsNorthwindTableAdapters.CustomersTableAdapter"> </ISDataSource:ISDataSourceTable> <ISDataSource:ISDataSourceTable ConflictDetection="CompareAllValues" SelectMethod="GetData" TableName="Orders" TypeName="dsNorthwindTableAdapters.OrdersTableAdapter"> </ISDataSource:ISDataSourceTable> <ISDataSource:ISDataSourceTable ConflictDetection="CompareAllValues" SelectMethod="GetData" TableName="Order Details" TypeName="dsNorthwindTableAdapters.Order_DetailsTableAdapter"> </ISDataSource:ISDataSourceTable> </Tables> </ISDataSource:ISDataSource>

Although ISDataSource control can be declaratively written in html view mode, it is best practice to configure the DataSource at design time using the provided designer. The above sample has the markup generated by ISDataSource Designer.

To learn more about ISDataSource licensing when used together with WebGrid, see About ISDataSource licensing in WebGrid.NET Enterprise 5.0.

Load child tables DataSource on demand

Data binding and on demand data retrieval concept has significantly changed in WebGrid along with the new DataSource control support.

In previous versions, WebGrid is serving as both User Interface and Data Access component. By being Data Access component, it means WebGrid also handles the DataSource level functions such as initializing the DataSource and performing on demand function on Grid level through events.

In version 5 with DataSource control support, WebGrid is now serving as pure User Interface control. That means WebGrid no longer handle DataSource level manipulation. Instead, WebGrid simply connects to a DataSource control which primarily performing data retrieval and data manipulation. With this new concept, WebGrid simply displays a valid DataSource that has been successfully retrieved by DataSource control.

• Load on demand data retrieval is no longer handled at WebGrid level.
• The load on demand data retrieval is now handled at DataSource level. At the time of WebGrid 5.0 release, the only DataSource control type that support this operation is ISDataSource.

Configuring a WebGrid to display load on demand child table is now easier and simpler. There is no configuration needed to set at WebGrid level.

At ISDataSource DataSource control level, you can enable load on demand operation by simply setting LoadOnDemand property to True. Next, you provide the method that retrieve the child table data and assign it to the ISDataSource control.

Code	Copy Code
< ISDataSource : ISDataSource ID="ISDataSource1" runat="server" LoadOnDemand="True" SchemaName="dsNorthwind"> ... </ISDataSource:ISDataSource>

• Write codes for the method in App_Code.
  The following codes illustrate the technique to load Orders table when a Customer record is drilled down.
  
  

  Code	Copy Code
  public DataTable GetData(string customerID) { dsNorthwind.OrdersDataTable dt = new dsNorthwind.OrdersDataTable(); OleDbDataAdapter adapter = new OleDbDataAdapter(); adapter.SelectCommand = new OleDbCommand("SELECT * FROM Orders WHERE CustomerID = '" + customerID + "'", this.Connection); adapter.Fill(dt); return dt; }

  
  
  Using this technique, you can assign the ISDataSourceTable's SelectMethod to GetData.
  

• Create the method in Visual Studio 2005's DataSet Designer.
  Another way to create the data method is through DataSet Designer in Visual Studio 2005. The DataSet Designer enables you to create the method using a visual manner with less coding needed.
  
  See following steps for more details:

• • Firstly, right click on the TableAdapter area and click "Add Query".
    
    
    
    
  • Next, you can write the SQL statement or use Query Builder to select the data to be used by the DataSource control.
    
    
    
    
  • Next, name the method as "GetDataByCustomerID" in the Returns a DataTable option. Uncheck the Fill a DataTable option. Notice that the CustomerID parameter will be added by the designer automatically.
    
    
    
    

    After the method is successfully created, you can simply assign it to be consumed by ISDataSource by setting the SelectChildRowMethod of Orders DataSourceTable to GetDataByCustomerID. Note that in this technique, the SelectMethod is still set to GetData. The SelectChildRowMethod is provided for the convenience in setting the child row data method without has to change the main select method.

Once the ISDataSource control has been successfully configured, WebGrid will be able to automatically perform load on demand data retrieval without additional settings or codes at WebGrid level.

Hierarchical strongly typed collection

Easily bind hierarchical business objects in the same way and manner as in DataSet objects. WebGrid is the first grid component that implements extensive support to bind your custom hierarchical objects in an elegant, strongly-typed object approach.

Walkthrough Topics

Walkthrough: Binding WebGrid to Hierarchical ISDataSource control

Walkthrough: Configuring updatable WebGrid bound to ISDataSource control

Walkthrough: Loading child rows on demand based on the selected parent row

See Also

© 2012 Intersoft Solutions Corp. All Rights Reserved.