Scrolling Issue

[Premith Unnikrishnan]

Unable to scroll till the end button in child grid

I have modified the stackblitz example here https://ej2.syncfusion.com/javascript/demos/#/material/grid/hierarchy.html

to reproduce the issue

The buttons in the second child grid are hidden when scroll bars are enabled.

ej.base.enableRipple(true);

    var dataManger = new ej.data.DataManager({

        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders',

        adaptor: new ej.data.ODataAdaptor(),

        crossDomain: true

    });

    var dataManger2 = new ej.data.DataManager({

        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',

        adaptor: new ej.data.ODataAdaptor(),

        crossDomain: true

    });

    var grid = new ej.grids.Grid({

        dataSource: window.employeeData,

        allowSorting: true,

        columns: [

            { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },

            { field: 'FirstName', headerText: 'Name', width: 125 },

            { field: 'Title', headerText: 'Title', width: 180 },

            { field: 'City', headerText: 'City', width: 110 },

            { field: 'Country', headerText: 'Country', width: 110 }

        ],

        childGrid: {

            dataSource: dataManger,

            queryString: 'EmployeeID',

            allowPaging: true,

            columns: [

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

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

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

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

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

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

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

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

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

                { field: 'ShipCity', headerText: 'Ship City', width: 120 },

                { field: 'Freight', headerText: 'Freight', width: 120 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                { field: 'ShipName', headerText: 'Ship Name', width: 150 },

                

                {

                        headerText: 'Commands',

                        width: 120,

                        commands: [{

                            buttonOption: {

                                content: 'Execute',

                                cssClass: 'e-success',

                       

                            }

                        }, {buttonOption: {content: 'Delete', cssClass: 'e-danger'}},

                           {buttonOption: {content: 'Test Plan', cssClass: 'e-info'}}

                        ]

                    }

            ],

            childGrid: {

                dataSource: dataManger2,

                queryString: 'CustomerID',

                columns: [

                    { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 },

                    { field: 'Phone', headerText: 'Phone', width: 100 },

                    { field: 'Address', headerText: 'Address', width: 120 },

                    { field: 'Country', headerText: 'Country', width: 100 }

                ],

            },

        },

    });

    grid.appendTo('#Grid');

[Pavithra Subramaniyam]

Hi Premith, 

 

Thanks for contacting Syncfusion support. 

 

In your sample you have set the command column width as 120 but the total with of three buttons will be more than 120. Hence the overflowing elements are hidden which is the default behavior. So we suggested you to set width based on the buttons with. You can set the width for this column dynamically by using the “dataBound” event of Child Grid. Please refer to the below code example and sample link for more information. 

 

[index.js] 

    var grid = new ej.grids.Grid({ 

        .  .  . 

        childGrid: { 

            dataSource: dataManger, 

            queryString: 'EmployeeID', 

            dataBound: function(e){ 

              if(inital){ 

                 this.getColumns().filter((e)=>{return e.headerText == "Commands"})[0].width= this.getContentTable().querySelector(".e-unboundcell").scrollWidth; 

                this.widthService.setWidthToColumns(); 

                console.log("initial"); 

                inital =false; 

              } 

        }, 

            columns: [ 

                .   .   .                 

                { 

                        headerText: 'Commands', 

                        width: 120, 

                        commands: [{ 

                            buttonOption: { 

                                content: 'Execute', 

                                cssClass: 'e-success', 

                        

                            } 

                        }, {buttonOption: {content: 'Delete', cssClass: 'e-danger'}}, 

                           {buttonOption: {content: 'Test Plan', cssClass: 'e-info'}} 

 

                        ] 

                    } 

            ] 

    }); 

    grid.appendTo('#Grid'); 

 

 

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

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

 

Sample               : https://stackblitz.com/edit/commandcolumn-width?file=index.js 

 

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

 

Regards, 

Pavithra S. 

[Premith Unnikrishnan]

Thanks for the solution that works perfectly.

[Pavithra Subramaniyam]

Hi Premith,  

Thanks for your update. 

We are glad to hear that the provided solution worked. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.