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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid pager control css

Thread ID:

Created:

Updated:

Platform:

Replies:

143361 Mar 15,2019 04:31 PM UTC Jul 11,2019 10:16 AM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Travis
Asked On March 15, 2019 04:31 PM UTC

I would like to be able to change a grid's pager control; background color, highlight color of selected page, buttons used to navigate, etc.  I did find some grid control css at this link (), but it does not address the pager.



Pavithra Subramaniyam [Syncfusion]
Replied On March 18, 2019 04:32 AM UTC

Hi Travis, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by adding custom CSS for pager element. Please refer to the below code example, documentation link and sample link for more information. 
 
[style.css] 
<style> 
            // pager back ground 
            .e-grid .e-pager,.e-grid .e-pager .e-pagercontainer,.e-grid .e-pager .e-pagercontainer *{ 
              background-color:lightblue; 
            } 
           // current selected page item 
            .e-grid .e-pager .e-currentitem, .e-pager .e-currentitem:hover{ 
               background-color:blue; 
            } 
        </style> 
 
 
Sample               : https://stackblitz.com/edit/mpc8wb?file=index.js  
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


amine lassouani
Replied On July 10, 2019 02:39 PM UTC

Hi Travis, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve your requirement by adding custom CSS for pager element. Please refer to the below code example, documentation link and sample link for more information. 
 
[style.css] 
<style> 
            // pager back ground 
            .e-grid .e-pager,.e-grid .e-pager .e-pagercontainer,.e-grid .e-pager .e-pagercontainer *{ 
              background-color:lightblue; 
            } 
           // current selected page item 
            .e-grid .e-pager .e-currentitem, .e-pager .e-currentitem:hover{ 
               background-color:blue; 
            } 
        </style> 
 
 
Sample               : https://stackblitz.com/edit/mpc8wb?file=index.js  
 
Please get back to us for further assistance. 
 
Regards, 
Pavithra S. 


I have the same problem as Travis. 
I just tested the code above. It did not work.
I would like to change the button color.
I use the code below:

<ejs-grid
[dataSource]='data' [allowPaging]="true" [allowSorting]="true" [pageSettings]="pageSettings">
<e-columns>
<e-column></e-column>
</e-columns>
</ejs-grid>

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 11, 2019 10:16 AM UTC

Hi Amine,  

We are unable to reproduce the problem at our end. We have prepared a sample that can be referred from the following link.  


 

If you are facing a problem, please share the complete code example of the Grid along with the typescript definition file for the component file. If any of the CSS used for the customization in the Grid, please send them along.  

Regards,  
Seeni Sakthi Kumar 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

;