Observable Object vs setDataSource

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 03 May 2013 Link to this post

    I wanted to use observable object for my grid, hoping that the performance would be better then what i was getting before.
    but i am not sure if it is. I also am confused about the usage.
    It seams to be pretty much the same thing.

    [I use TypeScript, that's why the code looks a little bit different to pure JS]

    When i add a new item.
    With the old way i did something like this:
    static gridItems: cGridItem[] = [];
     
    gridItems.push(item);
     
    var grid = $("#grid").data("kendoGrid");
    grid.setDataSource(gridItems);
    grid.dataSource.read();
    then i changed it to observable object way like this:

    // Define a DataSource
        static gDataSource = new kendo.data.DataSource({
            data: tsDataManager.gridItems
        });
     
        // Create an observable object.
        static vm = kendo.observable({
            items: tsDataManager.gDataSource
        });
     
    tsDataManager.gDataSource.add(item);
    Can't see any performance differences.

    The weird thing is when i try to edit the items.
    In the old way i did this:
    var grid = $("#vmGrid").data("kendoGrid");
    var item = grid.dataSource.get(id);
    item.TimeStamp = tStamp;
                   item.Close = aInfo.Last;
                   item.Price = aInfo.Last;
                   item.NetChange = aInfo.Net;
                   item.AskPrice = aInfo.AskPrice;
                   item.AskSize = aInfo.AskSize;
                   item.BidPrice = aInfo.BidPrice;
                   item.BidSize = aInfo.BidSize;
                   item.TotalVolume = aInfo.Volume;
     
    grid.refresh();
    i expected not to have to run the grid refresh with the observable object. But it turns out i still had to do it. or it would not show any changes.
    The new code loos like this:
    var grid = $("#vmGrid").data("kendoGrid");
    var item = tsDataManager.gDataSource.get(id);
     
    item.TimeStamp = tStamp;
                    item.Close = aInfo.Last;
                    item.Price = aInfo.Last;
                    item.NetChange = aInfo.Net;
                    item.AskPrice = aInfo.AskPrice;
                    item.AskSize = aInfo.AskSize;
                    item.BidPrice = aInfo.BidPrice;
                    item.BidSize = aInfo.BidSize;
                    item.TotalVolume = aInfo.Volume;
    grid.refresh();
    so it's basically the same thing.
    I don't get what the advantage is here, especially with the editing of the rows.

    Am i using it wrong?
  2. MAGNUS
    MAGNUS avatar
    2 posts
    Member since:
    Apr 2013

    Posted 03 May 2013 Link to this post

    see this:
    http://stackoverflow.com/questions/15579857/how-to-prevent-kendo-ui-grid-from-rebinding-many-times-when-updating-viewmodels
  3. Kendo UI is VS 2017 Ready
Back to Top