[Solved] Multiple Cell Selected with a hidden column

[Daryl Shenner]

I have a kendo grid on a page that displays some data. I have the column menu enabled so that certain columns can be hidden by the user if they choose. I also have multiple cell selection enabled so that the user can select a range of cells.  Using the "change" event on the grid and the "this.select()" method, I look to see if the user has selected cells from a particular column. If so, I do some basic math using the selected cell values which are then displayed using a kendo window next to the selected cells.

This all works great when none of the columns in the grid are hidden. However, once one of the columns is hidden (either set that way when the grid is initialized or hidden using the column menu), the multiple cell selection function stops working or works very, very slow.  With a column hidden (any column), often when I try to select a range of cells, all of the cells in the entire table jog over to the left, the screen hangs for 30 seconds to 2 minutes minutes and when my selection is finally displayed it often doesn't include the cells I actually selected or, if it does, it also includes cells from additional columns and/or rows.

I am attaching a sample project so you can see this in action. In my actual project, I am getting the data from a remote source, but for this demo, I have just put the data I am using into a JavaScript array.  As far as I can tell, the only difference between the working and the non working version is the fact that a column on the grid is hidden.

There are several columns in the grid. The attached project doesn't include my style sheets so on smaller screens, the column titles are cut off. The column where I am doing the calculations is POQty, but you can still see the effect when selecting multiple cells in another column too. Also, the greater the range of cells selected after a column is hidden, the more pronounced the effect.

[Nikolay Rusev]

Hello Daryl,

Thank you for reporting this. We will investigate the behavior further and will do our best to improve the performance. As a general advice however it will be best to add some reasonable(per your application scenario) page size in order to reduce the amount of selectable cells. 


As a token of gratitude for bringing this to our attention I've updated your Telerik points.

Regards,
Nikolay Rusev
Telerik

 

 

[Daryl Shenner]

Nikolay,

I appreciate your quick response.  Are you saying that it is a page sizing issue or that smaller pages would fix the problem? It is a little strange since all functionality works great when no columns are hidden. That makes me think that the number of records isn't really the cause per se.

I personally would like to have add paging to the grid, but that probably won't work with this application. We are actually replacing a VB6 Windows app that was written several years ago and right now I am doing a Proof of Concept for the project owner so we can verify that the Kendo Grid can handle certain functionality that was present in the VB6 version. Of course, the web version doesn't have to do everything that the VB6 app did (since the web is different than a windows app), but there are certain "must haves" that they have given me. The kendo grid has worked perfectly on every one, but this one issue might be a deal breaker. I need the functionality that I have programmed into the grid to work after hiding a column as well as before.

I am a huge fan of Kendo and I really want to use it on this project rather than go find another control set that I am not familiar with and that probably doesn't work as well in the majority of cases. If you have any suggestions to fix the problem or a work around that I could implement, that would be awesome. I did this all with JavaScript, but we are a .NET shop and we have a full license so I could use the MVC controls as well.

My only thought at this point is:

1. Eliminate the hiding of columns altogether (at least by using the Column Menu)
2. Give the user a separate window/page/ui where they can select which columns they want displayed
3. With MVC, Dynamically render the JavaScript using column settings from step #2 so that the actual grid is always rendered with all columns displayed (none set to "hidden: true"). To hide a column, the user would have to go back into step #2 which would rerender the grid entirely.

I think I could get that to work and it might be acceptable to the project owner, but step #3 would feel like a huge hack to me.

Thanks again for your help,
Daryl

[Nikolay Rusev]

Hello Daryl,

First of all, I would like to thank you for taking the time sending us this feedback. 

Regarding the issue with hidden column - we've made some improvements which should resolve the troublesome behavior. You can download the latest internal builds and test again your scenario.

Regarding the other thing I mentioned and probably caused some confusion on your side - the general performance problem which we have with multiple selection, and especially with multiple cell selection, is that on drag we have to iterate over all the selectable elements, cells, do some math and mark them to be selected at some later stage, mouseup event. Having a lot of cells will slow down this process and the user might have different experience between browsers. That's why I suggested setting some page size as this will reduce the total amount of cells.

Setting page size however will not resolve the issue demonstrated in your application when there is hidden column. The fix in the internal build should resolve this. So please try it and let me know how that goes.

Regards,
Nikolay Rusev
Telerik

 

 

[Daryl Shenner]

Nikolay,

I installed the latest internal build a few minutes ago (2014.3.1204). I'll keep testing but from what I can see, it did fix the problem. Thank you very much for your prompt response and your assistance.

Daryl