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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scrolling Issue

Thread ID:

Created:

Updated:

Platform:

Replies:

149217 Nov 18,2019 05:32 AM UTC Nov 20,2019 05:56 AM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Premith Unnikrishnan
Asked On November 18, 2019 05:32 AM UTC

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');

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Premith Unnikrishnan
Replied On November 19, 2019 10:05 PM UTC

Thanks for the solution that works perfectly.

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


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