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" });
}
<script>
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 id="templateDetallePoliza" type="text/x-template">
<input type="button" value="Detalle" onclick="detallePoliza(${PolizaID})" class="e-btn" />
</script>
<script type="text/x-template" id="detailtemplate1">
<div id="ej2Tab2">
<div class="e-tab-header">
<div>Pagos Programados </div>
<div>Siniestros </div>
</div>
<div class="e-content">
<div class="detallePagos"></div>
<div class="detalleSiniestros"></div>
</div>
</div>
</script>
<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>
