grid Paging buttons style

[Daniel]

Hi, I am trying to figure if it is possible to change the style of the paging buttons.

I using the Boostrap theme and it looks like that :

and I want to make it like this:

it is possible? which changes do I need to do on CSS?

[Konstantin Dikov]

Hello Daniel,

For such customization it is our recommendation to inspect the rendered DOM elements and use the added class names as selectors. Nevertheless, here is a CSS for changing the styles close to your requirement:

            <style>
            .k-pager-numbers .k-link, .k-pager-numbers .k-link:link {
                color: #333;
                background: none;
                border: none;

            } 
            .k-pager-numbers .k-link:focus{
                box-shadow: none;
            }

            .k-pager-numbers .k-link.k-state-selected{
                color: #30ace6;
                font-weight: bold;
            }

And here is a link to the example:

• https://stackblitz.com/edit/react-fpxnxu?file=index.html

 

Regards,
Konstantin Dikov
Progress Telerik

[Daniel]

Greate Thanks.

can I ask for more 2 questions please:

1. is it possible to center only the numbers and the arrows?

2. I also struggle with the style of the GridColumnMenuFilter  in order to achieve this appearance:

 

 

[Konstantin Dikov]

For centering the pager, you can try and set padding-left to the container:

            .k-pager-wrap.k-pager.k-widget.k-grid-pager {
                padding-left: 150px;                
            }

 

The ColumnMenu renders standard buttons and DropDownList, so you can inspect them outside of the Grid to see what class names are rendered in the elements. Then, you can use those class names as selectors to customize them with CSS. For example, the following selectors can be used for customizing the buttons:

            .kendo-grid-filter-menu-container .k-button{
                color: red;
            }

            .kendo-grid-filter-menu-container .k-button.k-primary{
                color: red;
            }

The color is added just as an example.

The same principal (inspecting the elements) can be applied to every component that you want to customize (including the DropDownList)

[Daniel]

The problem is that when I click on inspect the filter popup closes and is deleted from the DOM, how can I fix it?

[Konstantin Dikov]

With the latest version you can try the following approach for temporarily disable the closing of the columnMenu, so you can inspect the elements:

• https://stackblitz.com/edit/react-zebxmu-kk7ixr?file=app/main.jsx