Question

I am doing some partial page updates with WebGrid in MVC3 but when I update my grid with $(‘#grid’).html(data) and then click on a col/link in the grid to sort by that column my page get’s reloaded with just the grid in a non-css format. How can I fix this?

Index.cshtml

 // ...
 // grid partial view
 <div id="gridview" class="gen">@Html.Partial("_gridPartialView", Model.Data)</div>

// On button click on main page to get filtered data to new grid
$.get('@Url.Action("GetFilteredData")', { 'statusFilter': filterstuff }, function (data) {
   $('#gridview').html(data);
});

_gridPartialView.cshtml

@model IEnumerable<.Models.Data>
@{           
  var grid = new WebGrid(source: Model,
  //defaultSort: "DataId",
             rowsPerPage: 50);                     
}
@grid.GetHtml(
    tableStyle: "webgrid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
    grid.Column("DataId", "Id"),
    grid.Column("DataName", "Name"),
    //...

Controller ActionResult:

public ActionResult GetFilteredData(int[] statusFilter)
{
   // Do filtered query on data model
   return PartialView("_gridPartialView", cvm.Campaigns);
}

Answer 1

in your _gridPartialView.cshtml Change your grid declaration to something like :

 var grid = new WebGrid(source: Model,
    //defaultSort: "DataId",
    ajaxUpdateCallback: "GridUpdate",
    ajaxUpdateContainerId: "grid"
    rowsPerPage: 50); 

ensure that your .GetHtml method has :

@grid.GetHtml(
    htmlAttributes: new { id = "grid" }, 
//.. rest of the options here
)

and add the below to your Index.cshtml

<script type="text/javascript">
    function GridUpdate(data) {
        $('#gridview').html(data);
    }
</script>