Adding a single item to ListView

[Leonardo]

Hi, I’m encountering a problem with a logic I need to implement using the Listview.
This is the scenario:

I first load a batch of data from a REST service, with the data I recover I create a DataSource.

After having the DataSource I create a ListView from that.

Since I can recover only a batch of data at a time from a larger set, I implemented a custom way of using the listview as an infinite scroll, and it works pretty well.
The way I’m doing that is recovering the next batch of data, adding the data to the array, recreate the data source with the new array and than using the function setDataSource on the ListView lo load the new data.

This works wonders, since the scrolling does not get modified, but we are encountering a problem since setting the data source redraws even the old content of the first batch, deleting css we add when selecting an element.

For bypassing this problem I tried on using the function add() on the listView, to not redraw the past element and just add the new element of the batch one byone.
But when trying to use the function I couldn’t find the type of object that’s required to pass to the function.

I usually get the error with the following stacktrace, contentImage is one of the placeholder in the template

Uncaught ReferenceError: contentImage is not defined(anonymous function) @ VM785:1
n.ui.DataBoundWidget.extend.refresh @ kendo.all.min.js:31
b.extend.proxy.b.isFunction.i @ jquery.min.js:3
i.extend.trigger @ kendo.all.min.js:9
ht.extend._process @ kendo.all.min.js:11
ht.extend._change @ kendo.all.min.js:11
b.extend.proxy.b.isFunction.i @ jquery.min.js:3
i.extend.trigger @ kendo.all.min.js:9
ht.extend.splice @ kendo.all.min.js:11
ht.extend.insert @ kendo.all.min.js:11
n.ui.DataBoundWidget.extend.add @ kendo.all.min.js:31

Uncaught ReferenceError: contentImage is not defined(anonymous function) @ VM785:1
n.ui.DataBoundWidget.extend.refresh @ kendo.all.min.js:31
b.extend.proxy.b.isFunction.i @ jquery.min.js:3
i.extend.trigger @ kendo.all.min.js:9
ht.extend._process @ kendo.all.min.js:11
ht.extend._change @ kendo.all.min.js:11
b.extend.proxy.b.isFunction.i @ jquery.min.js:3
i.extend.trigger @ kendo.all.min.js:9
ht.extend.splice @ kendo.all.min.js:11
ht.extend.insert @ kendo.all.min.js:11
n.ui.DataBoundWidget.extend.add @ kendo.all.min.js:31

An example of the object i use to create the data source is ( I just removed how I populate the data)

sourceData[i] = {
  contentId : “…”,
  contentName : “…”,
  contentDescription : “…”,
  contentImage : "…",
  contentOwner : “…”,
  contentAuthor : “…”,
  contentViewCounter : “…”,
  contentLastView : “…”,
  contentLastUpdate : “…”,
  contentType : “…”,
  contentCreationDate: “…”,
};

sourceData[i] = {
    contentId : "...",
    contentName : "...",
    contentDescription : "...",
    contentImage : "...",
    contentOwner : "...",
    contentAuthor : "...",
    contentViewCounter : "...",
    contentLastView : "...",
    contentLastUpdate : "...",
    contentType : "...",
    contentCreationDate: "...",
};

I create an array of object of this type and then pass that to the data param of the dataSource used like this:

 

this.widgetDataSource = new kendo.data.DataSource({
    data: this.completeSourceData,
    ...
})

Any help on how to correctly create an object to pass to the add function, or an alternative solution for the problem will be really helpful.

 

Thanks in advance,

Leonardo

[Alexander Popov]

Hi Leonardo,

The code and stack traces you shared do not provide enough information for us to determine what exactly goes wrong. Using the add method however, will still cause the ListView to be redrawn, as would any action that triggers the DataSource's change event (see example).

Regards,
Alexander Popov
Telerik