Multiple row selection without holding CTRL key?

[Basem]

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.

[Iliana Dyankova]

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(){
  $(this).toggleClass('k-state-selected');
});

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.

Regards,
Iliana Nikolova
the Telerik team

[Sim]

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"/>

        <h3>#=description#</h3>

        <dl>

            <dt>Price:</dt>

            <dd>#=kendo.toString(basePrice, "c")#</dd>

        </dl>

    </div>

</script>

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.

[Jesper]

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 myGrid.select()-method. 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.

[Mark]

myGrid.select() 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. 

[Mounika]

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?

Thanks
Mounika

[Stefan]

Hello ,

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:

http://dojo.telerik.com/eMIHu

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

Regards,
Stefan
Telerik by Progress

[Lee]

Hi, I'm also trying to the same thing, except that I also like to have drag-selections (ie. selecting multiple rows via mouse drag), similar to when grid.selectable is set to "multiple, row". How do I achieve this?

 

[Alex Hajigeorgieva]

Hi, Lee,

I am afraid that it is not possible to combine this custom row and built-in multiple cell selection with the current way that the kendo selectable is implemented.

If pressing the Ctrl key is not acceptable, perhaps you can utilize the CheckBox selection instead?

https://demos.telerik.com/kendo-ui/grid/checkbox-selectionhttps://demos.telerik.com/kendo-ui/grid/checkbox-selection

Kind Regards,
Alex Hajigeorgieva
Progress Telerik