kendoWindow ajax load issue

[Boris]

I'm creating an ASP.NET MVC3 web app with Kendo UI and I love it.
Here is an issue I'm trying to resolve at the moment:

1. I have a main screen with a grid and custom command/action

{ command: { text: "Unwind", click: showUnwind }, title: " ", width: "50px" },

2. Once I trigger that I display my window

    function showUnwind(e) {
        e.preventDefault();
 
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var selImagineSNum = dataItem["ImagineSNum"];
 
        var direction = _rootUrl + "CFD/GetUnwindWindowContent/" + selImagineSNum;
        var wnd = $("#unwindWindow").data("kendoWindow");
 
        if (!wnd) {
            // first click of the button - will automatically fetch the contentUrl
            wnd = $("#unwindWindow").kendoWindow({
                title: "Unwind Trade",
                actions: ["Minimize", "Maximize", "Close"],
                content: direction,
                width: "800px",
                height: "600px",
                visible: false,
                modal: true
            }).data("kendoWindow");
        } 
        
        wnd.refresh(direction);
        wnd.center();
        wnd.open();
    }

3. The direction above points ot an MVC action that returns an ActionResult with the following markup:

 
@{
    Layout = null;
}
 
<div style="margin: 5px 5px 0 5px;">
    @* Header *@
    <table class="table table-condensed">
        <tr><th>PrcmNum</th><th>ImagineSNum</th><th>PrimeBroker</th><th>Fund</th><th>Trade Date</th><th>Setl. Date</th></tr>
        <tr><td>@ViewBag.Id</td><td>@ViewBag.Id</td><td>PrimeBroker</td><td>Fund</td><td>01/01/2012</td><td>01/02/2012</td></tr>
    </table>
 
    @* Grid *@
    <p class="help-block">Associated trades based on: Fund, Prime Broker & PrcmNum</p>
    <div id="gridAssoc"></div>
</div>
 
<script type="text/javascript">
    CFDUnwind.init();
    /*
    $(function () {
        CFDUnwind.init();
    });
    */
</script>

4. The CFDUnwind.init() method is in CFD.Unwind.js and that file is of course already loaded. The code is:

var CFDUnwind = {};
 
CFDUnwind._assocTradesDataSource = null;
 
// *** Initialize the CFD partial view
CFDUnwind.init = function () {
 
    // ** DataSource for the CFD Trades
    CFDUnwind._assocTradesDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: _rootUrl + "CFD/GetAssocCFDTradesPOST",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "ImagineSNum",
                fields: {
                    Confirmed: { editable: true, type: "boolean" },
 
                    PrcmNum: { editable: false, type: "number" },
                    ImagineSNum: { editable: false, type: "number" },
 
                    Fund: { editable: false, type: "string" },
                    Strategy: { editable: false, type: "string" },
                    Folder: { editable: false, type: "string" },
                    Name: { editable: false, type: "string" }
                }
            }
        }
    });
 
    // ** Grid widget
    $("#gridAssoc").kendoGrid({
        dataSource: CFDUnwind._assocTradesDataSource,
        navigatable: true,
        selectable: "single",
        height: 280,
        resizable: true,
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        columns: [
            {
                field: "Confirmed", title: "&#10003", width: 15,
                template: '<input type="checkbox" #= Confirmed ? checked="checked" : "" # ></input>'
            },
            { field: "PrcmNum", title: "PrcmNum", width: 45 },
            { field: "ImagineSNum", title: "ImagineSNum", width: 45 },
 
            { field: "Fund", title: "Fund", width: 55 },
            { field: "Strategy", title: "Strategy", width: 55 },
            { field: "Folder", title: "Folder", width: 55 },
            { field: "Name", title: "Instr. Name", width: 60 }
        ],
        dataBound: function (e) {
            // console.log("gridAssoc dataBound event");
        }
    });
 
}

5. Things are beautiful 90% of the time -- I get my grid in the Window and the data is loaded with an ajax call. The problem is that sometimes I get picture: issue2.jpg, but would like to always get: correct1.jpg :)
Now, what is interesting is that if I click again to display the window the problem disappears;
I get the issue only after initialization and not always...

Hhh, please advise.

~ Boris

[Boris]

This is still a pretty big problem for me...
To summarize:

1. I load a window (direction points to an MVC action)

        if (!wnd) {
            // first click of the button - will automatically fetch the contentUrl
            wnd = $("#unwindWindow").kendoWindow({
                title: "Unwind Trade",
                actions: ["Minimize", "Maximize", "Close"],
                content: direction,
                width: "1150px",
                height: "540px",
                visible: false,
                modal: true
            }).data("kendoWindow");
        }
        else {
            wnd.refresh(direction);
        }
 
        wnd.center();
        wnd.open();

2. I get some markup, styles, and JS file for that window. At the end of the ActionResult response I have:

<script src="@Url.Content("~/Scripts/business/CFD.Unwind.js")" type="text/javascript"></script>
<script type="text/javascript">
    CFDUnwind.init();
</script>

3. In the

    CFDUnwind.init();

I convert my already loaded div into a KendoGrid

    // ** Grid widget
    $("#gridAssoc").kendoGrid({
        dataSource: CFDUnwind._assocTradesDataSource,
        navigatable: true,
        selectable: "single",
        height: 300,

// etc...

The problem is that in this scenario I don't always get the kendoGrid widget loaded in the window! It works most of the time, but not always :(

I think it is some sort of weird timing/async issue in the library...
I tried many approaches making sure assets are loaded properly...

Dear Kendo Team,
Please advice...fix...

~ Boris

[angella]

I need an Insert/Update window with model, can you help me?