Changing Count Display

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

    Posted 12 Jan 2016 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 2016 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. Milena
    Admin
    Milena avatar
    244 posts

    Posted 13 Jan 2016 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!
     
  4. Michael
    Michael avatar
    6 posts
    Member since:
    Oct 2015

    Posted 14 Jan 2016 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()
    )
  5. Milena
    Admin
    Milena avatar
    244 posts

    Posted 15 Jan 2016 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