Kendo helpers partially broken in Asp.net MVC

[Jacques]

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? 

[Dimo]

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

 

 

[Jacques]

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.

[Jacques]

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

[Dimo]

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

 

 

[Jacques]

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. 

[Dimo]

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

 

 

[Jacques]

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? 

[Jacques]

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? 

[Jacques]

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