Sort when two grids are on the same page

Question

On my page, I have two webGrids. When I click on one to sort this column, both tables are sorted by this column. Sorting by a column that is in only one is not sorted at all.

I noticed that sorting works by making the title link to the same page, in the query line is the column and direction. This explains that both grilles are affected. I was wondering if webGrid has some features to solve my problem or should I fix it myself.

The way I plan to “fix this myself” is to first add the id attributes to the table tags by setting htmlAttributes. Then I will use jQuery to find this identifier for each webgrid and include this identifier in the link parameters. Then, when loading a page with a grid, I will be forced to set which column will be sorted based on these parameters.

It seems to me that webGrid is not intended to be on a page with another webGrid. However, I feel that this is desirable in my situation. I prefer to use the standard path (built-in or just what everyone else uses).

So the question is, what is the best way to do this? And if there is no better way, is my way a good way (I forgot something)?

Thanks in advance.

Answer 1

I think you need to set the following properties:

string fieldNamePrefix = null //The value which prefixes the default querystring fields string pageFieldName = null //A value that replaces the default querystring page field var grid1 = new WebGrid(canPage: true, canSort: true, ajaxUpdateContainerId: "grid1", fieldNamePrefix:"g1",pageFieldName: "p1"); var grid2 = new WebGrid(canPage: true, canSort: true, ajaxUpdateContainerId: "grid2", fieldNamePrefix:"g2",pageFieldName: "p2");