MVC3 WebGrid disappears after sorting or paging with a filter

Question

I am having the same issue as this question.

I have created a filter that is supposed to work alongside a WebGrid. The filter works for the first page, but if you try to go to a different page or sort the results, the filter is lost. I followed the suggestion in the previous question to change the method to GET, but instead of the target getting updated, it disappears from the page.

Grid call inside a div "Grid":

var grid = new WebGrid(Model, ajaxUpdateContainerId: "Grid", rowsPerPage: 20);

Filter form:

@using (Ajax.BeginForm("Action", new { filter = "filter" }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Grid", HttpMethod = "Get" }))

If "filter" is set in the Action, I return the PartialView of the grid instead of the full View.

Firebug is showing me that the correct HTML is getting sent in the response, but for whatever reason it's not getting inserted into the Grid div.

Any suggestions would be appreciated!

Edit: My current workaround is to use an HTML form instead of AJAX, but I would like to stick to AJAX if possible.

cederlof · Accepted Answer · 2012-09-24 08:52:44Z

4

I got a solution for this problem where I had a div surrounding my Webgrid like this:

Index.cshtml:

<div class="grid-container">
    <div id="my-grid">
        @Html.Partial("_Grid", Model)
    </div>
</div>

_Grid.cshtml:

@{

    var grid = new WebGrid(null, 
        canSort: true, 
        rowsPerPage: 20,
        ajaxUpdateContainerId: "my-grid");

    grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]

When sorting in my list, on filtered results, the Webgrid dissapeared and wasn't inserted into my-grid-div. HOWEVER, when I put the surrounding "my-grid" inside the partial view, it worked. I don't get the reason why, but it works now.

Index.cshtml:

<div class="grid-container">
    @Html.Partial("_Grid", Model)
</div>

_Grid.cshtml:

<div id="my-grid">
@{

    var grid = new WebGrid(null, 
        canSort: true, 
        rowsPerPage: 20,
        ajaxUpdateContainerId: "my-grid");

    grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
</div>

answered Sep 24, 2012 at 8:52

cederlof

7,4294 gold badges49 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amos Long Over a year ago

cederlof, it's a confounding and frustrating behaves this way, but I thank you for sharing this answer.

Collectives™ on Stack Overflow

MVC3 WebGrid disappears after sorting or paging with a filter

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related