Written by John DeVight on 1305515178|%Y-%b-%e
Last Updated by John DeVight on 1307971940|%Y-%b-%e
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:
@{
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()))
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:
@{
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>
);
}
Telerik DatePicker
Implementing the DatePicker on the Partial View
Here is the code to implement the DatePicker on the LoadUsingAjax partial view:
@{
DatePicker dp = Html.Telerik().DatePicker().Name("DateCreated");
dp.Render();
sw = new 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:
@{
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>
);
}
References
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.
Post preview:
Close preview