MVC3 Webgrid Paging Not Working Inside JQuery Dialog

Question

I have a jQuery dialog box and I load a view containing a webgrid into it. It opens normally and displays content in a web environment. But when I click the swap link, the next webgrid page does not open in the dialog box, but like another page in the browser.

Can I have a webgrid in a jQuery dialog?

If possible, do I need to set certain properties?

Answer 1

You need to define ajaxUpdateCallback function, for example:

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

make sure your .GetHtml method has:

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

and add below to your main view

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

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