Nested modal kendowindow & ASP.NET MVC4

[Andrea]

Hi, I'm implementing the library Kendo UI Web (not MVC server wrapper) in an ASP.NET MVC4 web application (razor), with encouraging results regarding the use of kendogrid and kendowindow. But the problems start when I try to use multiple nested modal windows.

The scenario is as follows:
- a "_Layout.vbhtml" template with references to (in order) jquery-1.7.1.js, jquery.validate.js, jquery.validate.unobtrusive.js and kendo.web.min.js.
- an "Index.vbhtml" view with a kendogrid that correctly loads JSON data from a call to a controller action.
In this view I put also a modal kendowindow that dynamically loads in its content the CRUD forms when the user clicks on a grid row.

Regarding the Create and Update operations, the forms (loaded into this first modal window) consist respectively of two views, "Create.vbhtml" and "Edit.vbhtml", that share the same partial view "_CreateOrEdit.vbhtml" from which I have to open another modal kendowindow for lookup operations during the filling of the form.

All data and operations of all components (loading data, form validation, opening and closing kendowindows, the availability of the KendoUI environment) work alternately, depending on the manner in which I insert or less of additional references to scripts "jquery-1.7.1", "jquery.validate", "jquery.validate.unobtrusive" and "kendo.web.min" on top of the views or partial views, in addition to those references present in "_Layout.vbhtml".

At the moment I can: load the main grid, click on a row and open the first modal dialog with the edit form, regularly open the second modal lookup kendowindow with a grid inside correctly running, but when I try to close the second kendowindow I get the js error "L(b) is undefined" or an error like "$("#kLookup").data("kendoWindow") is undefined" (but "$("#kLookup")" is defined!)!!!

I want to know if the library KendoUI Web is compatible with such a scenario (a bit complicated to explain, but actually quite simple). Are there guidelines or best practice about how I have to reference to the JavaScript scripts to get a correct use of the library without conflict with JQuery, JQueryValidate and the usage of nested modal kendowindow?

Thanks in advance!
Andrea

[Andrea]

I found the solution at Using unobtrusive jquery validation with Forms Loaded vi AJAX :

1. I put all the references to scripts (jquery, validation and kendo UI Web) ONLY in the head tag of the _Layout.vbhtml page:

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

<script src="@Url.Content("~/Scripts/kendoui/kendo.web.min.js")" type="text/javascript"></script>

At this point I have ALL functioning (I can open and close all kendo windows with grids correctly), except of the validation of the Create/Edit form!
So......

2. I put the partial view declaration inside a div:

<div id="formContainer">

    @Html.Partial("_CreateOrEdit", Model)

</div>

3. In the script that posts the form to the controller, in which I perform the client validation, I added the bolded line:

function postData() {

    $.validator.unobtrusive.parse($("#formContainer"));

    var formValid = $("#fCreateEdit").validate().form();

    if (!formValid) return false;

 

    $.ajaxSetup({

        jsonp: null,

        jsonpCallback: null

    });

 

    $.post(.....................

    ..................

}

... and now ALSO validation works perfecly!!!

Andrea