Child Grid parameters

Hello, is it possible to pass the parameter directly through the Child Grid like this example?

Because the querystring cannot be obtained directly from Read.

@{

    var data = new Syncfusion.EJ2.DataManager()

            {

                Url = "/Relatorios/GridSubGerencial_Read/ ##parameter here##",

                Adaptor = "UrlAdaptor"

            };


    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                DataSource = data,

                QueryString = "Proposta_id",

                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Proposta_id", IsPrimaryKey=true, HeaderText="ID", Width="150" },

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Valor_final", HeaderText="Valor", Width="150" },

}

            };

}

<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">

    <e-data-manager url="@Url.Action("GridGerencial_Read","Relatorios")"

                    adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

            <e-grid-columns>

        <e-grid-column field="Proposta_id" headerText="ID" type="string" width="200"></e-grid-column>

        <e-grid-column field="Codigo" headerText="Proposta" type="string" width="200"></e-grid-column>

       

            </e-grid-columns>

        </ejs-grid>

C#

public IActionResult GridSubGerencial_Read([FromBody] DataManagerRequest dm, string Proposta_id) //PARAMETER

        {

            TempData.Keep("datainicial");

            TempData.Keep("datafinal");


            IEnumerable DataSource = ObterDadosSubGerencial(Proposta_id);


            DataOperations operation = new DataOperations();

            if (dm.Search != null && dm.Search.Count > 0)

            {

                DataSource = operation.PerformSearching(DataSource, dm.Search); //Search

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                DataSource = operation.PerformSorting(DataSource, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

            }

            int count = DataSource.Cast<MovimentacaoFinanceira>().Count();

            if (dm.Skip != 0)

            {

                DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = operation.PerformTake(DataSource, dm.Take);

            }

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

        }

Thanks



10 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team September 26, 2023 12:48 PM UTC

Hi Fernando,


By default, the queryString value will be sent as a where query along with the child Grid data request. If you want to pass the “queryString” value with the url, we suggest the “detailDataBound” event inside which you can set the child Grid dataSource dynamically. Please refer to the below code example and API link for more information.


<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">

 

.  .  .

</ejs-grid>

 

<script>

  function detailDataBound(args){

        // bind the  data with the parent grid querString value directly to the childGrid

        console.log(args.childGrid.parentDetails.parentKeyFieldValue);

        args.childGrid.dataSource = new ej.data.DataManager({

                url : "/Relatorios/GridSubGerencial_Read/"+args.childGrid.parentDetails.parentKeyFieldValue,

                adaptor : new ej.data.UrlAdaptor()

            });

    }

</script>

 

 


https://ej2.syncfusion.com/javascript/documentation/api/grid/#detaildatabound


Regards,

Pavithra S



FE Fernando October 2, 2023 11:30 AM UTC

Hello, could you give me the complete code example?

Thanks


@{

    //var data = new Syncfusion.EJ2.DataManager()

    // {

    // Url = "/Relatorios/GridSubGerencial_Read",

    // Adaptor = "UrlAdaptor"

    // };

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                //DataSource = data,

                QueryString = "Proposta_id",

                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Proposta_id", IsPrimaryKey=true, HeaderText="ID", Width="150" },

                    new Syncfusion.EJ2.Grids.GridColumn(){ Field="Valor_final", HeaderText="Valor", Width="150" },

                    }

             };

    }

<ejs-grid id="GridRelatorioGerencial" detailDataBound="detailDataBound" childGrid="ChildGrid" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">

    <e-data-manager url="@Url.Action("GridGerencial_Read","Relatorios")"

                    adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

    <e-grid-columns>

...

 </e-grid-columns>

</ejs-grid>


<script>


    function detailDataBound(args) {

        console.log(args.childGrid.parentDetails.parentKeyFieldValue);

        args.childGrid.dataSource = new ej.data.DataManager({

            url: "/Relatorios/GridSubGerencial_Read/" + args.childGrid.parentDetails.parentKeyFieldValue,

            adaptor: new ej.data.UrlAdaptor()

        });

        args.childGrid.Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

            new Syncfusion.EJ2.Grids.GridColumn(){ Field = "Proposta_id", IsPrimaryKey = true, HeaderText = "ID", Width = "150" },

        new Syncfusion.EJ2.Grids.GridColumn(){ Field = "Valor_final", HeaderText = "Valor", Width = "150" },

         });

    }

</script>



PS Pavithra Subramaniyam Syncfusion Team October 3, 2023 06:44 AM UTC

Fernando,


Please refer to the below code example for adding the parent key values to the Grid dataSource URL dynamically.


@{

var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

{

QueryString = "Proposta_id",

 

Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

 

  new Syncfusion.EJ2.Grids.GridColumn(){ Field="Proposta_id", IsPrimaryKey=true, HeaderText="ID", Width="150" },

 

  new Syncfusion.EJ2.Grids.GridColumn(){ Field="Valor_final", HeaderText="Valor", Width="150" },

 

  }

  };

  }

<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt"

    allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { " Search"})">


  . . .

</ejs-grid>

<script>

    function detailDataBound(args){

 

        // bind the data with the parent grid querString value directly to the child Grid

 

        console.log(args.childGrid.parentDetails.parentKeyFieldValue);

 

        args.childGrid.dataSource = new ej.data.DataManager({

 

                url : "/Relatorios/GridSubGerencial_Read/"+args.childGrid.parentDetails.parentKeyFieldValue,

 

                adaptor : new ej.data.UrlAdaptor()

 

            });

    }

</script>

 


If you are facing any issues, please share an issue reproducible sample which will be helpful for us to provide a better solution as early as possible.




FE Fernando October 3, 2023 09:09 PM UTC

Hello,

I applied exactly what you detailed. When clicking to open Child Grid, the following message appears in the console:



Image_6334_1696366921207

"Undefined"

Image_4731_1696366944051


When I check on the controller the same message also appears:



Image_9097_1696367050307

Here is the full code:



public IActionResult GridSubGerencial_Read([FromBody] DataManagerRequest dm, string Proposta_id)
        {
            TempData.Keep("datainicial");
            TempData.Keep("datafinal");

            IEnumerable DataSource = ObterDadosSubGerencial();

            DataOperations operation = new DataOperations();
            if (dm.Search != null && dm.Search.Count > 0)
            {
                DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
            }
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
            {
                DataSource = operation.PerformSorting(DataSource, dm.Sorted);
            }
            if (dm.Where != null && dm.Where.Count > 0) //Filtering
            {
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
            }
            int count = DataSource.Cast<MovimentacaoFinanceira>().Count();
            if (dm.Skip != 0)
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
        }


 public IActionResult GridGerencial_Read([FromBody] DataManagerRequest dm)

        {

            TempData.Keep("datainicial");

            TempData.Keep("datafinal");


            IEnumerable DataSource = ObterDadosGerencial();


            DataOperations operation = new DataOperations();

            if (dm.Search != null && dm.Search.Count > 0)

            {

                DataSource = operation.PerformSearching(DataSource, dm.Search); //Search

            }

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

            {

                DataSource = operation.PerformSorting(DataSource, dm.Sorted);

            }

            if (dm.Where != null && dm.Where.Count > 0) //Filtering

            {

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);

            }

            int count = DataSource.Cast<ViewRelatorioProposta>().Count();

            if (dm.Skip != 0)

            {

                DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging

            }

            if (dm.Take != 0)

            {

                DataSource = operation.PerformTake(DataSource, dm.Take);

            }

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);

        }


 public List<MovimentacaoFinanceira> ObterDadosSubGerencial()

        {

            List<MovimentacaoFinanceira> model = new List<MovimentacaoFinanceira>();


            var lista = (from a in _context.MovimentacaoFinanceira

                         select a).ToList();

            foreach (var c in lista)

            {

                model.Add(new MovimentacaoFinanceira

                {

                    Id = c.Id,

                    Proposta_id = c.Proposta_id,

                    Valor_final = c.Valor_final,

                    Propostastr = c.Propostastr

                });

            }

            return model;

        }


public List<ViewRelatorioProposta> ObterDadosGerencial()

        {

            DateTime? datainicio = Convert.ToDateTime("01/" + System.DateTime.Now.Month + "/" + System.DateTime.Now.Year);

            DateTime? datafim = Convert.ToDateTime("01/" + System.DateTime.Now.Month + "/" + System.DateTime.Now.Year).AddMonths(1).AddDays(-1);


            List<ViewRelatorioProposta> model = new List<ViewRelatorioProposta>();

            var lista = (from a in _context.ViewRelatorioProposta

                         where a.Data_criacao >= datainicio

                                         && a.Data_criacao <= datafim

                         select a).ToList();

            foreach (var c in lista)

            {

                              model.Add(new ViewRelatorioProposta

                {

                    Id = c.Id,

                    Nome = c.Nome,

                    Codigo = c.Codigo,

                    Proposta_id = c.Id

                });

            }

            return model;

        }


@{

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                QueryString = "Proposta_id",

                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {

                  new Syncfusion.EJ2.Grids.GridColumn(){ Field="Proposta_id", IsPrimaryKey=true, HeaderText="ID", Width="150" },

                  new Syncfusion.EJ2.Grids.GridColumn(){ Field="Valor_final", HeaderText="Valor", Width="150" },

             }};

}

<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">

    <e-data-manager url="@Url.Action("GridGerencial_Read","Relatorios")"

                    adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>

    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

    <e-grid-columns>

        <e-grid-column field="Proposta_id" headerText="ID" type="string" width="200"></e-grid-column>

        <e-grid-column field="Codigo" headerText="Proposta" type="string" width="200"></e-grid-column>

       </e-grid-columns>

</ejs-grid>


<script>

    function detailDataBound(args) {

        console.log(args.childGrid.parentDetails.parentKeyFieldValue);

        args.childGrid.dataSource = new ej.data.DataManager({

            url: "/Relatorios/GridSubGerencial_Read/" + args.childGrid.parentDetails.parentKeyFieldValue,

            adaptor: new ej.data.UrlAdaptor()

        });

    }

</script>


Thanks







PS Pavithra Subramaniyam Syncfusion Team October 4, 2023 12:08 PM UTC

Fernando,


We have tried to reproduce the issue but the “parentKeyFieldValue” can be accesses inside the “detailDataBound” event. Please refer to the below screenshot and the attached sample for more information.



If you are still facing the issue, please share an issue reproducible sample or try to reproduce the issue in the above sample which will be helpful for us to validate further.


Attachment: ChildGrid_a0d73c.zip


FE Fernando October 4, 2023 11:33 PM UTC

Hello,

This worked perfectly when I used the MainGrid datasource with the ViewBag like your sample. However, when I use it by e-data-manager it gives that error. What can it be?

Could you complement the example using the datasource by <e-data-manager> ?

Thank you very much.

<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">
    <e-data-manager url="@Url.Action("GridGerencial_Read","Relatorios")"
                    adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="PropostaId" headerText="ID" type="string" width="200"></e-grid-column>
        <e-grid-column field="Codigo" headerText="Proposta" type="string" width="200"></e-grid-column>      
    </e-grid-columns>
</ejs-grid>


public IActionResult GridGerencial_Read([FromBody] DataManagerRequest dm)
        {
            IEnumerable DataSource = ObterDadosGerencial();
            DataOperations operation = new DataOperations();
            if (dm.Search != null && dm.Search.Count > 0)
            {
                DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
            }
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
            {
                DataSource = operation.PerformSorting(DataSource, dm.Sorted);
            }
            if (dm.Where != null && dm.Where.Count > 0) //Filtering
            {
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
            }
            int count = DataSource.Cast<ViewRelatorioProposta>().Count();
            if (dm.Skip != 0)
            {
                DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
            }
            if (dm.Take != 0)
            {
                DataSource = operation.PerformTake(DataSource, dm.Take);
            }
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
        }


public List<ViewRelatorioProposta> ObterDadosGerencial()
        {
            DateTime? datainicio = Convert.ToDateTime("01/" + System.DateTime.Now.Month + "/" + System.DateTime.Now.Year);
            DateTime? datafim = Convert.ToDateTime("01/" + System.DateTime.Now.Month + "/" + System.DateTime.Now.Year).AddMonths(1).AddDays(-1);

            List<ViewRelatorioProposta> model = new List<ViewRelatorioProposta>();

            var lista = (from a in _context.ViewRelatorioProposta
                         where a.Data_criacao >= datainicio
                                         && a.Data_criacao <= datafim
                         select a).ToList();
            foreach (var c in lista)
            {
                model.Add(new ViewRelatorioProposta
                {
                    Id = c.Id,
                    Nome = c.Nome,
                    Codigo = c.Codigo,
                    PropostaId = c.Id
                });
            }

            return model;
        }


PS Pavithra Subramaniyam Syncfusion Team October 5, 2023 11:00 AM UTC

Fernando,


We have tried the main grid data binding with DataManager, but the parent key value is still accessible on our side. As we requested earlier, please share an issue reproducible sample since it seems that the issue occurs only in your sample.


<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt" allowfiltering="true" height="273" allowPaging="true" toolbar="@(new List<string>() { "Search"})">

 

  <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>

 

    .  .  .

 

</ejs-grid>

 

 

 

<script>

 

    function detailDataBound(args) {

 

        console.log(args.childGrid.parentDetails.parentKeyFieldValue);

        .  .  .

 

    }

 

</script>




FE Fernando October 9, 2023 12:10 PM UTC

Hello,

Attached is a project reproducing the error.

Thanks


Attachment: SampleGrid_29068bf6.zip


PS Pavithra Subramaniyam Syncfusion Team October 10, 2023 01:03 PM UTC

Fernando,


Thanks for sharing the sample.


By analyzing your sample, we could see that the issue was raised because of the SerializerSettings. While returning the response return from the server, the field name was not in the proper format. Please refer to the below screenshot for more information.




@{

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()

            {

                QueryString = "MoradorId",

                .  .  .

             }

          };

}



So, we suggest you add the below code to your program.cs file to overcome the problem. Refer to the below documentation for more information.


UG: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/data-binding#troubleshoot-grid-render-rows-without-data


If the ASP.NET CORE version is 3.X and above then add the below code in program.cs file


 

[program.cs]

 

using Newtonsoft.Json.Serialization;

 

var builder = WebApplication.CreateBuilder(args);

 

builder.Services.AddMvc().AddNewtonsoftJson(options =>

{

    options.SerializerSettings.ContractResolver = new DefaultContractResolver();

});

 


To use AddNewtonsoftJson in your project we need to include Microsoft.AspNetCore.Mvc.NewtonsoftJson assembly,




Marked as answer

FE Fernando October 10, 2023 02:28 PM UTC

It's worked perfectly. Thank you very much.


Loader.
Up arrow icon