KendoUI : data-bind not fully working

Question

I created this sample locally

http://demos.telerik.com/kendo-ui/mvvm/remote-binding

In my 'update' transport, I did modify the 'ProductName' from my WebAPI

    public IHttpActionResult Update(Product prod)
    {
        prod.Price = prod.UnitPrice * prod.Quantity;
        prod.ProductName = prod.ProductName + DateTime.Now.ToString();
        return Ok(prod);
    }

It did update and reflect on my 'dropdownlist'.

The issue is the textbox id=products is not showing the latest productname. The textbox is binded using

data-bind="value: selectedProduct.ProductName"

How can I refresh this text box ?

Thank you.

All is same except this

                    update: {
                        url: "/Product/Update",
                        contentType: "application/json",
                        type: "POST"
                    },

and this.

                    parameterMap: function (data, type) {                          
                        return kendo.stringify(data);

                    }

If these changes are not made; my webapi will not receive any value.

I notice like the binding somehow got broken momentarily; is it because its indirectly reference using the var 'selectedProduct' ?

Are you using the HTML and JS code exactly as written in the demo or did you change things up? Because if you did, it would help to see your relevant HTML and JS. — Brett
It is not exactly. You see in the demo there is two part. The dropdownlist and the individual textboxes. Initially the binding is working in the textbox (after you select the items in the dropdownlist). But after calling my webAPI update. Only the ProductName in the dropdownlist reflects..BUT NOT the ProductName in the textbox. — fkmbkk
Later I will try to make the HTML and JS exactly and see what happens. — fkmbkk
I have added the difference in code as compared to the samples. — fkmbkk

Brett Brett · Accepted Answer · 2015-07-31T18:16:08

The reason, I believe, that your textbox is not updating is because of two reasons: 1) you're changing the data on the server instead of the client, and 2) the textbox is tied to the selectedProduct variable which is in no way tied to the data source.

In other words, when you submit the update, because your dropdown list is bound to the productSource data source, it's data gets updated automatically and the list is refreshed to show you the changes. This is expected. On the other hand, selectedProduct is not tied to the data source in any way, so, it still holds the old value before the update was called.

The solution is you have to manually update selectedProduct after the update request returns.

KendoUI : data-bind not fully working

1 Answers