Pager next, previous page actions don't affect treeView

7 posts, 1 answers
  1. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 10 Sep 2018 Link to this post

    Hello, 

    I have a strange situation where I instantiate TreeView and its Pager, but when I hit pager to switch to the page 2, for example, pager reacts, and changes page, description which items are displayed (13-14 of 14), but TreeView contents don't follow and first page remains displayed. Pager DataSource is set to pageSize:12.

    Only thing that I do differently from your example is that I initially setDataSource to default empty data source, then on click event on the form, I use it again to set different data source.

    I also tried setting data, total under schema manually, but no success.

    Here is my code extract for instantiation and change..

    function handleTemplateSelector() {
        var listView = $("#listView").data("kendoListView"); 
        var pagi = $("#pager").data("kendoPager");
        pagi.setDataSource(vm.getNewDatasource());
        listView.setDataSource(vm.getNewDatasource());
    }

    Any suggestions would be welcomed.

    Thanks and regards,

    Vedad

  2. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 10 Sep 2018 in reply to Vedad Link to this post

    I Apologize, This should have gone under ListView Section.

    Can someone Please move it or close it. 

    I am sorry for the mess.

  3. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 10 Sep 2018 Link to this post

    I found the solution. 

    Apparently, setDataSource doesn't like to receive a function as parameter. It is interesting that dataSource produced by function is assigned properly to the both ListView and Pager, but for some reason interconnection between two is not working in this case.

    I am not a 100% sure, but I have feeling that reason is that two function calls don't refer to the same dataSource.

    Sorry for spamming but I just wanted to share solution if someone needs it. It would be great if you could put it to the proper branch.

     

    Cheers and sorry once again.

    Regards, Vedad

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 12 Sep 2018 Link to this post

    Hi, Vedad,

    We have moved the thread in the Kendo UI ListView as requested.

    The Kendo UI ListView setDataSource() method expects a data source as a parameter:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/setdatasource

    So, in theory, it should work in case a data source instance is returned from the function:

    vm.getNewDatasource = function(){
      var ds = new kendo.data.DataSource({
         transport: {
          read: {
          }
        },
      });
       
      return ds;
    }

    I tested with this example and it works just fine:
    listView.setDataSource(getDs());

    https://dojo.telerik.com/@bubblemaster/useqeBen

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 12 Sep 2018 in reply to Alex Hajigeorgieva Link to this post

    Hello Alex,

     

    Thanks for your response. You are right in terms of having data source assigned as result of the function. But if you create a datasource directly within function, then it doesn't work.

    Following Dojo displays issue: https://dojo.telerik.com/OGUtiYUY

    However, I fixed issue by simply instantiating var DS = getDs(); and passing it to the setDataSource (DS).

    Previous example don't work because although the same function is executed, it still creates two datasources, and there is no binding between pager and listView.

    Thank you very much and best regards,

    Vedad

  6. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1054 posts

    Posted 13 Sep 2018 Link to this post

    Hi, Vedad,

    You are correct when the getDs() function returns a new data source instance. This would not be the case if it returns a data source instance that is declared in the scope:

    vm.ds = new kendo.data.DataSource({
      transport: {
        read: {
          dataType: "jsonp"
        }
      },
      pageSize: 21
    });
     
    vm.getDs = function(){
      return vm.ds;
    }

    In addition to that, the first data source is not bound to the pager - note that the pager reads there are 0 records initially. I would recommend using a data source instance for the pager initially and then changing it to another data source:

    https://dojo.telerik.com/@bubblemaster/iSuLIFUx

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Vedad
    Vedad avatar
    86 posts
    Member since:
    Jun 2018

    Posted 17 Sep 2018 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex, thanks a lot for the answer.

    What you described is the approach I eventually taken and it worked :). Only it took me a little to figure out "new" issue within the function. 

    Thanks for your help and time.

    Best regards,

    Vedad

Back to Top