KendoUI – Validation Gotcha(s) …

While making Initial layout and architecture for the front end for our product @ Vanguard Software Group, i was trying to do POC and trying to hit all points where we going to use KendoUI.

I had came up pretty road blocker during this exercise – it was related to Loading a partial view into the application through Kendo’s Window widget.

FIRST ISSUE

The Validation doesn’t Simply work. No matter what i did, it just didn’t Budge. 

In researching the whole thing i came across multiple posts and ideas to make it work but all of them were not totally looking it deeply enough for me.

I found following:

  1. http://demos.kendoui.com/web/validator/index.html
  2. http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation
  3. http://www.telerik.com/community/forums/aspnet-mvc/window/client-validation-not-working-with-window-loaded-from-form.aspx
  4. http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/window/validation-problems-with-form-inside-window.aspx

Out of all those above Point # 4 had some proper half information… So took from there and fixed the issue by using the Window’s refresh method form kendo to bind it properly.

Hello Eric,

If you are using the jQuery validation then you should use the jQuery.validator.unobtrusive.parse method in the Window refresh event after the content has been loaded:

function refresh(e) {
    $.validator.unobtrusive.parse(this.element);
}

If you are using the Kendo Validator then you should initialize it on the form.

So by reading “If you are using the Kendo Validator then you should initialize it on the form.” I achieved it by doing following

LoginModule = function () {
var validator = null;
function Show() {
$(“#LayoutMain”).append(“<div id=’window’></div>”);
var window = $(“#window”);
if (!window.data(“kendoWindow”)) {
window.kendoWindow({
width: “600px”,
title: “Login”,
content: “Home/Login”, //partial View
modal: true,
resizable: false,
refresh: function () {
validator = $(“#LoginForm”).kendoValidator().data(“kendoValidator”); //do this IMPORTANT
}
});
window.data(“kendoWindow”).center();
}
};
function Submit() {
validator.validate();
};
return {
Show:
Show,
Submit:
Submit,
validator: validator
};
}();

See the BOLD lines above and follow the code.

SECOND

AND Lastly don’t FORGET to set HTML Element’s NAME attribute! If you don’t set it the Validation will also not work. Normally as coming from asp.net background i was only setting Id of the HTML element. and it was causing the validations messages to not appear.

 <input id=”Email” name=”Email” required validationMessage=”Email is required.” />

I hope this helps somebody out there 🙂

Thanks,
Riz

Kendo UI – Drop down list Setting Value autoBind = false setting

I am evaluating kendo ui right now to use in our big application. We have a situation where we have much values in dropdowns (like 200+) and there are more than 1 drop down with that size. So if we have a complex form. The Page Load takes time to render the form. (Due to that each box needs to be loaded from service and filled up).

We avoided this by writing our own asp.net web control with on demand support (like autoBind property) in the drop down list in kendo ui.

Now, DropDownList from KendoUI serves the purpose with autobind = false, BUT when setting value it fetches data from remote binding first and then selects appropriate value. (this is cool and really good for small lists) but Potentially this will mean that when we load the page and set the value it will issue remote binding calls for each of the drop downs.

Now,

Can we set value/ text to appear without issuing the remote binding. We want remote binding to be done ONLY when the user clicks on the drop down itself. (not when we are filling form). This will save extra calls to system and help quickly render the form to user.

Here is JS Bin

http://jsbin.com/ayivad/3/edit

If somebody from kendo ui would like me to help out – let me know, but this idea will allow us to use kendo ui drop downs with good use.

Read full post thread here ….

http://stackoverflow.com/questions/16803782/kendo-ui-drop-down-list-setting-value-autobind-false-setting