We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

2 or more child grids

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
loading
Tags: DataGrid
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" });
}

<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');
    }
</script>

<script id="templateDetallePoliza" type="text/x-template">
    <input type="button" value="Detalle" onclick="detallePoliza(${PolizaID})" class="e-btn" />
</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?

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 

<div class="container"> 
    <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 type="text/x-template" id="detailtemplate1"> 
    <div class="detailgridone"></div> 
    <div class="detailgridtwo"></div> 
    <div class="detailgridthree"></div> 
 
</script> 
 
 
<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); 
 
        } 


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


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" });
}

<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>







Javier A Aguilera
Replied On August 6, 2019 07:12 PM UTC

OK. I think i get it.


<script type="text/x-template" id="detailtemplate1">
    <div id="childGrids">
        <div class="e-tab-header">
            <div>Pagos Programados </div>
            <div>Siniestros </div>
        </div>
        <div class="e-content">
            <div>
                <div class="detallePagos"></div>
            </div>
            <div>
                <div class="detalleSiniestros"></div>
            </div>         
        </div>
    </div>
</script>

Whit that, the tabs are working fine

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon