PDA

View Full Version : Reorder columns and apply filter in one call



rgraham
Apr 22, 2020, 12:08 AM
I have a grid, with a tree panel next to it that has a bunch of nodes that allow the user to refill the grid with a different set of parameters coming back from the server.

We have the ability to let the users save a "favorite" view that comprises the order of the columns and the filterHeader applied to those columns (adds a new button in the tree view under another node named "Custom Views").

My predecessor handled this by calling a DirectMethod in C# code behind that regenerates the columns with the new order from the "meta" parameter in the grid load function. After is has loaded the new ColumnBase, it calls
X.Js.Call("applyFilter"); to apply the filterHeader value.

Unfortunately, this creates a twice loading major flicker that is very annoying.

Is there a way to re-order the columns (there aren't any new ones being added) and set the filterHeader value all in JavaScript and then make just ONE call to the backend that will refill the grid?

I realize that I will need to do a quiet call to the server to get the column order and filter value, but this should be doable without causing any flicker for the user.

I found some replies to this, but most are quite old, EXT V1 in most cases, so I'd rather find a newer example.

Appreciate your help!

Bob Graham

fabricio.murta
Apr 22, 2020, 4:57 PM
Hello, Bob!

I am pretty sure this is possible, I'm just not sure how would be the best route to suggest you to take. Can you provide a simplified test case illustrating the scenario you have? Then given that we can offer a couple alternatives to have the sort + filter in one shot.


My predecessor handled this by calling a DirectMethod in C# code behind that regenerates the columns with the new order from the "meta" parameter in the grid load function.

For one, I believe instead of re-generating the whole grid, you can instead hide and reorder columns programmatically. To avoid "layout flashes" there are some techniques that may be applied, like masking and pausing layout updates during the "reorder batch".


Is there a way to re-order the columns (there aren't any new ones being added) and set the filterHeader value all in JavaScript and then make just ONE call to the backend that will refill the grid?

Definitely, as suggested above. But it may be a little tricky to determine the right place to scope the "move" call. In short, given you have a grid panel with GridPanel1 ID, you can move the first column after the second with:



var columns = App.GridPanel1.getColumns();
App.GridPanel1.headerCt.moveAfter(columns[0], columns[1]);


In other words, using [url=https://docs.sencha.com/extjs/7.2.0/classic/Ext.grid.header.Container.html#method-moveAfter]the moveAfter() method[/var] in the grid panel's internal header container (headerCt). In the case you want to move the column to the first position, it can be attained by passing null as the second parameter or using [url=https://docs.sencha.com/extjs/7.2.0/classic/Ext.grid.header.Container.html#method-moveBefore]the moveBefore() method[/var].

Now, for the "setting the filterHeader" part of your statement above, we'd need to delve in test cases.


I found some replies to this, but most are quite old, EXT V1 in most cases, so I'd rather find a newer example.

Although lots changed between v1 and v5, there are still a handful of v1 tips and tricks still working down the road to version 5, so it may usually be safe refering to v1 threads; sometimes they no longer work but gives good lead on how to deal with the issue in recent versions.

Hope this helps. Nevertheless, we would need a bit more to get in-depth with the solutions that could apply for the "single-shot-sort-and-filter".