Changing Count Display

[Michael]

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?

[Michael]

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()
)

[Milena]

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

 

 

[Michael]

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()
)

[Milena]

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