Kendo helpers partially broken in Asp.net MVC

10 posts, 0 answers
  1. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 22 Oct 2014 Link to this post

    This is a very weird behaviour but for some reason we can initialize Grids using Kendo's MVC HTML style helpers but DropDownList, DropDownListFor and other widgets just don't work.

    Here's the code: 
    @(Html.Kendo().DropDownListFor(model => model.Gender) .OptionLabel("Select Gender").BindTo(Model.GenderList).Deferred(true))
    @Html.ValidationMessageFor(m => m.Gender)

    There are no JS errors but the resulting HTML looks like this: 
    <input type="text" value="-1" name="Gender" id="Gender" data-val-required="The Gender field is required." data-val-range-min="0" data-val-range-max="1" data-val-range="Gender is required" data-val="true" class="input-validation-error">
     
    <span data-valmsg-replace="true" data-valmsg-for="Gender" class="field-validation-error"><span for="Gender" class="">Gender is required</span></span>

    If I instantiate this via javascript using a normal MVC drop down list:
    <h3>Test Drop Down list</h3>
    @Html.DropDownListFor(m => m.Gender, Model.GenderList, new { @class = "dropdown-list form-control"})
    <script>
    //instantiate drop down lists
    $(".dropdown-list").kendoDropDownList();
    </script>

    It works! 

    So I assume the Kendo libs are loading fine, but for some reason the MVC side of things are only partially working. 

    Grids work: 
    @(Html.Kendo().Grid<DependantModel>(Model.Dependants)
            .Name("Dependants")
            .Columns(columns =>
            {
                  ... left out for brevity
            }) .DataSource(dataSource => dataSource
                            .Server()
                            .Model(model => model.Id(p => p.Id))
                            .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
                        )
                        .Deferred(true)
                        )

    Charts work but the code is too long to paste here. 

    Any ideas why other widgets won't work? 





  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 24 Oct 2014 Link to this post

    Hi Jacques,

    I suppose the DropDownList is used as a Grid editor. In this case the widget's HTML is rendered on demand after the deferred scripts have been rendered and executed. As a result, the DropDownList initialization script is executed too early and fails. Moreover, the deferred initialization script is executed only once, while it needs to be executed on each editing and that's why it should be part of the editor template (as it is normally).

    The Deferred option for the DropDownList in this case is neither needed, nor useful, so simply remove it.

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 24 Oct 2014 in reply to Dimo Link to this post

    We don't use the drop down lists in the grid. This problem applies to any Kendo widget apart from grids and charts which do work.

    for example this morning i tried using the numeric textbox and separately the slider widget. Both render the standard html elements but none od the Kendo stuff for custom styling.
  5. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 24 Oct 2014 Link to this post

    Incidentally, if I initialize these using pure JavaScript as in $('.class-name').kendoSlider() it works. The MVC equivalent though doesn't work @(Html.Kendo().SliderFor(m => m.Age).Deferred(true))

    initializing grids the MVC way works perfectly
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 24 Oct 2014 Link to this post

    Hello Jacques,

    Well, there are two possibilities:

    1. There is a Javascript error on the page

    http://docs.telerik.com/kendo-ui/troubleshooting

    http://docs.telerik.com/kendo-ui/aspnet-mvc/troubleshooting


    2. The widgets, which use Deferred and are NOT initialized, are part of partial views, which are loaded with Ajax. This is practically the same scenario that I am talking about in my previous reply.

    If you still need assistance with this problem, then provide a runnable example, so that I can see what's wrong.

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 27 Oct 2014 in reply to Dimo Link to this post

    Hi Dimo. 

    Quoting from my original post: "There are no JS errors ... "

    In terms of point 2: 
    1. These are not part of partial views
    2. No ajax involved
    3. Partial views... the same as your previous reply? Grids and partial views are quite different, but anyway this is neither. 

    A runnable example... same as usual. We'll try and remedy this ourselves. 



  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Oct 2014 Link to this post

    Hello Jacques,

    The only remaining reason for the problem, that I can think of, is that the widgets are declared after the

    @Html.Kendo().DeferredScripts()

    statement, which is of course not possible. If this is the case, then move the above statement after all widgets.

    ===

    Partial views loaded with Ajax are the same scenario as Grid editor templates in terms that both things are rendered on the page with a delay, after the deferred scripts have been executed.

    ===

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  9. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 28 Oct 2014 in reply to Dimo Link to this post

    Hi Dimo, 

    I think I know why this is happening. If you look at my original sample code you'll notice for the one that isn't working I didn't specify a value for Name. I understand its importance as the ID is used to initialize the widget in the deferred scripts. 

    Final Question: When using Microsoft's helpers like @Html.TextBoxFor(m => m.Surname) it will automatically use the Model.PropertyName as the ID of the element. Does Kendo MVC not do this? 
  10. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 28 Oct 2014 in reply to Dimo Link to this post

    Scratch the last. It does work without the Name property, I had a duplicate ID because I was testing on the same page with two controls one Kendo the other Microsoft. 

    The next part of this that doesn't work is unobtrusive validation. My Model has a required attribute, this works on post back, but nothing stops the form from submitting on the client side so we affectively have server side validation only and this is only for the Kendo control. 

    Is it possible that the default value has something to do with this, or the fact that there is no default value, or anything else? 
  11. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 28 Oct 2014 Link to this post

    I'm going to close this one off. 

    The final outcome is that: 

    There was no problem with the Kendo MVC helpers

    The problem was that I wasn't using the Name property for non-bound inputs or in the case of bound inputs I was using duplicate name/IDs because I was testing against another Html.TextboxFor input element using the same ID

Back to Top
UI for ASP.NET MVC is VS 2017 Ready