Childgrid binding with two querystring parameters

[Omar Muscatello]

Hello Syncfusion team,

I have an ejGrid (13.3.0.7) with remote databind.

I have a childgrid also (with remote databind).

This is my code:

@(Html.EJ().Grid<Ponteggio>

    ("tbListaPonteggi")

    .Datasource(

    ds => ds.URL(Url.Action("getListaPonteggi", "Registro")).Adaptor(AdaptorType.UrlAdaptor))

    .Columns(col =>

    {

        col.Field("id_ponteggio").IsPrimaryKey(true).Visible(false).Add();

        col.Field("id_server").Visible(false).Add();

        col

        .Field("Nome")

        .HeaderText("Nome ponteggio")

        .Add();

    })

    .ChildGrid<PermessoLavoro>(child =>

    {

        child.Datasource(ds => ds.URL(Url.Action("getPermessiLavoro", "Registro")).Adaptor(AdaptorType.UrlAdaptor) )

        .QueryString("id_ponteggio")

        .Columns(col =>

        {

            col.Field("id_permesso_lavoro").IsPrimaryKey(true).Visible(false).Add();

            col.Field("Numero")

                .HeaderText(NomiColonne.colNumPermessoLavoro)

                .Width(100).Add();

        });

    })

)

When the user expands a row in the parentgrid, I use this code to get the QueryString value (used to get childgrid):

 [HttpPost]

  public JsonResult getPermessiLavoro(DataManager dm)
  {
    int id_ponteggio = Convert.ToInt32(dm.Where[0].value);

   //...

  }

However, I need to pass the 'id_server' field (of the main row) also.

I try with:

 .ChildGrid<PermessoLavoro>(child =>

    {

        child.Datasource(ds => ds.URL(Url.Action("getPermessiLavoro", "Registro")).Adaptor(AdaptorType.UrlAdaptor) )

        .QueryString("id_ponteggio, id_server")

......

but doesn't work.

How can I solve this problem?

I read 

p.s. I'm sorry for bad english

[Omar Muscatello]

Hello Syncfusion team,

I have an ejGrid (13.3.0.7) with remote databind.

I have a childgrid also (with remote databind).

This is my code:

@(Html.EJ().Grid<Ponteggio>

    ("tbListaPonteggi")

    .Datasource(

    ds => ds.URL(Url.Action("getListaPonteggi", "Registro")).Adaptor(AdaptorType.UrlAdaptor))

    .Columns(col =>

    {

        col.Field("id_ponteggio").IsPrimaryKey(true).Visible(false).Add();

        col.Field("id_server").Visible(false).Add();

        col

        .Field("Nome")

        .HeaderText("Nome ponteggio")

        .Add();

    })

    .ChildGrid<PermessoLavoro>(child =>

    {

        child.Datasource(ds => ds.URL(Url.Action("getPermessiLavoro", "Registro")).Adaptor(AdaptorType.UrlAdaptor) )

        .QueryString("id_ponteggio")

        .Columns(col =>

        {

            col.Field("id_permesso_lavoro").IsPrimaryKey(true).Visible(false).Add();

            col.Field("Numero")

                .HeaderText(NomiColonne.colNumPermessoLavoro)

                .Width(100).Add();

        });

    })

)

When the user expands a row in the parentgrid, I use this code to get the QueryString value (used to get childgrid):

 [HttpPost]

  public JsonResult getPermessiLavoro(DataManager dm)
  {
    int id_ponteggio = Convert.ToInt32(dm.Where[0].value);

   //...

  }

However, I need to pass the 'id_server' field (of the main row) also.

I try with:

 .ChildGrid<PermessoLavoro>(child =>

    {

        child.Datasource(ds => ds.URL(Url.Action("getPermessiLavoro", "Registro")).Adaptor(AdaptorType.UrlAdaptor) )

        .QueryString("id_ponteggio, id_server")

......

but doesn't work.

How can I solve this problem?

I read 

p.s. I'm sorry for bad english

I read this post but I want to know if there's a more elegant way.

Thank you in advance

[Alan Sangeeth S]

Hi Omar,

Thanks for using Syncfusion products.

We can pass multiple querystring parameters to Child Grid using “Load” event and query property of Grid. Please refer to the following code example.

@(Html.EJ().Grid<object>("ParentGrid")

…

.ChildGrid(childnew =>

               {

childnew.Datasource(ds => ds.URL("/Home/ChildData")

                     .Adaptor(AdaptorType.UrlAdaptor))

                     .QueryString("EmployeeID")

                     .ClientSideEvents(eve => eve.Load("childLoad"))

…

}))

<script>

    function childLoad(args) {

// we can get Parent details in parentDetails property

        var data = this.model.parentDetails.parentRowData.ShipCountry;

        this.model.query.addParams("Country", data);

    }

</script>

public ActionResult ChildData(DataManager dm, string Country)

{

…

}

For your convenience we have created a sample that can be downloadable from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/120879/ze/Sample625385753-1830991924

Regards,
Alan Sangeeth S

[Omar Muscatello]

Thank you Alan Sangeeth.

It's what I was looking for.

[Saravanan Arunachalam]

Hi Omar,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.

[Anoopa]

I tried the same . But it is giving me javascript exception when I am trying to get this.model.parentDetails property. Am I missing something ? Below is my code .Please advise 

  @(Html.EJ().Grid<myku.Models.CourseListModel>("Grid")

                .AllowGrouping()  //For Grouping of data

                .AllowSorting()  //Soring Feature

                .AllowPaging() //Paging

                .PageSettings(page => { page.PageSize(50); })  //Define Page size

                .AllowFiltering()

                        //.EnablePersistence(true) // Save state of grid even after closing application

                .IsResponsive() //For mobile friendly

                .ShowColumnChooser() //give option for user to select column choosing

                .AllowResizeToFit()

                 .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

                .ToolbarSettings(toolbar =>

                    {

                        toolbar.ShowToolbar().ToolbarItems(items =>

                        {

                            //Allow Gloabl Serarch

                            items.AddTool(ToolBarItems.Search);

                            //Export Buttons

                            items.AddTool(ToolBarItems.ExcelExport);

                            //Crud Operation Buttons

                            items.AddTool(ToolBarItems.Add);

                            items.AddTool(ToolBarItems.Edit);

                            items.AddTool(ToolBarItems.Update);

                            items.AddTool(ToolBarItems.Cancel);

                        });

                    })

                    .Columns(col =>

                    {

                      

                        col.Field(p => p.CourseCrn).HeaderText("CRN").TextAlign(TextAlign.Left).AllowEditing(false).IsPrimaryKey(true).Add();

                        col.Field(p => p.CourseCode).HeaderText("Course Code").TextAlign(TextAlign.Left).AllowEditing(false).Add();

                        col.Field(p => p.CourseTitle).HeaderText("Course Title").TextAlign(TextAlign.Left).AllowEditing(false).Add();

                    })

                    .Mappers(map =>

                    {

                        map.ExportToExcelAction("ExportToExcel");

                    })

                      .QueryString("CourseCrn")

                     .ClientSideEvents(eve => eve.DetailsExpand("detailsexpand"))

                     .ChildGrid(d =>

                        {

                            d.Datasource(ds => ds.URL("../Home/StudentDataSource").Adaptor(AdaptorType.UrlAdaptor))

                           .QueryString("CourseCrn")

                         

                           .Columns(col =>

                        {

                            col.Field("Studentid").HeaderText("Student ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                            col.Field("StudentName").HeaderText("Student Name").Width(100).Add();

                        });

                        }).ClientSideEvents(eve => eve.Load("childLoad"))

                )

<script>

    function childLoad(args) {

// we can get Parent details in parentDetails property

        var data = this.model.parentDetails.parentRowData.CourseCrn;

        this.model.query.addParams("CRN", data);

    }

</script>

[Anoopa]

Can we use different datasource for both instead of using the same? Child loads using the parameter values from parent.

[Venkatesh Ayothi Raman]

Hi Anoopa, 

Thanks for the update. 

We were unable to reproduce the issue at our end and we can use different data source for both parent and child grid and we notice in your code example you are referring the QueryString in both child and parent as well as we noticed you are not referring the data source for parent grid. We suggest you please refer to Help document and online demo for your reference, 

Help document: https://help.syncfusion.com/aspnetmvc/grid/hierarchy-grid 

Online demo: http://mvc.syncfusion.com/demos/web/grid/hierarchygrid 

We have also created a sample for your convenience which can be download from following link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/HierachyGrid23142088 

Regards, 

Venkatesh Ayothiraman. 

[Jason Gabel]

Here is the javascript I used after some testing

function childLoad(args) {
  var data = this.model.parentDetails.parentRowData.{YourField};
  if (this.model.query == null) {
   this.model.query = new ej.Query();
  }
  this.model.query.addParams("{yourParamName}", data);
 }

Where you replace the {YourField} with the column and then {yourParamName} with whatever you call it server side.

There is one caveat that maybe Syncfusion could look into. Its the caching.
If you turn on caching you will get the same data from each subrow based on the single field you have listed as your QueryString as it appears this same information is used as the key in the Cache.

[Venkatesh Ayothi Raman]

Hi Jason, 

Thanks for the update. 

We can also pass the additional parameter as per your suggestion. 

Regards, 

Venkatesh Ayothiraman.