This is a migrated thread and some comments may be shown as answers.

Hide Pager Summary

2 Answers 369 Views
Pager
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 29 Oct 2020, 05:47 PM
     Is there a way to hide the counter on the pager? I don't need to see  1-3 of 75 items   especially in mobile view. Takes up more space than necessary.

2 Answers, 1 is accepted

Sort by
0
Accepted
Svetoslav Dimitrov
Telerik team
answered on 29 Oct 2020, 09:15 PM

Hello Matt,

You could use CSS to apply a display: none rule to the span that contains the information. Below, you could see an example of how I achieved it. A short summary of what I did was to add a custom CSS class to the Grid using its Class parameter to apply the CSS rules only to that instance of the Grid. After that, I created a suitable selector and applied the necessary rule.

    <style>
        .myGridClass .k-pager-info.k-label {
            display: none;
        }
    </style>

    <TelerikGrid Data="@MyData" Height="400px"
                 Pageable="true" Sortable="true" Groupable="true"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                 Resizable="true" Reorderable="true"
                 Class="myGridClass">
        <GridColumns>
            <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
            <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
            <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
            <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
        </GridColumns>
    </TelerikGrid>

    @code {
        public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        });

        public class SampleData
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Team { get; set; }
            public DateTime HireDate { get; set; }
        }
    }

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Matt
Top achievements
Rank 1
answered on 30 Oct 2020, 01:47 PM
Perfect!!! Thank you Svetoslav.
Tags
Pager
Asked by
Matt
Top achievements
Rank 1
Answers by
Svetoslav Dimitrov
Telerik team
Matt
Top achievements
Rank 1
Share this question
or