Overview the problem

Grid.Mvc uses query string to pass filtering, sorting and paging settings to the server side.
If you place multiple grids on the page - that query string parameters will be applied to all grids on the page. There are ways to resolve this conflicts.

Columns

If your page grids have the same column names, that filtering and sorting settings will be applied to both grids. In this case you need to give grid columns unique internal names. You can do that using overloaded Columns.Add method:

сolumns.Add(o => o.Number, "CustomNumberName")
                .Titled("Number")
                .Sortable(true)
                .SetWidth(220);

In this case grid.mvc will be pass new internal column name to query string like:

?grid-column=CustomNumberName&grid-dir=0 - sorting
?grid-filter=CustomNumberName1Blauer%20See%20Delikatessen - filtering

This settings will applied only to added column.

Paging

To resolve paging setting conflict you need to specify custom grid pager query parameter name:

@Html.Grid(Model).Columns(columns =>
{
    ...
})..WithPaging(15, 6,"grid1-page")

After that grid.mvc will be pass new query string parameter:

/?grid1-page=2

Client side

If you want to use Client side (javascript) api that you need to give each grid unique client side ID.

@Html.Grid(Model).Named("myGrid").Columns(columns =>
{
...
})

After that you can access to added grid throght pageGrids object:

pageGrids.myGrid.addFilterWidget(new CustomersFilterWidget());

Last edited Sep 25, 2013 at 10:10 AM by Bukharin, version 2