Создание иерархической сетки из одного запроса

Question

Учитывая приведенный ниже запрос, как создать иерархическую сетку на «salesPriceNo», чтобы родительская сетка отображала все «h» данные, а Child Grid отобразила все «d» данные? Я нашел следующее в Общем руководстве пользователя, но в нем нет никаких упоминаний о 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' 

Answer 1

Syncfusion ASP.Net Grid управления не имеют встроенной поддержки для использования функции Иерархическая Grid. Но мы можем достичь вашего требования с помощью функции 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> 

Позади кода данные, полученные с использованием запроса (заданного в вопросе), могут быть назначены на родительскую сетку следующим образом.

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

В выше, вы можете увидеть, что будет верхняя решетка уровня содержит столбцы из таблицы salesPriceHeader и DetailsTemplate используется для отображения ребенка сетки следующим образом.

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

Идентификатор дочерней сетки генерируется динамически на основе поля 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