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

6 posts, 0 answers
  1. Brian
    Brian avatar
    3 posts
    Member since:
    Sep 2011

    Posted 17 Jun 2013 Link to this post

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    3 posts
    Member since:
    Sep 2011

    Posted 20 Jun 2013 Link to this post

    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
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Brian
    Brian avatar
    3 posts
    Member since:
    Sep 2011

    Posted 25 Jun 2013 Link to this post

    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
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 27 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready