Telerik MVC : jQuery.ajax, Partial View and Telerik Controls Loaded From a Model

Written by John DeVight on 2011-May-16

Download RAZOR Source Code
Download ASPX Source Code
* Note: the Telerik.Web.Mvc.dll, Telerik "Contents" and Telerik "Scripts" have all been removed to reduce the zip file size

Overview

In the wiki page Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid and Telerik MVC : jQuery.ajax, Partial View and Telerik Controls, I showed how Telerik Controls on a partial view could be displayed by a jQuery.ajax call and loaded with Ajax DataBinding. A similar approach can be applied to populate the data on the server using a model. The necessary code will need to be generated and executed client-side to create the appropriate objects for the Telerik controls.

Telerik Grid

Implementing the Grid on the Partial View

While the Telerik Grid can be populated server side using a model, there is an issue with paging, sorting and filtering. When attempting to perform any of these functions, the page will post back to the server. Since the grid was loaded on a partial view using jQuery.ajax, the grid thinks that the correct url to post back to the server is the url for the partial view. This can be overcome by manipulating the tGid object's "urlFormat" property, the page will need to also remember what partial views have been loaded. This is all potentially doable, but I'll save that for another wiki page! However, I would recommend going with AJAX DataBinding instead as demonstrated at Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid.

The following example would be useful for a grid that has a small dataset that does not require paging, sorting or filtering:

RAZOR

@{
    Grid<TelerikMvcApplication.Models.WikiPage> grid = 
        Html.Telerik().Grid<TelerikMvcApplication.Models.WikiPage>(Model.Pages)
        .Name("LoadFromModel_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);
        })
        .Footer(false);

    sw = new StringWriter();
    grid.WriteInitializationScript(sw);
    grid.Render();
}

@Html.Hidden("LoadFromModel_WikiPageGrid_Create_tGrid", sw.GetStringBuilder().ToString())

ASPX

<%
    Grid<TelerikMvcAspxApp.Models.WikiPage> grid = 
        Html.Telerik().Grid<TelerikMvcAspxApp.Models.WikiPage>(Model.Pages)
        .Name("LoadFromModel_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);
        })
        .Footer(false);

    sw = new System.IO.StringWriter();
    grid.WriteInitializationScript(sw);
    grid.Render();
%>

<%= Html.Hidden("LoadFromModel_WikiPageGrid_Create_tGrid", sw.GetStringBuilder().ToString())%>

Updating the jQuery.ajax Call to create the tGrid

In the jQuery.ajax.success function, the eval function is executed to create the tGrid object.

Here is the code that was added to the Index.js:

eval($('#LoadFromModel_WikiPageGrid_Create_tGrid').val());

Telerik ComboBox

Implementing the ComboBox on the Partial View

Here is the code to implement the ComboBox on the LoadFromModel partial view:

RAZOR

@model TelerikMvcApplication.Models.Wiki

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

@{
    ComboBox cbo = Html.Telerik().ComboBoxFor(model => model.TopRatedPageId)
        .Name("WikiPageTitlesComboBox")
        .BindTo(new SelectList(Model.Pages, "Id", "Title"));

    sw = new StringWriter();
    cbo.WriteInitializationScript(sw);
    cbo.Render();
}

@(Html.Hidden("WikiPageTitlesComboBox_Create_tComboBox", sw.GetStringBuilder().ToString()))

ASPX

<%
    ComboBox cbo = Html.Telerik().ComboBoxFor(model => model.TopRatedPageId)
        .Name("LoadFromModel_TitlesComboBox")
        .BindTo(new SelectList(Model.Pages, "Id", "Title"));

    sw = new System.IO.StringWriter();
    cbo.WriteInitializationScript(sw);
    cbo.Render();
%>

<%= Html.Hidden("LoadFromModel_TitlesComboBox_Create_tComboBox", sw.GetStringBuilder().ToString())%>

Updating the jQuery.ajax Call to create the tComboBox

In the jQuery.ajax.success function, the eval function is executed to create the tComboBox object.

Here is the code that was added to the Index.js:

eval($('#WikiPageTitlesComboBox_Create_tComboBox').val());

References

• Telerik MVC : jQuery.ajax, Partial View and the Telerik Grid
• Telerik MVC : jQuery.ajax, Partial View and Telerik Controls

Support ASP.NET Wiki

If you like this page, click on the "Share on" links in the wikidot toolbar at the top of the page to share it with your friends.

Comments