Child grid not active on the first rendering of grid

[Basil Buwalda]

Initial rendering of the grid the child grid is inactive.....you click in the arrow and nothing happens.

To activate it you need to drag a grouping, for example, location and only then the arrows are available to drop down the child details.

See attachment with pictures.

Regards 

[Vignesh Sivagnanam]

Hi Basil, 

Greetings from Syncfusion support 

We are not able to clearly understand your requirement from the provided information. We suspect that you misunderstand the “Grouping” and the “child grid”.  

We need some additional details to validate the reported issue at our end. So kindly share the following details.  

1. Share the Grid sample with the reported issue.
2. Please share your issue scenario in video demonstration format.
3. Share the Hosted link for the sample.

Above requested details will be helpful for us to reproduce and analyze the reported issue at our end and provide solution as soon as possible.  

Please refer the documentation and demo for your reference. 

API DOC : https://ej2.syncfusion.com/aspnetcore/documentation/grid/grouping/#grouping 

https://ej2.syncfusion.com/aspnetcore/Grid/Grouping#/material 

https://ej2.syncfusion.com/aspnetcore/Grid/MasterDetailsExport#/material 

Please get back to us if you need further assistance. 

Regards, 

Vignesh Sivagnanam

[Basil Buwalda]

Hi Here is my initial document that did not upload

Attachment: Initial_rendering_of_the_grid_the_child_grid_is_inactive_e3bd6419.zip

[Basil Buwalda]

Hi Here is my video

Attachment: InActive_ChildGrid_2fdd9180.zip

[Basil Buwalda]

Here is my code sample

@using Syncfusion.EJ2

@using Syncfusion.EJ2.Grids

@using State3.Common

 

@{

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

    {

        DataSource = ViewBag.Technologies,

        QueryString = "Id",

        Columns = new List {

            new Syncfusion.EJ2.Grids.GridColumn(){ Field="SoftwareSolutionName", HeaderText="Technologies", Width="120" }

        }

    };

}

 

<div class="card border-light z-depth-0 my-3">

    <ejs-grid id="DataGrid"

              dataSource="ViewBag.DataSource"

              childGrid="ChildGrid"

              allowPaging="true"

              allowSorting="true"

              allowResizing="true"

              allowFiltering="true"

              allowGrouping="true"

              allowPdfExport="true"

              allowExcelExport="true"

              hierarchyPrintMode="All"

              toolbarClick="toolbarClick"

              toolbar="@(new List<string>() {"Search","PdfExport","ExcelExport","Print"})">

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

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

        <e-grid-pagesettings pageSize="15">e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" isIdentity="true" visible="false" allowEditing="false" showInColumnChooser="false">e-grid-column>

            <e-grid-column field="Name" headerText="Name" allowResizing="true">e-grid-column>

            <e-grid-column field="UserName" headerText="User Name" allowResizing="true">e-grid-column>

            <e-grid-column field="LocationId" foreignKeyField="Id" foreignKeyValue="Name" headerText="Location">

                <e-data-manager url="/OData/Locations"

                                adaptor="ODataV4Adaptor"

                                headers='@new Object[]{ new Dictionary<string, object>{ { "modelid", Model.Id} } }'>

                e-data-manager>

            e-grid-column>

            @if (ViewBag.Show != "NonAzure")

            {

                <e-grid-column field="AzureUserIdentifier" foreignKeyField="AzureUserIdentifier" foreignKeyValue="DisplayName" headerText="Azure User Identifier">

                    <e-data-manager url="/OData/AzureUsers"

                                    adaptor="ODataV4Adaptor"

                                    offline="true"

                                    headers='@new Object[]{ new Dictionary<string, object>{ { "organisationid", Model.OrganisationId} } }'>e-data-manager>

                e-grid-column>

            }

        e-grid-columns>

    ejs-grid>

div>

 

<script>

    var reportTitle = "@ViewBag.ReportTitle";

    var organisationHeading = "@ViewBag.OrganisationHeading";

    var reportFileName = "@ViewBag.ReportFileName";

    var colSpan = 4;

 

    function toolbarClick(args) {

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

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

            gridObj.pdfExport(getPdfExportProperties());

        }

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

            gridObj.excelExport(getExcelExportProperties());

        }

    }

 

    function getExcelExportProperties() {

        return {

            header: {

                headerRows: 2,

                rows: [

                    {

                        index: 1,

                        cells: [

 

                            { index: 1, colSpan: colSpan, value: organisationHeading, style: { fontColor: '#000000', fontSize: 25, hAlign: 'Center', bold: true } }

                        ]

                    },

                    {

                        index: 2,

                        cells: [

 

                            { index: 1, colSpan: colSpan, value: reportTitle, style: { fontColor: '#000000', fontSize: 25, hAlign: 'Center', bold: true } }

                        ]

                    }

                ]

            },

 

            footer: {

                footerRows: 2,

                rows: [

                    {

                        index: 1,

                        cells: [{ index: 1, colSpan: colSpan, value: organisationHeading, style: { fontColor: '#000000', hAlign: 'Center', bold: true } }]

                    },

                    {

                        index: 2,

                        cells: [{ index: 1, colSpan: colSpan, value: reportTitle, style: { fontColor: '#000000', hAlign: 'Center', bold: true } }]

                    }

                ]

            },

            hierarchyExportMode: "All",

            fileName: reportFileName + ".xlsx"

        };

    }

 

    function getPdfExportProperties() {

        return {

            header: {

                fromTop: 0,

                height: 120,

                contents: [

                    {

                        type: 'Text',

                        value: organisationHeading + ' - ' + reportTitle,

                        position: { x: 0, y: 0 },

                        style: { textBrushColor: '#000000', fontSize: 25 },

                    }

                ]

            },

            footer: {

                fromBottom: 160,

                height: 100,

                contents: [

                    {

                        type: 'Text',

                        value: organisationHeading + ' - ' + reportTitle,

                        position: { x: 0, y: 20 },

                        style: { textBrushColor: '#000000', fontSize: 14 }

                    }

                ]

            },

            hierarchyExportMode: "All",

            fileName: reportFileName + ".pdf"

        };

    }

script>

[Vignesh Sivagnanam]

Hi Basil, 

Thanks for the update. 

Based on your code example we have prepared an sample and in our sample the child grid get expanded at the initial rendering of the grid. So, we unable to reproduce the mentioned behavior at our end. 

Please refer the attached sample for your reference. 

Sample : https://www.syncfusion.com/downloads/support/forum/156411/ze/7.28.2020-951724937.zip 

If you are still facing the problem, then could you please share the below details. 

1. If possible reproduce the reported problem in the given sample. 

2. Share the Hosted link for the sample. 

Regards 

Vignesh Sivagnanam 

[Basil Buwalda]

Thanks for the sample, yes still cannot reproduce it but it might help if you show me how to code in expanding & collapse buttons on the sample.

Or just code in default to show the grid in a expand mode to shows the child data on default.

Maybe that will solve my problem or reveal something.

The sample you send me was on a treegrid and this is a normal ejgrid with a child grid.

Regards

[Vignesh Sivagnanam]

Hi Basil, 

Thanks for the update. 

In previous update we provided a sample in EJ2 Grid only and in last update we have created an sample based on your attached code example.  

In the attached sample we did not written any code for expand & collapse and we able to expand the parent grid by clicking on the expand icon.  

For your convenience we have attached the code and sample 

Code example: 

@using Syncfusion.EJ2 

@using Syncfusion.EJ2.Grids 

@{ 

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

    { 

        DataSource = ViewBag.foreign, 

        QueryString = "EmployeeID", 

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

new Syncfusion.EJ2.Grids.GridColumn(){ Field="EmployeeID", HeaderText="Number of Items", Width="150", CustomAttributes = new{@class="customcss"}  }, 

} 

    }; 

} 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

<div class="card border-light z-depth-0 my-3"> 

    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowGrouping="true" childGrid="ChildGrid" 

              allowSorting="true" 

              allowResizing="true" 

              allowFiltering="true" 

              allowPdfExport="true" 

              allowExcelExport="true" 

              hierarchyPrintMode="All" 

              toolbarClick="toolbarClick" 

              toolbar="@(new List<string>() {"Search","PdfExport","ExcelExport","Print"})"> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" type="number" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" width="120"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column> 

            <e-grid-column field="EmployeeID" headerText="Employee ID" 

                           foreignKeyValue="FirstName" foreignKeyField="EmployeeID" dataSource="ViewBag.foreign" 

                           type="string" validationRules="@(new { required= true })" width="120"> 

                <e-data-manager url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/' , 

                                crossdomain: true, 

                                adaptor: new ej.data.ODataV4Adaptor> 

                </e-data-manager> 

            </e-grid-column> 

            @if (ViewBag.Show != "NonAzure") 

            { 

                <e-grid-column field="AzureUserIdentifier" foreignKeyField="AzureUserIdentifier" foreignKeyValue="DisplayName" headerText="Azure User Identifier"> 

                    <e-data-manager url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/' , 

                                    crossdomain: true, 

                                    adaptor: new ej.data.ODataV4Adaptor> 

                    </e-data-manager> 

                </e-grid-column> 

            } 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

Sample : https://www.syncfusion.com/downloads/support/forum/156411/ze/7.28.2020-951724937.zip 

 

Video Demonstration : https://www.syncfusion.com/downloads/support/forum/156411/ze/Home_Page_-_EJ2Grid-719169284.zip 

 

If you still face the same issue, please get back to us with following details 

1. Have you done any external customization in Grid using external CSS. If yes, please share the code example 

2. Have you render the Grid inside dialog or any control? 

Please get back to us if you need further assistance. 

Regards, 

Vignesh Sivagnanam 

[Basil Buwalda]

Yes, I call this grid on a tab & when changing the active tab to be this grid the I am able to expand the parent grid by clicking on the expand icon. If not I either need to do a grouping as shown in my video or need to click on the search option to activate the icon otherwise it is disabled. I thought a workaround the rendering would be to have the grid in the same state as the print out that would show the grid in a hierarchyExportMode: "All" or hierarchyPrintMode="All" having buttons to expand and collapse all of them like the Jscript example you send. That will be a great workaround because obviously the icon enable is still stuck on false when I click to the tab that views the grid. 

[Basil Buwalda]

Here is another video 

Attachment: 20200730104014_92b9913d.zip

[Vignesh Sivagnanam]

Hi Basil, 

Thanks for your patience 

We have validated the reported problem and we are able to reproduce the reported at our end too. The mentioned issue is reproduced when the grid is not rendered properly  when the DOM Element is not active.  

 

So, we would like to suggest you to render the grid in the “Tab Select Events” and the grid is properly render when the DOM element is in active state. 

 

You can achieve your requirement through by below way. Please refer the given sample for your reference. 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/156411/ze/1564111709157989.zip 

Code Example : 

@{ 

    ViewData["Title"] = "Home Page"; 

} 

<div id="History" style="display: none"></div> 

<div id="InProgress"> 

    <p> 

        The Syncfusion ASP.NET Core UI controls library is the only suite that you will ever need to build an application since it contains over 70 high-performance, lightweight, modular, and responsive UI controls in a single package. 

    </p> 

</div> 

<div> 

    <ejs-tab id="adminTabs" selected="tabSelected"> 

        <e-tab-tabitems> 

            <e-tab-tabitem content="#InProgress"> 

                <e-tabitem-header text="In Progress" /> 

            </e-tab-tabitem> 

            <e-tab-tabitem content="#History"> 

                <e-tabitem-header text="History" /> 

            </e-tab-tabitem> 

        </e-tab-tabitems> 

    </ejs-tab> 

</div> 

<script> 

    var flag = true; 

    var data = @Html.Raw(Json.Serialize(ViewBag.DataSource)); 

    function tabSelected(args) { 

        var grid = new ej.grids.Grid({ 

            dataSource: data, 

            height: 400, 

            childGrid: ChildGrid, 

            load: load, 

            enableVirtualization: true, 

            columns: [ 

                { 

                    field: "OrderID", 

                    headerText: "OrderID", 

                    isPrimaryKey: true, 

                }, 

                { 

                    field: "CustomerID", 

                    headerText: "CustomerID", 

                }, 

                { 

                    field: "Freight" 

                }, 

                { 

                    field: "ShipCountry" 

                } 

            ] 

        }); 

        grid.appendTo(args.selectedContent.querySelector("#History")); 

    } 

    function load(args) { 

        this.childGrid = { 

            dataSource: new ej.data.DataManager({ 

                url: "http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Orders/", 

                adaptor: new ej.data.ODataAdaptor(), 

                crossDomain: true 

            }), 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            pageSettings: { pageSize: 5 }, 

            columns: [ 

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

            ], 

        }; 

    }  

</script> 

 

API Doc : https://ej2.syncfusion.com/documentation/api/tab/#selected 

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

Please get back to us, if you need any further assistance. 

Regards, 

Vignesh Sivagnanam 

[Basil Buwalda]

Fantastic, I will give it a shot. Thanks

[Vignesh Sivagnanam]

Hi Basil, 

  

Thanks for the update. 

  

We are happy to hear that your issue has been resolved. 

  

Please get back to us if you need further assistance. 

  

Regards, 

Vignesh Sivagnanam