从单个查询创建层次网格答案

【问题标题】：Creating a Hierarchical Grid from a single query从单个查询创建层次网格
【发布时间】：2025-12-05 21:35:01
【问题描述】：

鉴于以下查询，我将如何在“salesPriceNo”上创建层次网格，以便父网格将显示所有“h”数据，而子网格将显示所有“d”数据？我在 Common User Guide 中找到了以下内容，但没有提及 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'

【问题讨论】：

标签： c# asp.net telerik syncfusion

【解决方案1】：

Syncfusion ASP.Net Grid 控件没有内置支持使用分层网格功能。但是我们可以通过网格的DetailsTemplate 功能来满足您的要求。详细信息模板功能通过展开行来提供有关每行附加信息的详细视图。

我们可以通过以下方式满足您的要求。请参考以下代码sn-p。

<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>

在后面的代码中，使用查询（有问题）获得的数据可以分配给父网格，如下所示。

protected void Page_Load(object sender, EventArgs e)
 {
 this.Grid.DataSource = (DataTable)GetData();//Return data from join operation
 this.Grid.DataBind();
 }

在上面您可以看到*网格将包含来自salesPriceHeader 表的列，用于显示子网格的详细信息模板如下。

<script type="text/x-jsrender" id="childgridtemplae">
    <div id="SaleChildGrid{{:salesPriceNo}}" class="e-childgrid" ></div>
</script>

子网格的id是根据salesPriceNo字段动态生成的。

现在在detailsDataBound 事件中，子网格将呈现如下。

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" }
            ]
        });
    }

在上面的事件处理程序中，您可以注意到子网格包含来自salesPriceDetail 表的列，并且父数据源也直接提供给子数据源，因为连接操作是在服务器上执行的，因此不需要过滤在客户端获取详细信息网格数据。现在父网格和子网格使用相同的数据源渲染，来自salesPriceHeader (h) 的列显示在父网格中，salesPriceDetail(d) 显示在子网格中。

DetailsTemplate Demo

【讨论】：