Kendo ListView is not showing/binding data

Question

I have Kendo UI ListView like following:

  <div ng-controller="patientSearchCtrl">
    <div kendo-list-view id="listView" k-data-source="source">
        <div class="product" k-template>
            <h3>{{ dataItem.First_Name }}</h3>
            <p>{{ dataItem.Last_Name }}</p> 
        </div>
    </div>
    <div kendo-pager k-data-source="source"></div>
</div>

And following AngularJS code:

    angular.module("alertApp", ["kendo.directives"])
        .controller("patientSearchCtrl", function ($scope, $http) {
            var product;
            $http.get('http://localhost:1242/Api/PatientSearch?firstName=Bar&lastName=wells&pageIndex=0&pageSize=10&sortingOrder=FIRST_NAME').
              success(function (info, status, headers, config) {                     
                  product = info[0]["Table"];
                  console.log(product); 
              }).
              error(function (data, status, headers, config) {
                  console.log('Error: ' + data);
              });
            $scope.source = new kendo.data.DataSource({
                data: product,
                pageSize: 1
            });
        });

console.log(product); is logging data. In Chrome it looks like:

[Object]
      0: Object
              DOB: "07-29-1969"
              First_Name: "Barbara"
              Last_Name: "Wells"
              PatientKey: 3
              RowIndex: 1

What is wrong I'm doing here?

I'm not sure how kendo list view works, but try to assign an empty array to 'product' variable, then push the data to that array in $http success call back. — Dhana Krishnasamy, Mar 13 '15 at 10:43
check out this thread_ http://stackoverflow.com/questions/19904048/how-to-populate-kendo-grid-with-an-angular-http-get-call It describes how to populate the grid with angularjs $http get. — opp, Mar 13 '15 at 14:05

score 0 · Answer 1 · answered Jun 10 '15 at 10:39

Try changing

$scope.source = new kendo.data.DataSource({
                data: product,
                pageSize: 1
            });

to

$scope.source = {
                data: product,
                pageSize: 1
            };

or

$scope.source = product;

To provide complete options. Use below code

<div kendo-list-view k-options="source "></div>

    $scope.source = {
              dataSource: products,
              template: "<div>#:First_Name#</div>"
          };

Kendo ListView is not showing/binding data

1 Answers1