Kendo UI MVVM Datasource binding to html input element

Question

newbie to kendo

The kendo datasource only returns arrays and my RESTful api returns a client as an array of one element.

However, I cannot seem to bind the 'Name' field of the client to an html input box.

I can however consume the data if I put it in a 'ul', as shown in the below code. I know the json response is well formed because I can console.log(obj[0].Name);

I attempted to return obj[0] in the data: of the datasource but that just broke everything. (no slice error message, as it tries to slice up the array).

I'm sure this is easy but I must be just thinking about this all wrong...

Html and js below:

<div data-role="view" data-title="Client Detail" data-model="app.clientView">

<!-- this does not work -->

<input data-bind="value: app.clientView.data"/>
<input data-bind="value: app.clientView.data[0].Name"/>
<input data-bind="value: app.clientView.data.Name"/>

<!-- this works -->

<ul data-role="listview" data-source="app.clientView.data" data-template="client-template"></ul> 

<script type="text/x-kendo-template" id="client-template">
    <a href="components/clientView/view.html?id=#: ID #">
        <div>#: Name #</div>
        <div>#: LastActivityOn #</div>
    </a>
</script>

app.clientView = kendo.observable({
    data: new kendo.data.DataSource({
        transport: {
            read: {
                url: app.uri + "clients/69", //+ id,
                type: "get",
                dataType: "json",
                beforeSend: function (req) {
                    req.setRequestHeader('X-authKey', app.key);
                }
            }
		},
        schema: {
        	data: function (response) {
            	console.log(response);
            	var obj = $.parseJSON(response);
                console.log(obj[0].Name);
            	return obj;
        	}
        }
    })
});

dimodi dimodi · Accepted Answer · 2016-09-06T22:01:24

Kendo UI MVVM value bindings cannot point to a Kendo UI DataSource instance. Only source bindings can do that.

In your case, rework your implementation and add some new fields to the viewModel (app.clientView), which can be used for value bindings. It is OK to populate these fields after the DataSource instance receives its data.

On a side note, there is no need to specify viewModel fields verbosely by including the viewModel reference in the bindings configuration. You only need the field names there. Check the Kendo UI MVVM demos.

Kendo UI MVVM Datasource binding to html input element

1 Answers