Multiple row selection without holding CTRL key?

7 posts, 0 answers
  1. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 17 May 2012 Link to this post

    Can I make row selection happen with just clicks? Currently with multiple selects enabled, clicking one row at a time unselects the previous row.

    Actually I am not very clear of the behavior of multiple selects because seems a bit quirky. Sometimes it leave the class k-selected-state of the previous row and other times not.
  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 19 May 2012 Link to this post

    Hello Basem,

    Such functionality is not supported out of the box, but you could achieve it using custom code. For example:

    $("#grid").delegate('tbody>tr', 'click', function(){
    Please notice that in this case you need to set to the Kendo UI Grid selectable: false property. For convenience, I created a simple example, which illustrates such approach in action.

    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Sim
    Sim avatar
    3 posts
    Member since:
    Jul 2012

    Posted 03 Jul 2012 Link to this post

    hi iliana,

    i followed your example and indeed it work as expected. but, how can we actually get the data in the selected item/s?  i am a newbie trying to learn a wonderful tool.  can you help me out?

    this is my listView template..
    <script type="text/x-kendo-tmpl" id="template">
        <div class="addons drpBlackShd">
            <g:hiddenField name="id" value="69"/>
            <img src='http://localhost:8080/??????Air/addOn/getImage/#=id#' alt="#=name# image"/>
                <dd>#=kendo.toString(basePrice, "c")#</dd>

    there is a total price on my page and i would like to add the basePrice there when selected and subtract also when deselected.
    i would also like to capture the id as params to the next page.  how can i achieve all this in grails? 

    thank you in advance.
  4. Jesper
    Jesper avatar
    25 posts
    Member since:
    Jun 2012

    Posted 04 Jul 2012 Link to this post

    This is the Grid forum, so I'm going to presume that you're talking about a grid, event though you mention a listView.

    You can get selected rows in your grid using the This will return an array of rows. You can get IDs by iterating over the rows.

    To get the model behind the row, you can use the dataItem()-method, using the corresponding row as argument.
  5. Mark
    Mark avatar
    10 posts
    Member since:
    Dec 2012

    Posted 10 Apr 2014 in reply to Jesper Link to this post won't work with the grid's selectable feature disabled (which is what Iliana's solution involves).  You would need to iterate through the grid and find all <tr> elements with a "k-state-selected" class. 
  6. Mounika
    Mounika avatar
    1 posts
    Member since:
    Mar 2017

    Posted 12 Apr in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    This worked great except i lost pagination and vertical scrolling. I tried js and css to add scrolling but it didnot work. Can you please help me with that?


  7. Stefan
    Stefan avatar
    1288 posts

    Posted 17 Apr Link to this post

    Hello Mounika,

    I was not able to reproduce the same issue on my end.

    I made an example using the same approach for selection, and the Grid is still pageable and scrollable:

    If additional assistance is needed, please modify the example in order to reproduce the issue and I will gladly assist.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top