CODEWITHSUNDEEP
asp.net-mvc-4kendo-uikendo-listview
Carlos Mendieta
Carlos Mendieta

Reputation: 872

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

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.

Upvotes: 0

Views: 588

Answers (1)

Petur Subev
Petur Subev

Reputation: 20193

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();

Upvotes: 1

Related Questions