Geek asks and answers

What is the best way to bind the Kendo UI dropdown to a ViewModel that is populated with a data source?

I have a kendoUI dropdown that is in the template and linked to the ViewModel along with the range associated with the data item that is selected in the drop down list:

<p>
    <label>Appointment Type: </label>
    <select id="appointmentTypeDropDownList"
            data-text-field="Name"
            data-value-field="AppointmentTypeId"
            data-role="dropdownlist"
            data-bind="source:appointmentTypes, value:AppointmentTypeId"
            data-autobind="true"
            data-select="onSelected" />
</p>
<p><label>Duration:</label>
    <span data-bind="text:selectedAppointment.Duration"></span> minutes
</p>

My ViewModel:

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
});

Initially, I used a hardcoded array usesTypes and set selectedAppointment to assign Types [0] in the above Model view. This does not work now because the data source is loading asynchronously. ViewModel is updated in the onSelected function:

var onSelected = function (e) {
    var dataItem = this.dataItem(e.item.index());
    viewModel.set("selectedAppointment", dataItem);
};

The template is in the window, and the range is empty at the first load, and then works after that (as soon as the data is loaded from the first request).

, span , Duration , ? ? -, ? kendoScheduler, :

var template = kendo.template($("#editor").html());

$("#scheduler").kendoScheduler({
    editable: {
        template: template()
    }
});

!

. , , Kendo, , . data-bind = "events: {...}" , . , Atanas , data-bound = "onDataBound" ( viewmodel). .

+3
2

dataBound selectedAppointment :

data-bind="source:appointmentTypes, value:AppointmentTypeId, events: { dataBound: onDataBound }"

:

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
    onDataBound: function(e) {
        e.sender.select(0); // will trigger your change handler
    }
});
+4

. , , . Northwind:

<span data-bind="text:selectedProduct.ProductName"></span>
<select data-bind="source: products, value: selectedProduct"
      data-text-field="ProductName"
      data-value-field="ProductID"
      data-role="dropdownlist"></select>
<script>
var o = kendo.observable({
  selectedProduct: {
    ProductID: 2,
    ProductName: "Chang"
  },
  products: new kendo.data.DataSource({
    transport: {
      read: {
        url: "http://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    }
  })
});

kendo.bind(document.body, o);
</script>

: http://jsbin.com/pawiz/1/edit

+1

More articles:


All Articles