Combining Telerik KendoUI and Sitefinity 7 with MVC4

by Gregg Crystal Aug 05, 2014

Telerik provides nice documentation on Handling Kendo UI Dropdown (and other UI) events.  When working in a straight MVC 4 Application these work great. However, when we marry KendoUI+MVC into a Hybrid Sitefinity Project (MVC + WebForms) one can quickly find themselves with broken controls.

The reason is simple; when a MVC 4 Controller, in the Sitefinity Hybrid environment, returns a JsonResult the entire page HTML is returned, with the Json Object injected into the HTML flow exactly where the calling control widget was dropped.  This makes sense, but of course is not the clean Json Object the calling script is looking for.    

In MVC 3 there was an acceptable (to most)  work around for this, which worked because the Json Object was injected BEFORE any HTML.

Here was that fix:

http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/mvc-widget-jsonresult-question#Hk1jjME3622pWP8AAERlJg

Since this doesn’t work in MVC4 what are we to do? The solution is simply one post above the MVC3 work around!

http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/mvc-widget-jsonresult-question#Hk1jecE3622pWP8AAERlJg

By defining a custom route in the Global.asax (or in an Area Registration .cs file if using one), we can bypass the “Hybrid” type behavior that is causing issues.

Usage:

We can see in this nice example from Telerik, that the ActionHelper (in this case for a DropDownList) has a DataSource built via some other methods.

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/dropdownlist/overview

The method we concern ourselves with is the read.Action(“<Action>”, “<Controller>”) method. Simply replace this line with another provided action read.Route()!.

The replacement syntax is:

read.Route(“<RouteName”>, new { Controller = “<Controller>”, Action = “<Action>”});

Caution:

Please note that if you use this method, and you are depending on certain controller global variables, such as properties on the control widget set in the back end, they will not be available as we have taken “Sitefinity” (Web Forms behavior) out of the equation.   Possible workarounds here would be to pass non-confidential type information to the view via the model, which can be passed back, or to use Session. 

Picture worth 1000 words:

 SitefinityApplicationStartExample

 SitefinityRazorKendoExample

  Contact A Sitefinity Expert Today!