How to use Kendo UI within a stand-alone orchard module? - asp.net-mvc-3

Question

I'm writing a custom modulo to present the user with a grid to allow the end-user to see and manage "non-content-part" data. This data is data feed to the database from an outside source. The module, for simplicity, register a route for the mysite/Manager path as bellow:
public IEnumerable<RouteDescriptor> GetRoutes() {
return new[] {
new RouteDescriptor {
Priority = 5,
Route = new Route(
"Manager/{controller}/{action}",
new RouteValueDictionary {
{"area", "XpiManager"},
{"controller", "Home"},
{"action", "Index"}
},
new RouteValueDictionary(),
new RouteValueDictionary {
{"area", "XpiManager"}
},
new MvcRouteHandler())
}
};
As we can see it is just as if its a stand-alone app inside the Orchard.
This is the very simple code for the Home controller:
[Themed]
public class HomeController : Controller
{
public ActionResult Index()
{
return View("XpiManager");
}
}
It uses the ThemedAttribute so that the end-user feels as if he is still inside the side and not in a kind of sub application...
Since I need some nice end-user capabilities added to the grid, and since I've got a full subscription for Telerik's controls, including the full KendoUI package I want to use their server-side wrappers to create this grid in my template code, which currently has the following place-holder code:
<h1>Site's Manager</h1>
Yes, just that... I want to be able to do something like this in this template:
#model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductID).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsInStock);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Grid"))
)
)
As a last resort, I could use the client-side only Kendo UI with javascript, but that would make it a lot harder for me to bind to my datasource. I'm pretty newbie in both Kendo UI and Orchard (although I'm a little more experienced in the latter...)

Answer 1

You can add a reference to the Kendo UI server-side components in the theme project and use the helpers from there. I've done the same thing and it works like a charm.
If you can't add the reference, because you're not running from the source version, here's another technique that could work. Add an entry to the <namespaces> in the razor section in your web.config file for the Kendo UI stuff.
<system.web.webPages.razor>
<pages pageBaseType="...">
<namespaces>
<add namespace="..." />
</namespaces>
</pages>
</system.web.webPages.razor>
Make sure that you also add references to the required assemblies in the web.config files, otherwise the website will not run properly.
<compilation debug="..." targetFramework="4.0">
<assemblies>
<add assembly="..."/>
</assemblies>
</compilation>
That's all there is to it. The rest is a matter of getting the records from the database using IRepository<T> and calling the right methods on the Kendo UI component helpers.