We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid with child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

132408 Aug 31,2017 01:37 AM Sep 4,2017 05:30 AM ASP.NET Core 1
loading
Tags: Grid
Stefano Capobianco
Asked On August 31, 2017 01:37 AM

Hi support i have a little problem with this grid

                    <ej-grid id="Grid" allow-paging="true" allow-searching="true" 

                             allow-sorting="true" locale="it-IT" toolbar-click="GridToolbarClicked"

                             action-complete="GridActionComplete" is-responsive="true" 

                             enable-responsive-row="true" show-stacked-header="true"

                             databound="GridShowToolbarTooltip" row-data-bound="GridRowDatabound">

                        <e-datamanager url="http://localhost:5110/api/Regions" adaptor="WebApiAdaptor"></e-datamanager>

                        <e-sort-settings>

                            <e-sorted-columns>

                                <e-sorted-column field="Id" direction="Ascending"></e-sorted-column>

                            </e-sorted-columns>

                        </e-sort-settings>

                        <e-page-settings page-size="2" show-defaults="true" enable-templates="true" template="#template">

                        </e-page-settings>

                        <e-search-settings fields='@new List<string> {"RegionName"}'>

                        </e-search-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> {"Id","RegionName","IstatCode", "ProvinceName"}'></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-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" header-text="Record Id" header-text-align="TextAlign.Center"></e-column>

                            <e-column field="RegionName" header-text="Regione" header-text-align="TextAlign.Center"></e-column>

                            <e-column field="IstatCode" header-text="Codice Istat" header-text-align="TextAlign.Center"></e-column>

                            <e-column field="StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center"></e-column>

                            <e-column field="EndDate" header-text="Data Fine" header-text-align="TextAlign.Center"></e-column>

                        

                            <e-column field="editField" header-text="Modifica" header-text-align="TextAlign.Center" text-align="Center">

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

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

                            <e-datamanager url="http://localhost:5110/api/Provinces" adaptor="WebApiAdaptor"></e-datamanager>

                            <e-columns>

                                <e-column field="Id" header-text="Id Provincia" header-text-align="TextAlign.Center"></e-column>

                                <e-column field="RegionId" header-text="Id Regione" header-text-align="TextAlign.Center"></e-column>

                                <e-column field="ProvinceName" header-text="Provincia" header-text-align="TextAlign.Center"></e-column>

                            </e-columns>

                        </ej-grid>

                    </ej-grid>

The primary key of parent table is Id and the relation is done by the filed RegionId into the child table. How can i set the query-string parameter to see, inside the webapi $filter variable the correct field to set the query ?

Thanks in advance for your help

Stefano Capobianco


Saravanan Arunachalam [Syncfusion]
Replied On September 4, 2017 05:30 AM

Hi Stefano, 
Thanks for contacting Syncfusion’s support. 
We have analyzed your reported query and achieved your requirement by using load event of the child grid control that can be refer from the below code example. 
  <ej-grid id="Grid" allow-paging="true" allow-searching="true"> 
        . . .                    
        <ej-grid query-string="Id"  allow-paging="true" load="GridChildLoad"> 
            . . . 
        </ej-grid> 
    </ej-grid> 
<script type="text/javascript"> 
    function GridChildLoad(){ 
        this.model.queryString = "RegionId"; 
    } 
 
Regards, 
Saravanan A. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;