Count selected rows

3 posts, 1 answers
  1. Raphael
    Raphael avatar
    10 posts
    Member since:
    Feb 2013

    Posted 16 Oct 2017 Link to this post


    I'm currently searching for a smart way to display the number of selected rows in a Grid.

    In my grid I have a select column to select items and a second column that shows the information:

    columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#");


    This is the corresponding aggregate for the item counter:

    .Aggregates(aggregates => aggregates.Add(item => item.Name).Count())


    What I want to archive is that the footer template is also showing the number of selected items.

    Pseudocode (which is obviously not working):

    columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#<br>Selected items: #=selectedCount#")


    The only way I found to show the selected item count is to manipulate the DOM ($(".k-footer-template td:nth-child(2)")) when the grid change event is firing.

    Does anybody have a smarter solution for my problem?

    Any help is appreciated!



  2. Answer
    Stefan avatar
    2893 posts

    Posted 18 Oct 2017 Link to this post

    Hello, Raphael,

    Currently, the used jQuery approach to programmatically change the value of the footer is a valid one. This is required as the Grid will re-render only if a value of the bound columns is changed.

    In this scenario, we can also suggest adding a span element with specific class with will hold the selected count. This will ensure that the selector is specific and it will not interfere with the built-in elements of the Grid.

    columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#<br>Selected items: <span class='count'>0</span>")

    Also, I can suggest submitting a feature request, to add the number of selected rows as a variable available in the templates. Then based on its popularity we may implement it in a future release:

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Raphael
    Raphael avatar
    10 posts
    Member since:
    Feb 2013

    Posted 19 Oct 2017 Link to this post

    Hello Stefan,

    the hint to use a span element with a specific class is very thank.

    Thank you for your help!



Back to Top