Hierarchical Grid

[Stefano Capobianco]

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

[Mani Sankar Durai]

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. 

Link: http://www.syncfusion.com/downloads/support/forum/134753/ze/hierarchical-grid1032240234 

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 

[Stefano Capobianco]

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

[Venkatesh Ayothi Raman]

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. 

[Stefano Capobianco]

Thanks for your answer. I will wait for the update pack.

Stefano 

[Venkatesh Ayothi Raman]

  

Hi Stefano, 

Thanks for the update. 

We will let you know once it rolled out. Until we appreciate your patience. 

Regards, 

Venkatesh Ayothiraman.