Adding a single item to ListView

2 posts, 0 answers
  1. Leonardo
    Leonardo avatar
    1 posts
    Member since:
    Mar 2015

    Posted 15 May 2015 Link to this post

    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


  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 19 May 2015 Link to this post

    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
     
    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
Back to Top