Telerik MVC : jQuery.load, Partial View and the Telerik Grid

This website is no longer actively supported

Written by John DeVightJohn DeVight on 13 Jun 2011 18:37

Download RAZOR Source Code
Download ASPX Source Code
* Note: sample applications use Telerik Extensions for MVC 2012 Q1

Overview

For the past few days I've been collaborating with another developer, Steve Braich on the Telerik ASP.NET MVC Forum about dynamically adding a tab to the Telerik TabStrip. I've written a wiki page about a solution to the problem at Telerik MVC : Dynamically Add a Tab to the TabStrip. We ran into an issue on rendering a Telerik Grid on a Partial View that is returned from a jQuery.ajax() call.

The issue is that the $('#Grid').data('tGrid') was undefined. After a bit of research, I discovered that when the Grid is rendered on a page, Telerik adds javascript to the jQuery(document).ready() function to create the $('#Grid').data('tGrid') object. I started looking into how Telerik does this by using .NET Reflector to decompile and analyze the Telerik.Web.Mvc.dll assembly and discovered that the Grid contains a method called WriteInitializationScript to generate the javascript in the jQuery(document).ready() function to create the $('#Grid').data('tGrid') object. I was able to call the Grid<>.WriteInitializationScript, but discovered that the jQuery.ajax call strips all script tags from the html returned. To solve this problem, I put the javascript in a hidden field, and in the jQuery.ajax().success, I executed the javascript eval function to take the string in the hidden field and execute it as a javascript function.

[Updated: 27-Feb-2012 - I realized that the approach I took in 2011 was the not the right one. I've since realized that to load the partial view, I should use the jQuery.load() function. Unlike the jQuery.ajax() function, the jQuery.load() function does not strip out javascript. I've updated my telerik.extensions.js so that the TabStrip.addTab() function uses jQuery.load to load the contents of a new tab. I've rewritten the sample applications and the remainder of this article to demonstrate using the updated TabStrip.addTab() function.]

I took the sample application from the Telerik MVC : Dynamically Add a Tab to the TabStrip wiki page and implemented a Grid in the partial view.

Implementing the Grid in the Partial View

The following code demonstrates rendering the grid in a partial view to be returned in a jQuery.ajax call. Instead of immediately rendering the grid, I declare a variable for the grid, and call the WriteInitializationScript. The javascript that is generted is captured by the StringWriter. I then write the javascript to the hidden field by calling StringWriter.GetStringBuilder().ToString().

Here is the code from the loadUsingAjax partial view:

@using Telerik.Web.Mvc.UI;
@{
    Layout = null;
}

<div id="tabThreeContents" style="overflow: auto;">
  @{
        Html.Telerik().Grid<TelerikMvcApplication.Models.WikiPage>()
          .Name("WikiPageGrid")
          .Columns(columns =>
          {
              columns.Bound(c => c.Title);
              columns.Bound(c => c.Url);
              columns.Bound(c => c.DateCreated);
              columns.Bound(c => c.Id).Hidden(true);
          })
          .DataKeys(keys =>
          {
              keys.Add(c => c.Id);
          })
          .DataBinding(dataBinding => dataBinding.Ajax().Select("GetWikiPages", "Home"))
          .Pageable(paging =>
              paging.PageSize(5)
                    .Style(GridPagerStyles.NextPreviousAndNumeric)
                    .Position(GridPagerPosition.Bottom)
          )
          .Footer(true)
          .Render();
  }
</div>

Implementing the TabStrip.addTab() to get the partial View

In the Index.js file I call the TabStrip.addTab function passing in the text to be displayed for the tab and the url to load the contents of the tab. Here is the code:

$('#IndexTabStrip').data('tTabStrip').addTab({ text: 'Tab Three', url: '/Home/GetTabThree' });

Adding the Telerik JavaScript References to the Page

When the partial view with the Telerik Grid is retrieved by the jQuery.ajax call, the Telerik ScriptRegistrar doesn't know to download the javascript file to support the Telerik Grid. Therefore, the necessary javascript file to support the Telerik Grid must be explicitly referenced in the Telerik ScriptRegister.

Telerik JavaScript References

Since the jQuery.load() function is used within the TabStrip.addTab() function, all the appropriate references to the Telerik Grid JavaScript files are brought down. There is no need to explicitly reference the Telerik Grid JavaScript files on the Index page!

Implementing the GetWikiPages method in the Home Controller

Here is the code to get the list of TelerikMvcApplication.Models.WikiPage objects to populate the WikiPageGrid:

[GridAction]
public ActionResult GetWikiPages()
{

    return View(new GridModel<WikiPage>
    {
        Data = GetWikiPageList()
    });
}

private IList<WikiPage> GetWikiPageList()
{
    IList<WikiPage> list = new List<WikiPage>();
    list.Add(new WikiPage
    {
        Id = 1,
        Title = "Telerik MVC : Creating an \"ExtJS border-layout\" with Splitters",
        Url = "http://aspnet.wikidot.com/telerik-mvc:creating-an-extjs-border-layout-with-splitters",
        DateCreated = new DateTime(2011, 5, 11)
    });
    list.Add(new WikiPage
    {
        Id = 2,
        Title = "Telerik MVC : Resizing Controls Within Splitter Panes ",
        Url = "http://aspnet.wikidot.com/telerik-mvc:resizing-controls-within-splitter-panes",
        DateCreated = new DateTime(2011, 5, 12)
    });
    list.Add(new WikiPage
    {
        Id = 3,
        Title = "Telerik MVC : Dynamically Add a Tab to the TabStrip ",
        Url = "http://aspnet.wikidot.com/telerik-mvc:dynamically-add-a-tab-to-the-tabstrip",
        DateCreated = new DateTime(2011, 5, 12)
    });
    list.Add(new WikiPage {
        Id = 4,
        Title = "Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid",
        Url = "http://aspnet.wikidot.com/telerik-mvc:jquery-ajax-partial-view-and-the-telerik-grid",
        DateCreated = new DateTime(2011, 5, 14)
    });
    list.Add(new WikiPage {
        Id = 5,
        Title = "Telerik MVC : Creating Standard MessageBox Dialogs",
        Url = "http://aspnet.wikidot.com/telerik-mvc:creating-generic-messagebox-dialogs",
        DateCreated = new DateTime(2011, 5, 11)
    });
    list.Add(new WikiPage {
        Id = 6,
        Title = "Telerik MVC : Extending the Telerik Extensions for ASP.NET MVC",
        Url = "http://aspnet.wikidot.com/telerik-mvc:extending-the-telerik-extensions-for-asp-net-mvc",
        DateCreated = new DateTime(2011, 5, 11)
    });
    return list;
}

References

Discussion Closed

Add a New Comment
ajaxasp.netaspxgridjavascriptjquerymvcrazortelerik
page revision: 9, last edited: 15 Mar 2013 20:30
Edit Rate (0) Tags Discuss (9) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License