MVVM Kendo Slider / RangeSlider wires to events on the Model, not the ViewModel?

[Brian]

See this jsbin for a working example - http://www.jsbin.com/icidip/3/edit

This applies to both the Slider and RangeSlider widgets.  I have tried this on builds up through the latest internal build, 2013.1.614 commercial (KendoUI Web), with the same results.

It appears as though the events defined declaratively via data-bind, are looking for a callback function contained with the Model rather than the ViewModel. This behavior is different from the other kendo controls we are using (DropDownList, etc.).  The bind value also displays ODD behavior, in that it will accept a collection to bind to that exists EITHER on the ViewModel OR the Model.

Can you help straighten this one out?  We are looking to bind the Slide event to an event we define inside of the ViewModel, not nested inside of the Model (meaning, we expect events on the control to act like events on other Kendo Controls).  Thanks.

Brian

[Alexander Valchev]

Hi Brian,

The problem comes from the fact that the function which you would like to bind is nested inside the DataSource component.

var vm = new kendo.data.ObservableObject({
        testObservableCollection: new kendo.data.DataSource({
          onSlideViewModel: function(e){
            //this onSlide doesn't get called, but it should?
            console.log('i moved');
          },

Please define it as a property of the ViewModel.

var vm = kendo.observable({
  onSlideModel: function(e) {
    console.log("i moved");
  },
  testObservableCollection: new kendo.data.DataSource({

I hope this will help.

Regards,
Alexander Valchev
Telerik

[Brian]

Alex,

Thanks - I missed the obvious misplacement. When I made that change, the jsbin example WORKED, however that was not the issue I was trying to illustrate. 

The problem arises where the control nested inside of an EDIT template, is no longer able to find functions within the viewmodel - only within the model itself.  I have updated the same jsbin to show this errant behavior:

http://jsbin.com/icidip/5/edit

As you can see, the only result that works is where it logs "onSlide called from model" - I can never reach the onSlide function inside the viewModel that writes "onSlide called from viewmodel". However, if the control existed on the view template only, this would work find. This appears to be an edit template/mode bind issue.

Thoughts?

Brian

[Alexander Valchev]

Hello Brian,

First of all let me apologize for the late reply. I forwarded your case to the developers for further investigation.

The scenario is not supported. You cannot wire the event to a function that belongs to the root ViewModel, because when the edit form is bound to the dataItem the parent-child connection of binding targets is lost.

The solution is to define the event handler as part of the model like in your sample. Please make sure to not override one of the build-in Model methods such as get/set/isNew and etc.

Regards,
Alexander Valchev
Telerik

[Brian]

Alex,

Thanks for the clarification.  Basically we are trying to have a virtual field (function) in either the viewmodel or model be able to notify of changes on-the-fly.  This is obviously possible in the viewmodel as it inherits from kendo.observable, however we have yet to figure out how to have a virtual field defined in the model that notifies on change (we can have virtual / calculated fields, but they do not notify on change).  

Is an observable virtual/calculated field (function) in the model supported?  If so, could you give an example?

Brian

[Alexander Valchev]

Hi Brian,

If I understood correctly your expectation is model fields (StartTime and EndTime) to get updated when range slider value changes. I am afraid that this is not supported because the range slider is bound to a calculated field (sliderRangeMinutes function). The widget/html element value can be bound only to a property (not function) of the ObservableObject.

Regards,
Alexander Valchev
Telerik