- Home
- Forum
- ASP.NET Core
- Hierarchical Grid
Hierarchical Grid
Hi support, i would like to insert a child grid inside my grid.
This is my grid:
<ej-grid id="Grid" locale="it-IT" allow-sorting="true" allow-paging="true"
is-responsive="true" enable-responsive-row="true" show-stacked-header="true"
toolbar-click="GridToolbarClicked" action-complete="GridActionComplete"
row-data-bound="GridRowDatabound" databound="GridShowToolbarTooltip"
datasource="ViewBag.DataSource">
<e-sort-settings>
<e-sorted-columns>
<e-sorted-column field="RegionName" direction="Ascending"></e-sorted-column>
</e-sorted-columns>
</e-sort-settings>
<e-stacked-header-rows>
<e-stacked-header-row>
<e-stacked-header-columns>
<e-stacked-header-column header-text="Regioni" text-align="Center" column='@new List<string> {"RegionName", "IstatCode"}'></e-stacked-header-column>
<e-stacked-header-column header-text="Validità" text-align="Center" column='@new List<string> {"StartDate", "EndDate"}'></e-stacked-header-column>
<e-stacked-header-column header-text="Azioni" text-align="Center" column='@new List<string> {"editField","deleteField"}'></e-stacked-header-column>
</e-stacked-header-columns>
</e-stacked-header-row>
</e-stacked-header-rows>
<e-page-settings page-size="5" show-defaults="true" enable-templates="true" template="#template">
</e-page-settings>
<e-toolbar-settings show-toolbar="true">
<e-custom-toolbar-items>
<e-custom-toolbar-item template-id="#Refresh"></e-custom-toolbar-item>
<e-custom-toolbar-item template-id="#Add"></e-custom-toolbar-item>
</e-custom-toolbar-items>
</e-toolbar-settings>
<e-columns>
<e-column field="Id" visible="false"></e-column>
<e-column field="RegionName" header-text="Regione" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="IstatCode" header-text="Codice ISTAT" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center" text-align="Center" width="150"></e-column>
<e-column field="EndDate" header-text="Data Fine" header-text-align="TextAlign.Center" text-align="Center" width="150"></e-column>
<e-column field="editField" header-text="Modifica" header-text-align="TextAlign.Center" text-align="Center" width="80">
<e-column-commands>
<e-column-command type="edit">
<e-button-options content-type="ImageOnly" prefix-icon="e-icon e-edit" click="GridEditRow"></e-button-options>
</e-column-command>
</e-column-commands>
</e-column>
<e-column field="deleteField" header-text="Cancella" header-text-align="TextAlign.Center" text-align="Center" width="80">
<e-column-commands>
<e-column-command type="delete">
<e-button-options content-type="ImageOnly" prefix-icon="e-icon e-delete" click="GridDeleteRow"></e-button-options>
</e-column-command>
</e-column-commands>
</e-column>
</e-columns>
<ej-grid id="Child" locale="it-IT" allow-sorting="true" allow-paging="true" datasource="ViewBag.DataSource">
<e-columns>
<e-column field="Province.ProvinceName" header-text="Provincia" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="Province.Initial" header-text="Sigla provincia" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="Province.IstatCode" header-text="Codice ISTAT" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="Province.StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="Province.EndDate" header-text="Data Fine" header-text-align="TextAlign.Center" text-align="Center"></e-column>
</e-columns>
</ej-grid>
</ej-grid>
Inside the controller i fill the DataSource structure with
ViewBag.DataSource = _mapper.Map<ICollection<RegionViewModel>>(_repository.GetAllIncluding(e => e.Province));
return View();
and this is the structure of two classes involved
public sealed class RegionViewModel
{
public RegionViewModel()
{
Province = new HashSet<ProvinceViewModel>();
}
public int Id { get; set; }
public string RegionName { get; set; }
public string IstatCode { get; set; }
public string StartDate { get; set; }
public string EndDate { get; set; }
[JsonIgnore]
public ICollection<ProvinceViewModel> Province { get; set; }
}
public sealed class ProvinceViewModel
{
public int Id { get; set; }
public int RegionId { get; set; }
public string ProvinceName { get; set; }
public string Initial { get; set; }
public string IstatCode { get; set; }
public string StartDate { get; set; }
public string EndDate { get; set; }
public RegionViewModel Region { get; set; }
}
everityme i've Syntax Error missing }.
Where i wrong ?
Thanks
Stefano Capobianco
SIGN IN To post a reply.
5 Replies
MS
Mani Sankar Durai
Syncfusion Team
November 27, 2017 11:04 AM UTC
Hi Stefano,
Thanks for contacting Syncfusion support.
We have analyzed your query and we have prepared a sample based on your requirement that can be downloaded from the below link.
In this sample we have rendered the hierarchy grid using child-grid property in grid.
Please refer the below code example.
|
[Index.cshtml]
@using Syncfusion.JavaScript.Models;
<ej-grid id="Grid" datasource=ViewBag.orddata allow-paging="true" child-grid="@(new GridProperties() {
QueryString = "EmployeeID",
DataSource = ViewBag.empdata,
Columns = { new Column() { Field = "EmployeeID", IsPrimaryKey=true, HeaderText = "EmployeeID" },
new Column() { Field = "FirstName", HeaderText = "First Name" },
new Column() { Field = "LastName", HeaderText = "LastName" } }
})">
<e-columns>
<e-column field="EmployeeID" is-primary-key="true" header-text="EmployeeID" text-align="Right" width="30"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
</e-columns>
</ej-grid>
|
Hierarchical binding can be used to create the Grid with parent and child relation, this facilitate you to view the child records for a particular row by clicking on the Expander button present in first column of each grid row. This can be enabled by defining ChildGrid and QueryString.
The ChildGrid property is used to define the model properties that has to be applied on the child grid. The ChildGrid is the extended class of the base class Grid such that it holds all the properties of the Grid. The QueryString is a property that has to be specified within the ChildGrid, which defines the relation between the parent and child grid.
The QueryString property is used to denote the primaryKey field of the parent grid which is to be mapped with the foreignKey field of the child grid
Please let us know if you need further assistance
Regards,
Manisankar Durai
SC
Stefano Capobianco
November 27, 2017 04:50 PM UTC
Thanks for you help. I've resoved with the following code:
<ej-grid id="Grid" locale="it-IT" allow-sorting="true" allow-paging="true" allow-scrolling="true" allow-resizing="true"
is-responsive="true" enable-responsive-row="true" show-stacked-header="true"
toolbar-click="GridToolbarClicked" action-complete="GridActionComplete"
row-data-bound="GridRowDatabound" databound="GridShowToolbarTooltip" >
<e-datamanager url="/Api/Regions/GetAll" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>
<e-sort-settings>
<e-sorted-columns>
<e-sorted-column field="RegionName" direction="Ascending"></e-sorted-column>
</e-sorted-columns>
</e-sort-settings>
<e-stacked-header-rows>
<e-stacked-header-row>
<e-stacked-header-columns>
<e-stacked-header-column header-text="Regioni" text-align="Center" column='@new List<string> {"RegionName", "IstatCode"}'></e-stacked-header-column>
<e-stacked-header-column header-text="Validità" text-align="Center" column='@new List<string> {"StartDate", "EndDate"}'></e-stacked-header-column>
<e-stacked-header-column header-text="Azioni" text-align="Center" column='@new List<string> {"editField","deleteField"}'></e-stacked-header-column>
</e-stacked-header-columns>
</e-stacked-header-row>
</e-stacked-header-rows>
<e-page-settings page-size="5" show-defaults="true" enable-templates="true" template="#template">
</e-page-settings>
<e-toolbar-settings show-toolbar="true">
<e-custom-toolbar-items>
<e-custom-toolbar-item template-id="#Refresh"></e-custom-toolbar-item>
<e-custom-toolbar-item template-id="#Add"></e-custom-toolbar-item>
</e-custom-toolbar-items>
</e-toolbar-settings>
<e-columns>
<e-column field="Id" visible="false"></e-column>
<e-column field="RegionName" header-text="Regione" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="IstatCode" header-text="Codice ISTAT" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center" text-align="Center" width="150"></e-column>
<e-column field="EndDate" header-text="Data Fine" header-text-align="TextAlign.Center" text-align="Center" width="150"></e-column>
<e-column field="editField" header-text="Modifica" header-text-align="TextAlign.Center" text-align="Center" width="80">
<e-column-commands>
<e-column-command type="edit">
<e-button-options content-type="ImageOnly" prefix-icon="e-icon e-edit" click="GridEditRow"></e-button-options>
</e-column-command>
</e-column-commands>
</e-column>
<e-column field="deleteField" header-text="Cancella" header-text-align="TextAlign.Center" text-align="Center" width="80">
<e-column-commands>
<e-column-command type="delete">
<e-button-options content-type="ImageOnly" prefix-icon="e-icon e-delete" click="GridDeleteRow"></e-button-options>
</e-column-command>
</e-column-commands>
</e-column>
</e-columns>
<ej-grid query-string="Id" allow-paging="true" load="GridChildLoad" allow-scrolling="true">
<e-datamanager url="/Api/Provinces/GetAll" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>
<e-page-settings page-size="5" show-defaults="true"></e-page-settings>
<e-columns>
<e-column field="Id" visible="false"></e-column>
<e-column field="ProvinceName" header-text="Provincia" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="Initial" header-text="Sigla Provincia" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="IstatCode" header-text="Codice Istat" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center" text-align="Center"></e-column>
<e-column field="EndDate" header-text="Data Fine" header-text-align="TextAlign.Center" text-align="Center"></e-column>
</e-columns>
</ej-grid>
</ej-grid>
Now i have a little problem with the scrolling. Sometimes the side scroll bar disappear but if i move with arrows i can move on evry row. i need to reload the form to have newly the scroll bar.
Thanks
Stefano
VA
Venkatesh Ayothi Raman
Syncfusion Team
November 28, 2017 12:03 PM UTC
Hi Stefano,
Thanks for the update.
This is already known issue “Parent Scroller is not refreshed after Collapse/Expand of Hierarchy Grid” and logged the defect report internally. The fix for this issue will be included in our upcoming Volume 4, SP1 2017 release which is expected to be rolled out in the month of December.
Regards,
Venkatesh Ayothiraman.
SC
Stefano Capobianco
November 28, 2017 03:06 PM UTC
Thanks for your answer. I will wait for the update pack.
Stefano
VA
Venkatesh Ayothi Raman
Syncfusion Team
November 29, 2017 04:04 AM UTC
Hi Stefano,
Thanks for the update.
We will let you know once it rolled out. Until we appreciate your patience.
Regards,
Venkatesh Ayothiraman.
SIGN IN To post a reply.
- 5 Replies
- 3 Participants
-
SC Stefano Capobianco
- Nov 26, 2017 04:00 PM UTC
- Nov 29, 2017 04:04 AM UTC
