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. Image for the cookie policy date
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Scrolling Issue

Scrolling Issue

Unable to scroll till the end button in child grid
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');

3 Replies
PS Pavithra Subramaniyam Syncfusion Team November 19, 2019 10:55 AM UTC

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'); 
 
 
                              https://ej2.syncfusion.com/javascript/documentation/api/grid/#getcolumns 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


PU Premith Unnikrishnan November 19, 2019 10:05 PM UTC

Thanks for the solution that works perfectly.

PS Pavithra Subramaniyam Syncfusion Team November 20, 2019 05:56 AM UTC

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. 


Loader.
Up arrow icon