Updating ListView dataSource dynamically

6 posts, 0 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jul 2013

    Posted 02 Aug 2013 Link to this post

    I am attempting to update the listview datasource but have not been having any luck. I had it working creating the kendoMobileListView in my javascript but I am trying to avoid defining the ul #listView as a kendoMobileListView in my javascript.

    <ul id="listView" data-role="listview" data-source="siteDataSource" data-template="sitesListViewTemplate"></ul>

    function (ko, system, SiteDataCachingService, $) {
            var homeViewModel = function () {
            var self = this;
            self.siteDataSource = null;
            
            self.init = function (e) {
                self.siteDataSource = new kendo.data.DataSource({data: SiteDataCachingService.sites});
                $("#listView").data("kendoMobileListView").dataSource.read();
            }

            return self;
        }

        return homeViewModel;
    }

    What am I doing wrong when updating my dataSource that is causing it not to update?

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 05 Aug 2013 Link to this post

    Hello,

    Re-pointing the siteDataSource field to a new datasource will not change the assigned widget datasource. You may consider updating the widget datasource data instead.

    Regards,
    Petyo
    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. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jul 2013

    Posted 12 Aug 2013 Link to this post

    I modified my code as follows:
    if (SiteDataCachingService.sites)
    {
       if(self.siteDataSource)
          self.siteDataSource.data(SiteDataCachingService.sites);
       else
          self.siteDataSource = new kendo.data.DataSource({data: SiteDataCachingService.sites});
    }

    The only problem is unless I specifically set my datasource no changes are made to the UI.
    If I add $("#listView").data("kendoMobileListView").setDataSource(self.siteDataSource); I get items in my listview but this is not desirable.
    Why is it that setting my data-source="siteDataSource" with a viewModel property of self.siteDataSource is not enough to update the UI?
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 14 Aug 2013 Link to this post

    Hello Ryan,

    In general, this is how JavaScript reference assignment works. This pseudo code illustrates the behavior:

    var obj1 = { foo: "foo" };
    var obj2 = { foo: "bar" };
     
    var myModel = { source: obj1 };
    var myWidget = { source: myModel.source };
     
    myModel.source  = obj2;
     
    myWidget.source; // still obj1.
    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ryan
    Ryan avatar
    7 posts
    Member since:
    Jul 2013

    Posted 14 Aug 2013 Link to this post

    It was clear from your original post that I needed to be updating the underlying data and not creating new datasources each time.

    My code is as follows:
    self.siteDataSource = new kendo.data.DataSource({data: []});

    self.loadSiteData = function () {
       if (SiteDataCachingService.sites)
       {
          if(self.siteDataSource)
             self.siteDataSource.data(SiteDataCachingService.sites);
       }
    }

    I am not trying to change the reference of the myModel.source. I am updating the underlying data of the datasource as you suggested. I am still not getting results to populate in my kendoMobileListView. Since I was not able to get the kendoMobileListView data-source to work properly or even using a binding of data-bind="source: siteDataSource" I have changed my solution to use the Knockout listview with no issues. I would still like to use the kendoMobileListView but with the data source not updating properly it is not a viable solution. If it would help I can give you a more complete code base. I have tried to boil the code down to avoid confusion.
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 Aug 2013 Link to this post

    Hello Ryan,

    Thank you for the clarification. Your approach should work, in fact - please check this demo. Clicking the button immediately updates the listview. 

    Regards,
    Petyo
    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