ASP.NET MVC Model Binding and the Kendo UI Trigger method.

The current project that I am working on is an ASP.NET MVC application that makes use of Telerik Kendo UI controls. This is my first time to use this suite of controls and I am very pleased with the features/functionality that Telerik has implemented with Kendo UI. Telerik also has very nice documentation to refer to and an a great forum to post questions on (moderators typically respond very quickly). http://www.telerik.com/forums

That being said, I am still in the process of learning the ins and outs of all the Kendo UI controls. A recent issue that I ran into dealt with a null value appearing after model binding of an AJAX request.

In my situation, I was using a Kendo ListView control. Inside the editor template, there were multiple controls, one of which was a Kendo Drop Down List control. The requirements for my screen were such that depending on the user answer for another control, I needed to dynamically change the value of the Drop Down List control and disable is so that the user could no longer modify the value. This was easily done via jQuery using the following two lines of code:

validationType.data(“kendoDropDownList”).value(“Flat”);
validationType.data(“kendoDropDownList”).enable(false);

However, when clicking the “save” button on the ListView control, and after stopping on a breakpoint on the Action method inside of my controller class, I found that model binding had correctly sent me all the control values in the ListView except for the Drop Down List that I dynamically changed. 

At first, I surmised that model binding may not be working correctly due to disabling the control. After commenting out this line and running the test again, the value of the Drop Down List wall still not being correctly set via model binding. Model binding worked perfectly when I did not dynamically supply a value via jQuery. 

At this point I searched though the Kendo UI web site and also opened a ticket on the Kendo MVC forums. That forum entry is here: http://www.telerik.com/forums/dyanmically-changing-the-value-of-a-dropdownlist-control-inside-of-the-edit-template-of-a-listview-control

It turns out that dynamically changing a value for Kendo Controls via jQuery does not automatically trigger the “change” event to fire. The missing piece is that after changing the value of my Drop Down List via the line above, I needed to call the “change” event for the control manually via the Kendo UI trigger method. For example:

validationType.data(“kendoDropDownList”).value(“Flat”);
validationType.data(“kendoDropDownList”).trigger(“change”);
validationType.data(“kendoDropDownList”).enable(false);

Once I added this one line, model binding during the AJAX request to “save” the ListVIew item worked perfectly for all the controls within the ListView.

Hope you find this information useful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s