We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Hierarchical Table

Thread ID:

Created:

Updated:

Platform:

Replies:

118559 Mar 18,2015 05:58 PM Mar 19,2015 03:35 AM ASP.NET Web Forms 1
loading
Tags: Grid
Patrick Schaller
Asked On March 18, 2015 05:58 PM

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 [Syncfusion]
Replied On March 19, 2015 03:35 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;