C# 从单个查询创建分层网格
给定下面的查询,我如何在“salesPriceNo”上创建分层网格,以便父网格显示所有“h”数据,子网格显示所有“d”数据?我在《通用用户指南》中找到了以下内容,但它没有提到WebFormsC# 从单个查询创建分层网格,c#,asp.net,telerik,syncfusion,C#,Asp.net,Telerik,Syncfusion,给定下面的查询,我如何在“salesPriceNo”上创建分层网格,以便父网格显示所有“h”数据,子网格显示所有“d”数据?我在《通用用户指南》中找到了以下内容,但它没有提到WebForms SELECT h.salesPriceNo, h.customerNo, h.status, h.itemNo, h.salesPersonCode, d.salesPriceDtlNo, d.salesPriceNo, d.itemNo, d.qtyPer, d.unitCost FROM salesPr
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'
Syncfusion ASP.Net网格
控件没有内置的支持,无法使用分层网格功能。但我们可以通过网格的DetailsTemplate
功能来满足您的需求。“详细信息模板”功能通过展开行来提供有关每行附加信息的详细视图
我们可以通过以下方式达到您的要求。请参考下面的代码片段
<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>
在上面,您可以看到顶级网格将包含salepriceheader
表中的列,用于显示子网格的detailsTemplate如下所示
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = (DataTable)GetData();//Return data from join operation
this.Grid.DataBind();
}
<script type="text/x-jsrender" id="childgridtemplae">
<div id="SaleChildGrid{{:salesPriceNo}}" class="e-childgrid" ></div>
</script>
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" }
]
});
}
在上面的事件处理程序中,您可以注意到,子网格包含来自salepricedetail
表的列,并且父数据源直接提供给子数据源,因为联接操作是在服务器上执行的,因此不需要在客户端进行筛选来获取详细的网格数据。现在,父网格和子网格使用相同的数据源呈现,父网格中显示salepriceheader
(h)列,子网格中显示salepricedetail
(d)