Sorting when two grids are on the same page

Question

On my page I have two webGrids. When I click on one to sort that column, both of the grids are sorted on that column. Sorting on a column that is only in one, doesn't sort at all.

I noticed the sorting works by making the header a link to the same page with in the query string a column and a direction. This explains that both grids are affected. I was wondering if the webGrid has some functionality to solve my problem or should I fix it myself.

The way I am planning to "fix it myself" is to first add an id attributes to the table tags by setting the htmlAttributes. Then I will use jQuery to find this id for every webgrid and incorporate that id in the links parameters. Then when loading a page with a grid I will forcably set which column to sort on based on those parameters.

It seems to me the webGrid is not designed to be on a page with another webGrid. However, I feel that in my situation it is desired. I prefer to use some standard way (built in or just what everyone else uses).

So the question is, what is the best way to do it? And if there is no best way, is my way a good way (did I forget about 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");