MVC3 Webgrid Paging is not working inside a Jquery dialog

Question

I have a Jquery dialog and I load a view to it which contains a webgrid. It opens normally and display content in a webgrid. But when I click a paging link, then next page of webgrid is not open within the dialog but as a different page in the browser.

Can't I have a webgrid within a Jquery dialog?

If I can, do I have to set specific properties?

Answer 1

You need to define ajaxUpdateCallback function, in example:

 var grid = new WebGrid(source: Model,
    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 main view

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

Take a 5 minutes to look at your WebGrid's code, it will help you a lot and save time in future. what it is, is a HTML table enhanced with jQuery code. Look at page links, and headers (for sorting) they are all just $.load() invocations with Url, and Callback parameter. So What is important is to figure out the right div id and a callback function :)