What is the proper way to load new content into a kendo window?

Question

I have a kendo window that has a form inside it. The form has input elements with a record\'s data populated within it. The user may close the window and select a different

Answer 1

Instead of creating a new window each time or refreshing its content, I do recommend:

1. Create a window,
2. Each the user selects a new record, bind the new data to the window and then open it.

This way you only need to load the page once.

You might also consider having the page record.jsp defined as a Kendo UI template in your original page.

Example:

Given the following user selectable records:

var data = [
    { text1: "text1.1", text2: "text1.2" },
    { text1: "text2.1", text2: "text2.2" },
    { text1: "text3.1", text2: "text3.2" },
    { text1: "text4.1", text2: "text4.2" }
];

And a form defined as a template with the following HTML:

<script id="record-jsp" type="text/x-kendo-template">
    <div>
        <p>This is your form with some sample data</p>
        <label>text1: <input type="text" data-bind="value: text1"></label>
        <label>text2: <input type="text" data-bind="value: text2"></label>
    </div>
</script>

Our JavaScript would be something like:

// Window initialization
var kendoWindow = $("<div id='window'/>").kendoWindow({
    title    : "Record",
    resizable: false,
    modal    : true,
    viewable : false,
    content  : {
        template: $("#record-jsp").html()
    }
}).data("kendoWindow");

Bind data to the window and opening it:

function openForm(record) {
    kendo.bind(kendoWindow.element, record);
    kendoWindow.open().center();
}

And finally invoking the function with the data.

openForm(data[0]);

You can see it running on this JSFiddle

NOTE: If you still prefer using the external page, just need to change template: $("#record-jsp").html() by: url: "record.jsp"