Load a Telerik ASP.NET Ajax RadGrid into a Modal Popup and Refresh Data Over Ajax without Page Refresh

Question

I have an application which currently implements a dynamically created RadGrid. The grid is generated by reading the columns and datatypes from a specific SQL Server View. We have many of these views which is why we use Dynamic creation.

Every time the user interacts with a grid control (eg filter/paging control), the entire page is refreshed. The RadGrid is recreated from scratch in the Page_PreInit method and populated with the updated data. This is a very poor user experience and also draining on server resources.

I'm trawling through the Telerik documentation and cannot find a clear example of what I'm trying to achieve. I'd like to know if it's possible to achieve the following requirements:

1. Clicking on a link on a page will load a Telerik Modal Window Popup.
2. The contents of the Modal popup are retrieved by Ajax POST request to the server - this will create the initial dynamic grid and return HTML contenttype.
3. Once loaded into the modal popup, the grid HTML structure becomes dynamic and only the updated data from a paging or filtering operation is returned from the server when the event fires - preferably JSON only is sent to reduce bandwidth overheads of transporting HTML.

Can this use case be achieved with Telerik UI for ASP.NET Ajax?

Answer 1

1. You can, here is how to open a RadWindow: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/getting-started/opening-windows . Basically, call its show() client-side method.

2. The easiest way to do this is to have an aspx page that will render your grid and open it in the RadWindow (see the NavigateUrl property and the setUrl() client-side method, and the first argument to radopen() or open()). RadWindow will generate a GET request for that page.

Option 2: Use the OnClientShow event of the RadWindow to generate your POST (eg, via the __doPostBack() MS AJAX function) and use the ContentTemplate of the RadWindow. Examine the following article to see how to use AJAX with it: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/how-to-use-radwindow-with-ajax .

3. This is autmatically achieved by the first option from the second point - the content page will encapsulate its own requests. Proper AJAX setup in Option2 will give you the same but the grid will reside on your main page.

Hint: Generally postbacks are used to fetch the data. If you want less than that, use client-side binding for your grid: http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx