how to remove the lines which are inside of the grid toolbar

[Luis Carlos]

Good evening.

How can I remove the lines which are inside of theses red circles?

I will be awaiting for your reply, thank you.

Regards, Luis Carlos.

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Thanks for contacting Syncfusion Support.  

 

Using the cssClass property Grid, set the class to the Grid’s root element and define the required properties using the styles to hide the borders of the toolbar as follows.  

 

<div id="Grid"></div> 

 

<script type="text/javascript"> 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: window.gridData, 

            allowPaging: true, 

            cssClass: "custom", 

               . . . 

                     .. . 

        }); 

    }); 

 

</script> 

<style> 

    .e-grid.custom .e-toolbar { 

        border: white; 

        background: none; 

    } 

    .e-grid.custom .e-toolbar.e-toolbarspan { 

        box-shadow: none; 

    } 

    .e-grid.custom { 

        border: none; 

    } 

    .e-grid.custom > div:not(.e-gridtoolbar) { 

        height: auto; 

        border-color: #cecece; 

        border-width: 1px; 

        border-style: solid solid solid solid; 

    } 

</style> 

 

 

Sample demo: https://jsplayground.syncfusion.com/2rhgulcx 

 

Refer to the following API Reference.  

 

https://help.syncfusion.com/api/js/ejgrid#members:cssclass 

 

Regards,  

Seeni Sakthi Kumar S. 

[Luis Carlos]

Good morning.

As you can see inside of red circle of the below image, those vertical lines are not aligned. Could you modify it in order to fix this little problem?

I will be awaiting for your reply, thank you again.

Regards, Luis Carlos.

[Seeni Sakthi Kumar Seeni Raj]

Hi Luis,  

 

Along with the other suggested CSS styles, add the following CSS for Pager overflow.  

 

<div id="Grid"></div> 

<script type="text/javascript"> 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: window.gridData, 

            allowPaging: true, 

            cssClass: "custom", 

            . . . 

                 . . . 

        }); 

    }); 

 

</script> 

<style> 

    .e-grid.custom .e-pager { 

        width: calc(100% - 2px); 

    } 

</style> 

 

Sample: https://jsplayground.syncfusion.com/sqkvov5x 

 

Regards,  

Seeni Sakthi Kumar S.