MVVM doesn't bind data

Question

I have e kendo-grid where i have a custom command button and when i press that button i want to open a new kendo window and then with ajax calls go get all info about that product and populate a couple of different forms in that window.

Here is my html in the window that pops up.

    <div id="productinformation-form">
            <div class="form-group">
                <label for="id">Id</label>
                <input data-bind="value: id" type="text" class="form-control" id="id" />
            </div>
            <div class="form-group">
                <label for="unitmeasurement">Unit Measurement</label>
                <input data-bind="value: unitMeasurement" type="text" class="form-control" id="unitmeasurement" />
            </div>
            <div class="form-group">
                <label for="minorderqty">Unit Measurement</label>
                <input data-bind="value: minOrderQty" type="text" class="form-control" id="minorderqty" />
            </div>
            <div class="form-group">
                <label for="packsize">Pack Size</label>
                <input data-bind="value: packSize" type="text" class="form-control" id="packsize" />
            </div>
            <div class="form-group">
                <label for="leadTime">Lead Time</label>
                <input data-bind="value: leadTime" type="text" class="form-control" id="leadTime" />
            </div>
            <div class="form-group">
                <label for="generalaccessorycategoryid">General Accessory Categoryid</label>
                <input data-bind="value: generalAccessoryCategoryId" type="text" class="form-control" id="generalaccessorycategoryid" />
            </div>
            <div class="form-group">
                <label for="company">Company</label>
                <input data-bind="value: Company" type="text" class="form-control" id="company" />
            </div>
            <div class="form-group">
                <label for="weight">Weight</label>
                <input data-bind="value: Weight" type="text" class="form-control" id="weight" />
            </div>
            <div class="form-group">
                <label for="producttype">Product Type</label>
                <input data-bind="value: ProductType" type="text" class="form-control" id="producttype" />
            </div>
        </div>

And here is the code where i go get the view above.

       var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var id = dataItem.id;
        var company = dataItem.Company;
        console.log(id);
        $.ajax({
            url: '@Url.Action("EditProductView", "Product")',
            type: 'POST',
            dataType: 'html',
            cache: false,
            success: function(data) {
                bindProductData(id, company, data);
            },
            error: function(xhr, error) {
            },
        });

And here is where i go get the information about my product and then tries to bind it to the form with mvvm.

    function bindProductData(id, company, html) {
        bindProductInformation(id, company, html);
    }

      function bindProductInformation(id, company, html) {
        $.ajax({
            url: '@Url.Action("GetProductInformation", "Product")',
            type: 'POST',
            dataType: 'html',
            data: { id: id, company: company },
            cache: false,
            success: function (data) {
                $("#edit-product-window").kendoWindow({
                    modal: true
                });
                $("#edit-product-window").html(html);
                console.log("PRODUCT");
                console.log(data);
                //var viewModel = kendo.observable({
                //    id: data.id
                //});

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), data);
            },
            error: function (xhr, error) {
                console.log("ERROR");
            },
        });

in my kendo.bind the object data looks like this:

   {"id":"1068M","unitMeasurement":"1","minOrderQty":null,"packSize":null,"leadTime":null,"generalAccessoryCategoryId":null,"Company":"NORMSTAHL","Weight":null,"ProductType":1}

so i think it should be able to bind to the form correctly.

EDIT: if i change my code to this:

      var viewModel = kendo.observable({
                    id: "asdasd"
                });

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), viewModel);

it works. It then types out asdasd as id in the form.

But if i use the data from the post like this:

       var viewModel = kendo.observable({
                    id: data.id
                });

                var window = $("#edit-product-window").data("kendoWindow");
                window.open();
                window.center();
                kendo.bind($("#productinformation-form"), viewModel);

then it won't type it out!

EDIT 2: if i do a console.log(data) it shows me the whole object in the console.

but if i do console.log(data.id) it shows me undefined even if the data shows me the object contains id.

                {"id":"1062M","unitMeasurement":"1","minOrderQty":null,"packSize":null,"leadTime":null,"generalAccessoryCategoryId":null,"Company":"NORMSTAHL","Weight":null,"ProductType":1}

Answer 1

As your comments above, it seems your response is a json string instead of object, it's due to your AJAX request specification of data-type here:

dataType (default: Intelligent Guess (xml, json, script, or html))

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

dataType: 'html'

Change it into

dataType: 'json'

And it should work.

AJAX documentation.

Answer 2

The data parameter of your ajax call is an object not a kendo observable object.

http://docs.telerik.com/kendo-ui/framework/mvvm/overview

To tackle this you should create a viewmodel object (as in your edits as)

var viewmodel = kendo.observable({
    id: 0,
    unitMeasurement: '',
    minOrderQty: 0,
    //the rest of your properties
});

//bind the view model
$(function () {
    kendo.bind($('#productinformation-form'), viewmodel)
});

Then if you really don't want to manually bind your properties you could loop your properties on the data object such as (in your ajax method).

for (var property in data) {
    if (property in viewmodel)
        viewmodel[property] = data[property];
}

Now you may find other ways of managing this however you can now extend your viewmodel (as a proper MVVM pattern) to handle events, sources etc.

Using this approach also enables to use of the 'get' and 'set' methods on the viewmodel. These are very useful when working with sources etc. You could even extend your view model to accept and object in a method and bind itself such as.

var viewmodel = kendo.observable({
    id: 0,
    unitMeasurement: '',
    minOrderQty: 0,
    //the rest of your properties

    bindToData: function (data) {
        for (var property in data) {
            this.set(String(property), data[property]);
        }
    }
});


///...ajax call
success: function(data){
    viewmodel.bindToData(data);
}