Dynamically loading a view, telerik mvc

Question

I'm trying to load a page using $.ajax(). I have view person with the actions: Index, Create, Delete. The page Create, has a Grid of Telerik MVC. The problem occurs when I'm on page Index and load the page Create with an ajax call to replace the contents of the current page. The page is fully loaded but the grid does not work, $('#gridname').data('tGrid') returns undefined.

A example of the javascript code.

$.ajax({
    url: '/Person/Create',
    contentType: 'application/html; charset=utf-8',
    type: 'GET',
    dataType: 'html',
    cache: false,
    success: function (data) {
        $('#main').html($(data).fadeIn(fade));
    }
});

Thank's

If you look in devtools can you see the presence of gridName in the HTML? — mattytommo
yes, the name is there, when the page 'Create' is loaded the 'datagrid' works perfectly, but when loaded via ajax call, not — André Moraes

Heretic Monkey Heretic Monkey · Accepted Answer · 2012-05-23T21:23:02

I've faced this problem many times. The issue is that when a Telerik control on a partial view is rendered, it adds a script tag with the JavaScript needed to initialize the control. jQuery strips that script tag out if you use $.ajax. Try the following:

$('#main').load('/Person/Create');

jQuery.load does not string out the script tag.

EDIT:

Looks like there's more to it than just load. Telerik has an article about it here:

http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

Basically, you need to make sure the Telerik scripts are referenced in the page (since they won't be automatically added) and you must use ajax to bind the data.

Dynamically loading a view, telerik mvc

1 Answers