This is a migrated thread and some comments may be shown as answers.

Error in multiselected elements in grid with virtual scroll

2 Answers 79 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 11 May 2020, 10:23 AM

Hello guys,
I am managing a grid, with a height of about 500px, with rowHeight of 28px; with these data, I calculated a pageSize of 60 - (500/28)*3
Using these parameters, if I select the first item of the list and shift+click on the 65th, the result selection is made of the element 1 and the elements between the 47 and 65.
Besides, I used several other couples of values for rowHeight/pageSize, but never I got a good result.
I updated Kendo progress as well, but nothing changed.
Please, could you give me any suggestions?

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 13 May 2020, 07:36 AM

Hi Marco,

The Grid built-in selection functionality operates with the currently rendered items only:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/#toc-during-data-operations

As described in the following GitHub issue:

https://github.com/telerik/kendo-angular/issues/889

... this is the expected behavior when the virtual scrolling functionality is used. However, you can also control the selection programmatically, and persist it during data operations (the documentation section linked in the beginning).

A similar approach is applicable when virtual scrolling is used too, but additional custom logic that will handle adding/removing items to the selected items collections will be required. You can further utilize the cellClick event that contains the clicked row and the data item associated with it, as well as the original click event and its modifiers (ctrl, shift) in its event data. For example, on clicking a cell you can store the data item, associated with the clicked row, and on shift-click - add all items between the initially clicked one and the shift-clicked one, to the selection, e.g.:

https://stackblitz.com/edit/angular-gai4gk?file=app/app.component.ts

The example is not fully functional, but rather a sample implementation to help pointing you in the right direction. Further customization and enhancements are in the hands of the developer.

I hope this helps, but if you have the time, please submit a feature request, describing the desired functionality and behavior, to our Feedback portal:

https://feedback.telerik.com/kendo-angular-ui

We will track it to estimate the customer demand for providing such an enhancement, and will prioritize accordingly, based on the interest, when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Marco
Top achievements
Rank 1
answered on 18 May 2020, 07:42 AM

Hi Dimiter,

thank you for your reply and sorry for my delay of mine.

Despite I would wish to use a Kendo feature, I followed your suggestion and implemented my cutom logic. It seems to work ;)

Still thanks for your support and congratulations for your work.

Tags
MultiSelect
Asked by
Marco
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Marco
Top achievements
Rank 1
Share this question
or