Hierarchical Table

[Patrick Schaller]

Given the below query how would I create a Hierarchical Grid on "salesPriceNo" so that the Parent Grid would show  all "h" data and the Child Grid would show all "d" data?  I found the following in the, Common User Guide, but it makes no mention of WebForms.

SELECT h.salesPriceNo, h.customerNo, h.status, h.itemNo, h.salesPersonCode, d.salesPriceDtlNo, d.salesPriceNo, d.itemNo, d.qtyPer, d.unitCost
FROM salesPriceHeader h LEFT OUTER JOIN salesPriceDetail d ON h.salesPriceNo = d.salesPriceNo
WHERE h.customerNo = 'MyCustomerNo12345'

[Madhu Sudhanan P]

Hi Patrick,

Thanks for using Syncfusion products.

Essential ASP.Net Grid control don’t have in-built support to useHierarchical Grid feature. But we can achieve your requirement with the DetailsTemplate feature of the grid. Details Template feature provides a detailed view about additional information of each row by expanding the row.

We can achieve your requirement in the following ways. Please refer the below code snippet.

<ej:Grid id="Grid" runat="server" DetailsTemplate="#childgridtemplae">

<Columns>

<ej:Column Field="salesPriceNo" HeaderText="SalesPrice NO"/>

<ej:Column Field="customerNo" HeaderText="Customer No"/>

<ej:Column Field="status" HeaderText="Status"/>

<ej:Column Field="itemNo" HeaderText="Item No"/>

<ej:Column Field="SalesPersonCode" HeaderText="SalesPerson Code"/>

</Columns>

<ClientSideEvents DetailsDataBound="onDetailsDataBound" />

</ej:Grid>

At the code behind, the data obtained using the query(asked in question) can be assigned to parent grid as follows.

protected void Page_Load(object sender, EventArgs e)

{

this.Grid.DataSource = (DataTable)GetData();//Return data from join operation

this.Grid.DataBind();

}

In the above you can see that the top level grid will contains the columns from salesPriceHeadertable and the detailsTemplate used to display the child grid is as follows.

<script type="text/x-jsrender">

<div id="SaleChildGrid{{:salesPriceNo}}" class="e-childgrid" ></div>

</script>

The id of the child grid is generated dynamically based on the salesPriceNofield.

Now in the detailsDataBound event the child grid will be rendered as follows.

function onDetailsDataBound(e) {

e.detailsElement.find(".e-childgrid").ejGrid({

dataSource: this.model.dataSource, //Parents data source

columns: [

{ field: "salesPriceDtlNo", headerText: "SalesPrice Dlt No" },

{ field: "salesPriceNo", headerText: "SalesPrice No" },

{ field: "itemNo", headerText: "Item No" },

{ field: "qtyPer", headerText: "Quantity" },

{ field: "unitCost", headerText: "Unit Cost" }

]

});

}

In the above event handler you can notice that the child grid contains the columns from salesPriceDetail table and also parent`s data source is provided directly to the child datasource since the join operation is performed at the server and hence no filtering is required at the client side to get details grid data. And now the parent and child grid are rendered using same datasource with columns from salesPriceHeader (h) are showed in parent grid and salesPriceDetail(d) are displayed in child grid.

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P