Kendo UI – Property Changed MVVM

I seem to be having issues databinding ‘calculated’ fields with Kendo UI.

I am attempting to do data-binding with several what I will call ‘calculated’ fields. I have a grid, several buttons, filters and some sorting on a page that are all using the same datasource, an observable array called ‘allItems’. allItems is populated via a service call and sorted, manipulated and otherwise changed while the user is on the page via buttons.

  • Javascript Method to detect area of a PNG that is not transparent
  • I need to restrict the four input values from the backspace using javascript
  • Simple JavaScript login form validation
  • how can i create a websocket on google app engine for html5
  • what happens to window events when changing documents?
  • Changing the source for an image makes its width/height zero on the first click
  • There are several navigational buttons and several div’s that are populated based on information in the previous item, current item and next item in accordance to the current filters and sorts applied. Those buttons contain information in them that is extracted from the previous, current and next items as they related to the allItems list (ie the objects are actually held in the allItems array and are in fact observable objects).

    so in the viewmodel object I have something like this (please excuse short handing):

    var viewmodel = kendo.observable({
    var allItems = observablearray[]
    
    var currentIndex = 1; //or other default value
    
    var changeCurrentItem = function(){
        var self = this;
        //do some stuff
        //stuff might include modification to allItems
        self.set("currentIndex", someNewValue);
    }
    
    var previousItem = function(){
        return self.get('allItems')[currentIndex - 1];
    }
    
    var currentItem = function(){
        return self.get('allItems')[currentIndex];
    }
    
    var nextItem = function(){
        return self.get('allItems')[currentIndex + 1];
    });
    
    return viewmodel;
    

    The buttons and other info boxes are bound to previous,current and next Items. But this does not appear to work. I’ve had to make previous, current and nextItems copies of what lives in the allItems array and update those 3 objects at the same time. Not that big of a deal, but I just would like to, you know, not store copies of objects if I don’t have to. I was hoping there might be a NotifyPropertyChanged(“MyProperty”) similiar to C#/Xaml that I missed while going through the API. This sort of functionality will be most useful to me for future tasks I have on my list due to some of the complexities of our calculated fields and the need to reducing memory consumption as devices get smaller.

    Thanks for any help,
    ~David

  • HTML5 App Cache for .json files?
  • Conceptual problems with IndexedDB (relationships etc.)
  • Collision detection of irregular shapes
  • Change the time of a video when moving the mouse?
  • How do I rotate a single object on an html 5 canvas?
  • three.js 2D Text sprite labels
  • 2 Solutions collect form web for “Kendo UI – Property Changed MVVM”

    Whenever a property of the view model changes, the change event is triggered.

    To make this work in calculated fields, you need to access the relevant fields using ObservableObject.get(). See this section in the documentation.

    2 possible problems.

    1) How do you get items into allitems?

    2) You should also .get("currentIndex") since that is the value that you update in changeCurrentItem

    var currentItem = function(){
        return self.get('allItems')[self.get('currentIndex')];
    }
    

    That should cause viewModel to fire its change event for thecurrentItem calculated field whenever allItems or currentIndex changes.

    If all else fails, you can manually fire the change event by doing:

    viewmodel.trigger("change", { field: "currentItem" });
    viewmodel.trigger("change", { field: "previousItem" });
    viewmodel.trigger("change", { field: "nextItem" });
    

    which would be similar to calling NotifyPropertyChanged("currentItem") in XAML.