Problems with Kendo Grid Hierarchy

Question

Can anyone please write simple steps to implement hierarchy in kendo ui grid (mvc). I have been trying their demos but cannot get it working. thanks a lottt for your help!

I think I am missing something but here is what i am doing (as on http://demos.kendoui.com/web/grid/hierarchy.html)

I am adding a .ClientDetailTemplateId("Grid2Template") into my existing grid. Then I am writing code for above Grid2Template.

I am doing 100% of what is shown in the demo but cannot get it to work with these two steps. Is there anything extra involved?

Here is a very simple demo project... http://www.mediafire.com/?5qjyp40qfef7dkb

Answer 1

Your problem is kinda tricky and hard to find. Go to the webconfig and remove the following line:

<httpRuntime requestValidationMode="4.5" targetFramework="4.5" encoderType="System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

This encoder AntiXSS mangles the client template and the Grid is unable to display the detail template.

The project should run fine after this change.

Answer 2

Sorry to be late to the party. There is no need to remove the AntiXss encoder. Simply decode the string Kendo spits out and display it raw on your view.

So instead of:

@(Html.Kendo().TabStrip().Items(…).ToClientTemplate())

Do this:

@Html.Raw(HttpUtility.HtmlDecode(Html.Kendo().TabStrip().Items(…).ToClientTemplate().ToString()))

Answer 3

UPDATE: FYI Telerik has included my solution into Kendo UI MVC as of Q1 2014, so if you are on newer bits, you no longer need these "solutions".

---

Taking out the AntiXssEncoder is definitely bad news, and you should not do it. I tried working with Jportelas' and Marcelo's answers, but they still did not completely solve the problem. When dealing with required fields, Kendo & MVC inject the required field validator into the javascript, which has the spaces encoded in a totally different way (it uses the escaped UTF-8 string that represents the ampersand, followed by the html character code for the pound sign. Together they represent a space. Pretty screwed up, right?!?)

I've created a Gist that shows how to solve the problem for any control, not just Kendo UI. I've also asked Telerik to include the solution in the next release... please feel free to do the same.

HTH