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 record to view. When the user does this, I need to show the kendo window again with the same form but with different record data. Here's what I'm currently doing

    if (!$("#winContainer").data("kendoWindow")) {
        $("#winContainer").kendoWindow({
            modal: true,
            width: "969px",
            height: "646px",
            title: "View Record",
            content: "record.jsp"
        });
    } else {
        $("#winContainer").data("kendoWindow").refresh({url: 'record.jsp'});
    }

    $("#winContainer").data("kendoWindow").center().open();   

The form is contained within record.jsp, and I populate it with JSON data that I previously received from server (via JavaScript referenced in record.jsp). I need to ensure that the window does not show until the new record data is populated in the form. Is this the correct way to do this or is there some better way?

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"