24 Jan 2012

Dynamically hiding and showing columns in a Dojo DataGrid

Still having fun with my DataGrid. (See my previous post for more DataGrid joy.)

Now I had a big DataGrid with lots of columns and rows. It got so big that I decided it might be a good idea to hide some rarely needed columns when the user clicks a button. As I found out, the JavaScript code to show or hide a DataGrid's column is:


grid.layout.setColumnVisibility(i, visible);
in which grid is the DataGrid, i is the column number and visible is true (visible) or false (invisible). This worked, but with lots of columns and rows, it took forever to show or hide the columns. The API mentions the methods beginUpdate() and endUpdate(), which should speed things up when you "make multiple changes to rows". Although I'm not actually changing the rows (just the columns), I decided to give it a try:

grid.beginUpdate();
grid.layout.setColumnVisibility(i, visible);
...
grid.layout.setColumnVisibility(j, visible2);
grid.endUpdate();
This made the hiding/showing at least ten times faster!

No comments:

Post a Comment