In this example we will use Ajax.ActionLink to load a partial view which contains a Telerik Grid for ASP.NET MVC.

1. Include the ASP.NET MVC Ajax JavaScript files in your view (ASPX)
   CopyAjax JavaScript files

   <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
   <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

2. Add an empty HTML element to your view. It will be the placeholder where the partial view will be loaded:
   CopyPlaceholder HTML element

   <div id="result"></div>

3. In your view create an Ajax.ActionLink which will load the partial view when the user clicks it:
   CopyAjax.ActionLink declaration

   <%= Ajax.ActionLink("Load partial view", "PartialGrid", new AjaxOptions
   {
       //JavaScript function executed after successful Ajax request
       OnSuccess = "updatePlaceholder",
       //The "id" attribute of the HTML placeholder
       UpdateTargetId = "result"
   })%>

   Important
   Handling the OnSuccess event is mandatory to properly initialize any UI component in the partial view. By design, the ASP.NET MVC Ajax does not execute any JavaScript statements which are output by the partial view (such as UI component initialization scripts).

4. Just after the Ajax.ActionLink paste the following JavaScript block (the OnSuccess event handler):
   CopyUpdating the HTML placeholder

   <script type="text/javascript">
      function updatePlaceholder(context) {
           // the HTML output of the partial view
           var html = context.get_data();
   
           // the DOM element representing the placeholder
           var placeholder = context.get_updateTarget();
   
           // use jQuery to update the placeholder. It will execute any JavaScript statements
           $(placeholder).html(html);
   
           // return false to prevent the automatic update of the placeholder
           return false;
       }
   </script>

5. Implement the PartialGrid action method which is going to be invoked by the Ajax.ActionLink and should output the partial view which contains the Grid:
   CopyAction method which renders the partial view

   public ActionResult PartialGrid()
   {
      var model = new NorthwindDataContext().Orders;
   
      return PartialView("PartialGrid", model);
   }

6. Define the partial view which contains the Grid:
   CopyPartialGrid.ascx

   <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcApplication1.Models.Order>>" %>
   
   <%= Html.Telerik().Grid(Model)
           .Name("Grid")
           .DataBinding(dataBinding => dataBinding.Ajax().Select("Orders", "Controller"))
           .Pageable()
           .Sortable()
           .Filterable()
   %>

   Important
   The Grid must be bound client-side (either with Ajax or a WebService). Otherwise the Grid will disappear after the first operation (e.g. changing the page or sorting a column).

7. Important
   Since the Q2 2011 release of Telerik Extensions for ASP.NET MVC manual JavaScript registration is no longer required. The following step is not required for versions after Q2 2011.

   Register all JavaScript files, required by the UI component, in the view. Those are listed in the Required JavaScript files topic. Make sure all the required JavaScript files are included, otherwise the component will not operate as expected. Some components include JavaScript files depending on the enabled features (such as the Grid). In this partial view we are using filtering and some of the columns are of DateTime type, so we need the following JavaScript files:
   CopyGrid JavaScript files

     <% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
          .Add("telerik.common.min.js")
          .Add("telerik.grid.min.js")
          .Add("telerik.calendar.min.js")
          .Add("telerik.datepicker.min.js")
          .Add("telerik.grid.filtering.js")); 
   %>

8. Finally, make sure that the CSS files, which required by the UI component, are properly registered in your master page. Otherwise the component will appear unstyled.

In this example we will use jQuery to load a partial view, which contains Telerik Grid for ASP.NET MVC.

1. Add an empty HTML element in your view, which will be the placeholder where the partial view will be loaded:
   CopyPlaceholder HTML element

   <div id="result"></div>

2. In your view create a hyperlink, which will load the partial view upon clicking:
   CopyHyperlink declaration

   <a href="#" onclick="loadPartialView()">Load partial view</a>

3. Just after the hyperlink, paste the following JavaScript block:
   CopyLoading the partial view

   <script type="text/javascript">
      function loadPartialView(context) {
           //Populate the contents of the placeholder with the result returned by the action method HomeController.PartialGrid
           $('#result').load('<%= Url.Action("PartialGrid", "Home") %>');
       }
   </script>

   In this case the load method is used, which makes an Ajax request to the specified URL and updates the HTML of the target with the result.
4. Implement the PartialGrid action method which is going to be invoked and should output the partial view which contains the Grid:
   CopyAction method which renders the partial view

   public ActionResult PartialGrid()
   {
      var model = new NorthwindDataContext().Orders;
   
      return PartialView("PartialGrid", model);
   }

5. Define the partial view which contains the Grid:
   CopyPartialGrid.ascx

   <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<MvcApplication1.Models.Order>>" %>
   
   <%= Html.Telerik().Grid(Model)
           .Name("Grid")
           .DataBinding(dataBinding => dataBinding.Ajax().Select("Orders", "Controller"))
           .Pageable()
           .Sortable()
           .Filterable()
   %>

   Important
   The Grid must be bound client-side (either with Ajax or a WebService), otherwise the component will disappear after the first operation (e.g. changing the page or sorting a column).

6. Important
   Since the Q2 2011 release of Telerik Extensions for ASP.NET MVC manual JavaScript registration is no longer required. The following step is not required for versions after Q2 2011.

   Register all JavaScript files required by the UI component in the view. Those are listed in the Required JavaScript files topic. Make sure all the required JavaScript files are included, otherwise the component will not operate as expected. Some components include JavaScript files depending on the enabled features (such as the Grid). In this partial view we are using filtering and some of the columns are of DateTime type, so we need the following JavaScript files:
   CopyGrid JavaScript files

     <% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
          .Add("telerik.common.min.js")
          .Add("telerik.grid.min.js")
          .Add("telerik.calendar.min.js")
          .Add("telerik.datepicker.min.js")
          .Add("telerik.grid.filtering.js")); 
   %>

7. Finally, make sure that the CSS files, which are required by the UI component, are properly registered in your master page. Otherwise the component will appear unstyled.