Passing parameter to a hierarchical child grid

[Frédéric Peyronnin]

Hi,

I have a hierarchical grid like this :

<ej-grid id="FlatGrid" locale=@GetMsg("MESID_LOCALIZATION") allow-paging="true" action-failure="OnActionFailure" allow-filtering="true" allow-sorting="true" load="onLoad">
    <e-page-settings page-size="10" page-size-list="new List<int> { 10,20,30,40,50,90 }"></e-page-settings>
    <e-edit-settings allow-editing="true" allow-deleting="true" edit-mode="Normal" show-confirm-dialog="true" show-delete-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"edit","delete","update","cancel", "search" }' />
    <e-datamanager json="ViewBag.datasource" update-url="/Logged/UsersListCellEditUpdate" remove-url="/Logged/UsersListCellEditDelete" adaptor="remoteSaveAdaptor" />
    <e-columns>
        <e-column field="iECH_ID" is-primary-key="true" text-align="Left" width="20"></e-column>
        <e-column field="strECH_Libelle" width="40" validation-rules='new Dictionary<string, object>() { { "required",true}, { "minlength",3} }'></e-column>
        <e-column field="iECH_PCO_ID" </e-column>
    </e-columns>
    <ej-grid query-string="iECH_PCO_ID" allow-paging="false" allow-reordering="true">
        <e-datamanager key="iECH_PCO_ID"  json="ViewBag.datasource2" url="/Logged/EchantillonsList" adaptor="UrlAdaptor"></e-datamanager>
        <e-columns>
            <e-column field="strLibelle" text-align="Left" width="20"></e-column>
        </e-columns>
    </ej-grid>
</ej-grid>

I would like to fetch child data(s) only when user click on the little Arrow to expand the line.

When i click on the little Arrow of one element, the "EchantillonsList" controler function is called, but how can i pass parameter (ex an id) to it ?

I tried this :

        public IActionResult EchantillonsListCellGetPCO([FromBody]CRUDModel<FFWcfServerReference.CEchantillon> value)

But "value" contents are always null.

Thx by advance.

FreD.

[Vignesh Natarajan]

Hi Frédéric, 

Thanks for using Syncfusion products.  

Query: ”  but how can i pass parameter (ex an id) to it ?” 

We have analyzed your query and we have already discussed this topic in our knowledge base document.  Kindly refer below link for our Knowledge base document  

KB: https://www.syncfusion.com/kb/7863/how-to-pass-additional-parameter-when-using-datamanager-in-grid  

Note: in above kb, it is suggested to single Grid. if you want to send parameter for the Child grid then set the ActionBegin event to the Child grid.   

Refer the below code 

<ej-grid id="Grid" allow-paging="true">     // parent grid      

        <ej-grid query-string="EmployeeID" datasource="ViewBag.child" action-begin="begin"> //child grid 

   .  

   . 

   . 

<script type="text/javascript"> 

    function begin(args) { 

           args.model.query.addParams("ID", 10248); 

    } 

</script> 

Kindly refer the KB for other details. 

Please get back to us if have any queries. 

Regards, 

Vignesh Natarajan 

[Frédéric Peyronnin]

Hi and thank's for your answer.

Excuse me, but i did not understand what you mean.

My purpose is to send an ID value to the controler. I tried Something like this :

    <ej-grid query-string="iECH_PCO_ID" allow-paging="false" allow-reordering="true" action-begin="begin">
        <e-datamanager key="iECH_PCO_ID" url="/Logged/EchantillonsListCellGetPCO" adaptor="UrlAdaptor"></e-datamanager>
        <e-columns>
            <e-column field="strTitre" header-text=@GetMsg("LIBID_USERS_TITRE") text-align="Left" width="20"></e-column>
        </e-columns>
    </ej-grid>

And i would like my controler function called "/Logged/EchantillonsListCellGetPCO" receive the id selected from the grid parent, so i can fetch data from database and populate the child grid.

I hope you can understand what i mean.

Thx.

[Vignesh Natarajan]

Hi Frédéric, 

 

Thanks for the update 

 

Query: “My purpose is to send an ID value to the controler” 

 

 

As per your requirement we have prepared a sample using URL adaptor. Based on the additional parameter filter the child Grid Data. Refer the below code snippet 

 

<ej-grid id="Grid" datasource=ViewBag.parent allow-paging="true"> 

        <e-datamanager url="/Home/DataSource" adaptor="@AdaptorType.UrlAdaptor"> 

        </e-datamanager> 

        <ej-grid query-string="EmployeeID" action-begin="begin" allow-paging="true"> 

            <e-datamanager url="/Home/DataSource1" adaptor="@AdaptorType.UrlAdaptor"> 

            </e-datamanager> 

              .         .           .  

        </ej-grid> 

        <e-toolbar-settings show-toolbar="true"> 

        </e-toolbar-settings> 

              .         .            . 

    </ej-grid> 

    <script type="text/javascript"> 

    function begin(args) { 

           args.model.query.addParams("ID", 10250 ); 

    } 

    </script> 

 

 

C# 

 

public ActionResult DataSource1([FromBody]Test dm) 

        { 

            IEnumerable DataSource = _context.Orders.Where(o=>o.OrderID == dm.ID);  

            int count = DataSource.AsQueryable().Count(); 

 

            DataOperations ds = new DataOperations(); 

            DataSource = ds.Execute(DataSource, dm); 

            return Json(new { result = DataSource, count = count }); 

 

        } 

        public class Test : DataManager       //inherit the class to show age as property of DataManager 

        { 

            public int ID { get; set; } 

        } 

 

Refer the below screenshot for the output 

 

 

 

Note: Since we have filtered the child Grid data using the ID we passed, only the parent grid with EmployeeID 4 will have child grid dataSource.  

  

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/136499/ze/WebApplication1_(2)1639282361.zip  

 

Regards, 

Vignesh Natarajan  

[Frédéric Peyronnin]

Hi,

Thank you very much ! Your sample helps me a lot !

I have a last question. How can i replace your hard coded "10250" value by the content of an employee field, by exemple EmployeeID, wich will be use as an ID to fetch corresponding lines ?

[Vignesh Natarajan]

Hi Frédéric, 

 

Thanks for the update. 

 

Query: ” How can i replace your hard coded "10250" value by the content of an employee field, by exemple EmployeeID, wich will be use as an ID to fetch corresponding lines ” 

 

We have analyzed your query and we have achieved your requirement using parentRowDetails in the action-begin event of the child Grid.  

 

Refer the below code snippet 

 

<script type="text/javascript"> 

        function begin(args) { 

            if (this.initialRender) { 

                var data = args.model.parentDetails.parentRowData.EmployeeID; 

                args.model.query.addParams("ID", data); 

            } 

    } 

    </script> 

 

 

Please get back to us if you have any queries 

 

Regards, 

Vignesh Natarajan 

[Frédéric Peyronnin]

Great !

It works perfectly as expected !

Thank you very much for your patience and your professionalism.

Fred.

[Sathyanarayanamoorthy Eswararao]

Hi Fred, 

We are happy to hear that your issue has been resolved. 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy