Telerik MVC : jQuery.ajax, Partial View and Telerik Controls

This website is no longer actively supported

Written by John DeVight on 16 May 2011 03:06
Last Updated by John DeVight on 13 Jun 2011 13:32

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 I showed how a Telerik Grid on a partial view could be displayed by a jQuery.ajax call. The same can be applied to other Telerik controls.

Telerik ComboBox

Implementing the ComboBox on the Partial View

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

RAZOR

@{
  ComboBox cbo = Html.Telerik().ComboBox()
    .Name("TitleComboBox")
    .AutoFill(true)
    .DataBinding(dataBinding => dataBinding.Ajax().Select("GetWikiPageTitles", "Home"));

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

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

ASPX

<%
  ComboBox cbo = Html.Telerik().ComboBox()
    .Name("TitleComboBox")
    .AutoFill(true)
    .DataBinding(dataBinding => dataBinding.Ajax().Select("GetWikiPageTitles", "Home"));

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

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

Implementing the GetWikiPageTitles method in the Home Controller

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

[HttpPost]
public ActionResult GetWikiPageTitles()
{
    return new JsonResult { Data = new SelectList(GetWikiPageList(), "Id", "Title") };
}

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($('#TitleComboBox_Create_tComboBox').val());

Adding the Telerik JavaScript References to the Page

Here is the code to add the telerik.list.min.js and telerik.combobox.min.js files to the Index Partial View to support the Telerik ComboBox:

RAZOR

@{
    Html.Telerik().ScriptRegistrar()
        .Scripts(scripts =>
            scripts.AddGroup("IndexGroup", group =>
                group.Add("~/Scripts/2011.1.315/telerik.list.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.combobox.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.grid.min.js")
                     .Add("~/Scripts/Home/Index.js")
            )
        )
        .OnDocumentReady(
            @<text>
                Index.Init();
            </text>
        );
}

ASPX

<%
    Html.Telerik().ScriptRegistrar()
        .Scripts(scripts =>
            scripts.AddGroup("IndexGroup", group =>
                group.Add("~/Scripts/2011.1.315/telerik.list.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.combobox.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.grid.min.js")
                     .Add("~/Scripts/Home/Index.js")
            )
        )
        .OnDocumentReady(() =>
        {%>
            Index.Init();
        <%});
%>

Telerik DatePicker

Implementing the DatePicker on the Partial View

Here is the code to implement the DatePicker on the LoadUsingAjax partial view:

RAZOR

@{
  DatePicker dp = Html.Telerik().DatePicker().Name("DateCreated");

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

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

ASPX

<%
  DatePicker dp = Html.Telerik().DatePicker().Name("DateCreated");

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

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

Updating the jQuery.ajax Call to create the tDatePicker

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

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

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

Adding the Telerik JavaScript References to the Page

Here is the code to add the telerik.datepicker.min.js and telerik.calendar.min.js files to the Index Partial View to support the Telerik DatePicker:

RAZOR

@{
    Html.Telerik().ScriptRegistrar()
        .Scripts(scripts =>
            scripts.AddGroup("IndexGroup", group =>
                group.Add("~/Scripts/2011.1.315/telerik.list.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.combobox.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.datepicker.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.calendar.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.grid.min.js")
                     .Add("~/Scripts/Home/Index.js")
            )
        )
        .OnDocumentReady(
            @<text>
                Index.Init();
            </text>
        );
}

ASPX

<%
    Html.Telerik().ScriptRegistrar()
        .Scripts(scripts =>
            scripts.AddGroup("IndexGroup", group =>
                group.Add("~/Scripts/2011.1.315/telerik.list.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.combobox.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.datepicker.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.calendar.min.js")
                     .Add("~/Scripts/2011.1.315/telerik.grid.min.js")
                     .Add("~/Scripts/Home/Index.js")
            )
        )
        .OnDocumentReady(() =>
        {%>
            Index.Init();
        <%});
%>

References

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