Changing Count Display

5 posts, 0 answers
  1. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2015

    Posted 12 Jan Link to this post

    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?

  2. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2015

    Posted 12 Jan in reply to Michael Link to this post

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

  3. Kendo UI is VS 2017 Ready
  4. Milena
    Admin
    Milena avatar
    224 posts

    Posted 13 Jan Link to this post

    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!
     
  5. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2015

    Posted 14 Jan Link to this post

    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()
    )
  6. Milena
    Admin
    Milena avatar
    224 posts

    Posted 15 Jan Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready