how do you bind the MVC 4 data result of a function to a kendo ui ListView?

Question

I have the result of a jsonresult method that returns a bunch of data including a list of images. I'd like to use part of the result (the list of images) to be the datasource for a ListView. The data comes back from the jsonresult method fine. If I use alert(data.TravelerImages[x]) in JS, I get back what I expect; however when I try to use data.TravelerImages as a datasource, i seem to get nothing.

The order of operations is as follows:

1. index page loads the view with the jasonresult data populating fields - This works.
2. I check that the list of images is populated with correct data - this works.
3. I use the list of images as a datasource for the ListView - this does not work.

Here is my ListView, notice I set no datasource initially because I can't until the list of images return from the jsonresult method:

        <div class="divTraveler_Image">
        @*<img id="TravelerImage" class="Traveler_Image" />*@
        @(Html.Kendo().ListView<DataSourceResult>()
                .Name("lvTravelerImages")
                .TagName("divImageListView")
                .ClientTemplateId("template")
                .Pageable()
                .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))

            )
        </div>

Here's where I am attempting to bind to the ListView (this occurs in the success function of jquery method:

 var lvTravelerImageData = new kendo.data.DataSource({ data: data.TravelerImages });

  //alert(data.TravelerImages[0]) // works great

  $('#lvTravelerImages').kendoListView({
       dataSource: lvTravelerImageData,
    });
  lvTravelerImageData.read();

This part shows nothing except the empty ListView. Any help is appreciated. Thanks a bunch.

Answer 1

You are initializing the ListView for second time instead of getting the client object. You should get the object like follows and use the setDataSource method.

e.g.

var lvTravelerImageData = new kendo.data.DataSource({ data: data.TravelerImages });

  //alert(data.TravelerImages[0]) // works great

  $('#lvTravelerImages').data("kendoListView").setDataSource(lvTravelerImageData);

  lvTravelerImageData.read();