Change Pager color when using Pageable with Kendo Grid

3 posts, 0 answers
  1. Anna
    Anna avatar
    2 posts
    Member since:
    Feb 2020

    Posted 16 Jun 2020 Link to this post

    @(Html.Kendo().Grid<ViewModel>(Model)<br>               
        .Name("UserGrid")<br>               
        .Columns(columns =><br>               
        {
             columns.Bound(p => p.Name);
             columns.Bound(p => p.Status);
        columns.Bound(p => p.Id);<br>                })<br>                .Pageable(pager => pager.PageSizes(new[] { 10, 20, 50, 100 }))<br>                .Sortable(sortable => sortable<br>                    .AllowUnsort(true)<br>                    .SortMode(GridSortMode.MultipleColumn)<br>                    .ShowIndexes(true))<br>                .Filterable()<br>                )
  2.
  3. Anna
    Anna avatar
    2 posts
    Member since:
    Feb 2020

    Posted 16 Jun 2020 in reply to Anna Link to this post

    Sorry for the format this is my first post here.
    I am having troubles with changing the color of the pager -> The pagenumber when paging is used. Is there a way to easily change its color? I could not find a solution for my problem. The default color is blue which does not at all fit the to the rest of the page.
    I don't think my code is relevant but beneath is basically my code.
     
    @(Html.Kendo().Grid<ViewModel>(Model)
     .Name("UserGrid")
     .Columns(columns =>
      {
        columns.Bound(p => p.Name);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.Id);
       })
      .Pageable(pager => pager.PageSizes(new[] { 10, 20, 50, 100 }))
      .Sortable(sortable => sortable
        .AllowUnsort(true)
        .SortMode(GridSortMode.MultipleColumn)
        .ShowIndexes(true)) 
      .Filterable()
    )

     

    Thanks in advance,

    Anna

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2152 posts

    Posted 18 Jun 2020 Link to this post

    Hi Anna,

    You can do that with CSS. Here's a CSS rule that shows how to change selected page number background-color, border-color and color:

    <style>
	.k-pager-numbers .k-link.k-state-selected {
		border-color: lightgreen;
		color: #fff;
		background-color: lightgreen;
	}
</style>

    The result is the following: screenshot.

    Give this a try after replacing the colors with the ones you want and let us know whether it works as expected.

    Regards,
    Ivan Danchev
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top