2 or more child grids

Javier A Aguilera

Asked On August 5, 2019 11:02 PM UTC

I have 1 grid with one child grid, like this:

@{

var dataManagerPagos = new Syncfusion.EJ2.DataManager()

{

Adaptor = "UrlAdaptor",

Url = "/Sistema/PagosPolizas/PagosPolizasGrid_Read/ ",

RequestType = "Post",

CrossDomain = true

};

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

{

DataSource = dataManagerPagos,

QueryString = "PolizaID",

Locale = "es-MX",

PageSettings = { PageSize = 50 },

SortSettings = { Columns = "cols2" },

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

{

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "PagosPolizasID", IsPrimaryKey = true, Visible = false, IsIdentity = true },

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "PolizaID", Visible = false },

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "PagoNumero", HeaderText = "Núm Pago" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "MontoPago", Format = "c2", HeaderText = "Monto Pago"},

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "InicioRecibo", CustomFormat = new { type = "date", format = "dd/MM/yyyy"}, HeaderText = "Inicio Recibo" },

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "FinRecibo", CustomFormat = new { type = "date", format = "dd/MM/yyyy"}, HeaderText = "Fin Recibo"},

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "FechaPago", CustomFormat = new { type = "date", format = "dd/MM/yyyy"}, HeaderText = "Fecha Pago"},

new Syncfusion.EJ2.Grids.GridColumn(){ Field = "Pagado", HeaderText = "Pagado", Template = " ${if(Pagado)} <i class='far fa-smile-beam'></i> ${else} <i class='far fa-sad-tear'></i> ${/if}"},

new Syncfusion.EJ2.Grids.GridColumn(){Template = "<input type='button' value='Detalle' onclick='detallePagos(${PagosPolizasID})' class='e-btn' />"}

}

};

}

@{

List<object> cols = new List<object>();

cols.Add(new { field = "PolizaID", direction = "Descending" });

}

@{

List<object> cols2 = new List<object>();

cols.Add(new { field = "PolizaID", direction = "Descending" });

}

function toolbarClickPolizas(args) {

var gridObj = document.getElementById("PolizasClienteGrid").ej2_instances[0];

if (args.item.id === 'PolizasClienteGrid_excelexport') {

gridObj.excelExport();

}

function detallePoliza(data) {

window.open('/Sistema/Polizas/DetallePoliza/' + data, '_blank');

}

function detallePagos(data) {

window.open('/Sistema/PagosPolizas/DetallePago/' + data, '_blank');

}

</script>

</script>

<h3>Pólizas del Cliente</h3>

<a rel='nofollow' href="/Sistema/Polizas/AgregarPoliza/@Model" target="_blank" class="e-btn">Agregar Póliza</a>

<ejs-grid id="PolizasClienteGrid" locale="es-MX" childGrid="@ChildGrid1" allowPaging="true" allowSorting="true" allowMultiSorting="true" allowGrouping="true" allowFiltering="true" allowExcelExport="true" toolbarClick="toolbarClickPolizas" toolbar="@(new List<string>() { "Search", "ExcelExport"})">

<e-grid-pagesettings pageSizes="true" pageSize="50">

</e-grid-pagesettings>

<e-grid-sortsettings columns="cols"></e-grid-sortsettings>

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

<e-data-manager id="dataManager" adaptor="UrlAdaptor" url="/Sistema/Polizas/PolizasClienteGrid_Read/?id=@Model" requestType="Post"></e-data-manager>

<e-grid-editSettings allowDeleting="false" allowEditing="false" allowAdding="false" mode="Normal" showDeleteConfirmDialog="false"></e-grid-editSettings>

<e-grid-columns>

<e-grid-column field="PolizaID" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

<e-grid-column field="NumeroPoliza" headerText="Núm Póliza" visible="true"></e-grid-column>

<e-grid-column field="nombreAseguradora" headerText="Compañía" visible="true"></e-grid-column>

<e-grid-column field="nombreRamo" headerText="Ramo" visible="true"></e-grid-column>

<e-grid-column field="descripcion" headerText="Frecuencia Pago" visible="true"></e-grid-column>

<e-grid-column field="FinVigencia" headerText="Fin Vigencia" customFormat="@(new { type ="date", format="dd/MM/yyyy" })" type="date" visible="true"></e-grid-column>

<e-grid-column headerText="" template="#templateDetallePoliza" allowFiltering="false"></e-grid-column>

</e-grid-columns>

</ejs-grid>

<ejs-scripts></ejs-scripts>

I need another 2 child grids at the same level than the existing one

Main grid

child grid 1 child grid 2 child grid 3

can you help me with this?

Reply | Reply with quote

Manivel Sellamuthu [Syncfusion]

Replied On August 6, 2019 10:45 AM UTC

Hi Javier,

Thanks for contacting us.

Yes. We have validated your requirement. You can achieve your requirement by using detailTemplate property of the Grid, which allows any template can render on the child element of EJ2 Grid Row.

Using that feature we have created three div elements and render the three Grids in detailDataBound event of the Grid, which triggers on every row initial expand. The queryString property doesn’t support the detailTemplate feature. So we can achieve your requirement by using the query property and the load event of the details grid.

Please find the below code snippet, sample and documentation link for your reference.

Index.cshtml

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowFiltering="true" detailDataBound="detailDataBound" detailTemplate="#detailtemplate1">

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

. . .

</ejs-grid>

</div>

</script>

function detailDataBound(e) {

var data = new ej.data.DataManager({

url: "/Home/childUrlDataSource",

adaptor: new ej.data.UrlAdaptor,

crossDomain: true

});

var firstdetailgrid = new ej.grids.Grid({

dataSource: data,

load: function (args) {

this.query = new ej.data.Query().addParams("EmployeeID", e.data.EmployeeID) // Pass the parent grid row data to server end

},

columns: [

{ field: 'OrderID', headerText: 'Order ID', width: 110 },

{ field: 'EmployeeID', headerText: 'Employee ID', width: 110 }

]

});

firstdetailgrid.appendTo(e.detailElement.querySelector('.detailgridone'));

var seconddetailGrid = new ej.grids.Grid({

dataSource: data,

load: function (args) {

this.query = new ej.data.Query().addParams("EmployeeID", e.data.EmployeeID)

},

columns: [

{ field: 'OrderID', headerText: 'Order ID', width: 110 },

{ field: 'EmployeeID', headerText: 'Employee ID', width: 110 }

]

});

seconddetailGrid.appendTo(e.detailElement.querySelector('.detailgridtwo'));

var thirdgrid = new ej.grids.Grid({

dataSource: data,

load: function (args) {

this.query = new ej.data.Query().addParams("EmployeeID", e.data.EmployeeID)

},

columns: [

{ field: 'OrderID', headerText: 'Order ID', width: 110 },

{ field: 'EmployeeID', headerText: 'Employee ID', width: 110 }

]

});

thirdgrid.appendTo(e.detailElement.querySelector('.detailgridthree'));

}

</script>

[HomeController.cs]

public IActionResult childUrlDataSource([FromBody]extendDM dm) {

List<OrdersDetails> DataDetails = new List<OrdersDetails>();

var ord = dm.@params["EmployeeID"]; //get the parent grid data in server side while pass this data through addParams

OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.EmployeeID == ord).FirstOrDefault();

DataDetails.Add(val);

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

}

Sample: https://www.syncfusion.com/downloads/support/forum/146482/ze/2_or_more_child_grids-146482-459317830

Documentation: https://ej2.syncfusion.com/documentation/api/grid/#detailtemplate

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

Regards,

Manivel

Reply | Reply with quote

Javier A Aguilera

Replied On August 6, 2019 06:59 PM UTC

It is possible to show the child grids in tabs? I tried to achieve this, but both child grids are visible in all tabs. This is the code i´m using

@model int

@{

List<object> cols = new List<object>();

cols.Add(new { field = "PolizaID", direction = "Descending" });

}

function toolbarClickPolizas(args) {

var gridObj = document.getElementById("PolizasClienteGrid").ej2_instances[0];

if (args.item.id === 'PolizasClienteGrid_excelexport') {

gridObj.excelExport();

}

function detallePoliza(data) {

window.open('/Sistema/Polizas/DetallePoliza/' + data, '_blank');

}

function detallePagos(data) {

window.open('/Sistema/PagosPolizas/DetallePago/' + data, '_blank');

}

function detalleSiniestro(data) {

indow.open('/Sistema/Siniestros/_DetalleSiniestro/' + data, '_blank');

}

</script>

</script>

<div>Pagos Programados </div>

<div>Siniestros </div>

</div>

</div>

</script>

function detailDataBound(e) {

var dataPagos = new ej.data.DataManager({

url: "/Sistema/PagosPolizas/PagosPolizasGrid_Read/",

adaptor: new ej.data.UrlAdaptor,

crossDomain: true

});

var dataSiniestros = new ej.data.DataManager({

url: "/Sistema/Siniestros/SiniestrosPolizasGrid_Read/",

adaptor: new ej.data.UrlAdaptor,

crossDomain: true

});

var PagosGrid = new ej.grids.Grid({

dataSource: dataPagos,

load: function (args) {

this.query = new ej.data.Query().addParams("PolizaID", e.data.PolizaID) // Pass the parent grid row data to server end

},

columns: [

{ field: 'PagosPolizasID', headerText: 'Order ID', visible: false },

{ field: 'PolizaID', visible: false },

{ field: 'PagoNumero', headerText: 'Núm Pago' },

{ field: 'MontoPago', headerText: 'Monto Pago', format: 'C2' },

{ field: 'InicioRecibo', headerText: 'Inicio Recibo', format: { type: 'date', format: 'dd/MM/yyyy' } },

{ field: 'FinRecibo', headerText: 'Fin Recibo', format: { type: 'date', format: 'dd/MM/yyyy' } },

{ field: 'FechaPago', headerText: 'Fecha Pago', format: { type: 'date', format: 'dd/MM/yyyy' } },

{ field: 'Pagado', headerText: 'Pagado', template: "${if(Pagado)} <i class='far fa-smile-beam'></i> ${else} <i class='far fa-sad-tear'></i> ${/if}" },

{ template: "<input type='button' value='Detalle' onclick='detallePagos(${PagosPolizasID})' class='e-btn' />" }

]

});

PagosGrid.appendTo(e.detailElement.querySelector('.detallePagos'));

var SiniestrosGrid = new ej.grids.Grid({

dataSource: dataSiniestros,

load: function (args) {

this.query = new ej.data.Query().addParams("PolizaID", e.data.PolizaID) // Pass the parent grid row data to server end

},

columns: [

{ field: 'SiniestroID', headerText: 'Order ID', visible: false },

{ field: 'PolizaID', visible: false },

{ field: 'TipoSiniestroID', headerText: 'Tipo Siniestro' },

{ field: 'FechaSiniestro', headerText: 'Fecha Siniestro', format: { type: 'date', format: 'dd/MM/yyyy' } },

{ field: 'NumeroSiniestro', headerText: 'Núm siniestro' },

{ field: 'DescripcionSiniestro', headerText: 'Descripción Siniestro' },

{ template: "<input type='button' value='Detalle' onclick='detalleSiniestro(${SiniestroID})' class='e-btn' />" }

]

});

SiniestrosGrid.appendTo(e.detailElement.querySelector('.detalleSiniestros'));

var tabObj = new ej.navigations.Tab({

heightAdjustMode: ""

});

tabObj.appendTo('#ej2Tab2');

}

</script>

<h3>Pólizas del Cliente</h3>

<a rel='nofollow' href="/Sistema/Polizas/AgregarPoliza/@Model" target="_blank" class="e-btn">Agregar Póliza</a>

<ejs-grid id="PolizasClienteGrid" locale="es-MX" detailDataBound="detailDataBound" detailTemplate="#detailtemplate1" allowPaging="true" allowSorting="true" allowMultiSorting="true" allowGrouping="true" allowFiltering="true" allowExcelExport="true" toolbarClick="toolbarClickPolizas" toolbar="@(new List<string>() { "Search", "ExcelExport"})">

<e-grid-pagesettings pageSizes="true" pageSize="50">

</e-grid-pagesettings>

<e-grid-sortsettings columns="cols"></e-grid-sortsettings>

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

<e-data-manager id="dataManager" adaptor="UrlAdaptor" url="/Sistema/Polizas/PolizasClienteGrid_Read/?id=@Model" requestType="Post"></e-data-manager>

<e-grid-editSettings allowDeleting="false" allowEditing="false" allowAdding="false" mode="Normal" showDeleteConfirmDialog="false"></e-grid-editSettings>

<e-grid-columns>

<e-grid-column field="PolizaID" isPrimaryKey="true" isIdentity="true" visible="false"></e-grid-column>

<e-grid-column field="NumeroPoliza" headerText="Núm Póliza" visible="true"></e-grid-column>

<e-grid-column field="nombreAseguradora" headerText="Compañía" visible="true"></e-grid-column>

<e-grid-column field="nombreRamo" headerText="Ramo" visible="true"></e-grid-column>

<e-grid-column field="descripcion" headerText="Frecuencia Pago" visible="true"></e-grid-column>

<e-grid-column field="FinVigencia" headerText="Fin Vigencia" customFormat="@(new { type ="date", format="dd/MM/yyyy" })" type="date" visible="true"></e-grid-column>

<e-grid-column headerText="" template="#templateDetallePoliza" allowFiltering="false"></e-grid-column>

</e-grid-columns>

</ejs-grid>

<ejs-scripts></ejs-scripts>

Reply | Reply with quote

Javier A Aguilera

Replied On August 6, 2019 07:12 PM UTC

OK. I think i get it.

<div>Pagos Programados </div>

<div>Siniestros </div>

</div>

<div>

</div>

<div>

</div>

</script>

Whit that, the tabs are working fine

Reply | Reply with quote

Manivel Sellamuthu [Syncfusion]

Replied On August 7, 2019 07:30 AM UTC

Hi Javier,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Please get back to us if you need any further assistance on this. As always we are happy to Assist you.

Regards,

Manivel

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146482	Aug 5,2019 11:02 PM UTC	Aug 7,2019 07:30 AM UTC	ASP.NET Core - EJ 2	4

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US