Kendo UI + UI for ASP.NET AJAX

6 posts, 0 answers
  1. Scott Christopher Stauffer
    Scott Christopher Stauffer avatar
    5 posts
    Member since:
    Sep 2015

    Posted 25 Feb Link to this post

    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.

  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 29 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET AJAX banner
  4. Scott Christopher Stauffer
    Scott Christopher Stauffer avatar
    5 posts
    Member since:
    Sep 2015

    Posted 29 Feb Link to this post

    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>

  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 01 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Scott Christopher Stauffer
    Scott Christopher Stauffer avatar
    5 posts
    Member since:
    Sep 2015

    Posted 01 Mar in reply to Genady Sergeev Link to this post

    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;
    }

  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 01 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET AJAX banner