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

Changing Count Display

4 Answers 332 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Jan 2016, 07:33 PM

I've used the AJAX tools in the past, but I'm new to the Kendo controls.

I have a ListView with a list of employees. At the bottom of the view I see my page count and the record counts. Currently it says, "1 - 15 of 292 items" but I'd like to change it. How can I format this to something different?

4 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 12 Jan 2016, 07:37 PM

Here is my current code:

 

@(Html.Kendo().ListView<EmployeeListViewModel>()
 .Name("listview")
 .HtmlAttributes(new { @class = "ra-well-overlay row" })
 .ClientTemplateId("listview-template")
 .TagName("div")
 .DataSource(source =>
 {
 source.Read(read => read.Action("GetEmployeesList", "EmployeeDirectory"));
 source.PageSize(15);
 })
 .Navigatable()
 .Pageable()
)

0
Milena
Telerik team
answered on 13 Jan 2016, 01:15 PM
Hello,

You can change the messages through the Messages builder.

The list of messages configuration options are available here:
http://docs.kendoui.com/api/web/grid#configuration-pageable.messages

Regards,
Milena
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 14 Jan 2016, 04:11 PM

OK, how can I apply that to our current code?

 

<script id="listview-template" type="x-kendo-template">
    <div class="col-xs-4 ZeroPad">
        <div class=#: StatusDiv #>
            <a href="/EmployeeDirectory/Details/#= Id #">
                <div class="TableRow">
                    <div class="TableColumn col-md-2 col-sm-1 hidden-xs">
                        <div class="EmployeePicture">
                            <img src="/images/employees/#= ImageName #" alt="#: Name #" title="#: Name #" class="img-responsive img-rounded DropShadow" width="48" height="48" />
                        </div>
                    </div>
                    <div class="TableColumn col-md-6 col-sm-4 col-xs-5">
                        <h5 style="margin: 0; padding: 0;"><b>#: Name #</b></h5>
                        <p class="EmployeeTitle">
                            #: Title #<br />
                            <i>#: StatusDisplay #</i>
                        </p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</script>
 
@(Html.Kendo().ListView<EmployeeListViewModel>()
      .Name("listview")
      .HtmlAttributes(new { @class = "ra-well-overlay row" })
      .ClientTemplateId("listview-template")
      .TagName("div")
      .DataSource(source =>
      {
          source.Read(read => read.Action("GetEmployeesList", "EmployeeDirectory"));
          source.PageSize(15);
      })
      .Navigatable()
      .Pageable()
)
0
Milena
Telerik team
answered on 15 Jan 2016, 09:17 AM
Hello,

You can see how to modify the pager`s message in the example below:

@(Html.Kendo().ListView<EmployeeListViewModel>()
      .Name("listview")
      .HtmlAttributes(new { @class = "ra-well-overlay row" })
      .ClientTemplateId("listview-template")
      .TagName("div")
      .DataSource(source =>
      {
          source.Read(read => read.Action("GetEmployeesList", "EmployeeDirectory"));
          source.PageSize(15);
      })
      .Navigatable()
      .Pageable(p => p.Messages(msg => msg.Display("{0}-{1} of {2} employees")))
)


Regards,
Milena
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Milena
Telerik team
Share this question
or