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. Image for the cookie policy date
close icon

Grid with child grid

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


1 Reply

SA Saravanan Arunachalam Syncfusion Team September 4, 2017 09:30 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon