This is a migrated thread and some comments may be shown as answers.
Pager next, previous page actions don't affect treeView
6 Answers 9 Views
This is a migrated thread and some comments may be shown as answers.
Vedad
Top achievements
Rank 1
Vedad asked on 10 Sep 2018, 02:26 PM

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

6 Answers, 1 is accepted

Sort by
0
Vedad
Top achievements
Rank 1
answered on 10 Sep 2018, 03:50 PM

I Apologize, This should have gone under ListView Section.

Can someone Please move it or close it. 

I am sorry for the mess.

0
Vedad
Top achievements
Rank 1
answered on 10 Sep 2018, 04:52 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 12 Sep 2018, 12:36 PM
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.
0
Vedad
Top achievements
Rank 1
answered on 12 Sep 2018, 12:47 PM

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

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 13 Sep 2018, 10:17 AM
Hi, Vedad,

You are correct when the () 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 and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vedad
Top achievements
Rank 1
answered on 17 Sep 2018, 06:53 AM

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

Asked by
Vedad
Top achievements
Rank 1
Answers by
Vedad
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or