Kendo UI + UI for ASP.NET AJAX

[Scott Christopher Stauffer]

I have been battling an issue during my current ticket and the last several tickets I've worked on where I'm at now. I've only been here for about seven months now and we're a WebForms shop. But our recent adoption of Kendo UI (coupled with my ASP.NET MVC background) has forced me to adapt and manipulate the Page Life Cycle to mimic MVC, especially when retrieving JSON for the kendoChart and kendoGrid. I'm able to do my work but it's slow because I find myself combating the RadControls we use. 

The RadControl that is shown on every page is the RadMenu in the MasterPage. Just using the MasterPage results in most of my pure HTML5 becoming mangled by Telerik UI for ASP.NET AJAX.

 

For example, since MSIE doesn't support input[type="number"], I resorted to kendoNumericTextBox, but when that runs the ASP.NET AJAX client-side scripts transform my HTML and add classes that wreck the styling.

 

The two frameworks are definitely not compatible. Or at least they are semi-compatible.

 

I ended up dynamically adding the inputs in the ready() event, calling kendoNumericTextBox() on them, and then spawning off an interval to check when the rfdDecorated class gets added to them so I can remove the class from them and their siblings. It does work, but it's messy, and trying to get around the ASP.NET AJAX framework when using Kendo UI is a pain.

Any ideas on how to make this situation better? My initial thought was to get rid of the RadMenu altogether because that's definitely what is causing the issue. There's a kendoMenu that looks and feels pretty much exactly like the RadMenu does but with obviously a lot less overhead. But pitching that idea to management would not be very easy because I believe they're too comfortable with the RadControls.

This is a strategy question and any input would be greatly appreciated.

[Genady Sergeev]

Hello Scott,

While Kendo UI can be used in a WebForms project we strongly recommend that you use the ASP.NET WebForms controls in that case. You can use the Boostrap skin to make the inputs look like Kendo inputs and modify the theme in our theme builder in case different colors are required. If you steel have to use the Kendo  UI controls the best suggestion is to  not mix them with the ASP.NET WebForms on the same page.

As for the case that you described, we are  not aware of RadMenu breaking the Kendo inputs. This might be a bug on our side. Do you have a sample page/project that reproduces the problem so that we can take a look?

Regards,
Genady Sergeev
Telerik

[Scott Christopher Stauffer]

Thank you, Genady. You pretty much answered this: Telerik strongly recommends not mixing the two technologies.

I don't have the time to make a sample page/project to reproduce the issue, but I can assure you that it's there. The HTML gets transformed by UI for ASP.NET AJAX because it can't distinguish between Kendo UI and what is meant to be a WebControl.

An easy replication of this behavior could be to create a webforms project that uses UI for ASP.NET AJAX, then add a RadButton to the aspx and then an input[type="submit"] or input[type="button"] to the page. It will gain the styling of the RadButton (.rfdButton, .rfdSkinnedButton) and it will be wrapped by an anchor tag.

So

<input type="submit" id="btnTest" value="..." />

becomes

<a href="javascript:void(0)" class="rfdSkinnedButton">
    <input type="submit" id="btnTest" value="..." class="rfdDecorated" tabindex="-1">
</a>

[Genady Sergeev]

Hello Scott,

We believe there is a control named RadFromDecorator on the master page. Please note that RadFormDecorator is incompatible with inputs styled by other frameworks. If you remove the decorator everything should start working as expected.

Regards,
Genady Sergeev
Telerik

[Scott Christopher Stauffer]

You're correct! There's a RadFormDecorator in the MasterPage!

If anyone else ran into my problem (I doubt too many have), in your Page_Load(), you can use this:

var formDecorator = (Telerik.Web.UI.RadFormDecorator)Master.FindControl("RadFormDecoratorId");

if (formDecorator != null)
{
    formDecorator.Enabled = false;
}

[Marin Bratanov]

Hi Scott,

If you need the decorator for other elements, you can instruct it to skip textboxes, something like:

formDecorator.ControlsToSkip = FormDecoratorDecoratedControls.Textbox | FormDecoratorDecoratedControls.Textarea;

Regards,

Marin Bratanov
Telerik