CODEWITHSUNDEEP
angularjskendo-ui
julius_am
julius_am

Reputation: 1527

How do I use kendo ui listview with angularjs

Does anyone know where can i find an example of kendo ui listview with angularjs? I was able to find examples for grid and drop down list. But what about all other controls? no example...

Upvotes: 8

Views: 6654

Answers (3)

Khaled
Khaled

Reputation: 96

You can find the official Telerik listview angular example here: http://demos.telerik.com/kendo-ui/listview/angular

As to the example of Atanas Korchev, I would rather do it like this. Here you can change your listview's settings in the listOptions and you can edit your template with angular directives without using jQuery.

<div ng-controller="MyController">    
    <div>Products: {{products.total()}}</div>
    <div kendo-list-view 
         k-options="listOptions"
         k-on-change="onListChange()"
         ng-show="listVisible">

        <div k-template>
            {{ dataItem.name }}
        </div>
    </div>
</div>
<script>
    function MyController($scope) {
        $scope.listOptions = {
            dataSource: new kendo.data.DataSource({ 
                data: [
                    { id:1, name:'Tennis Balls', department:'Sports'},
                    { id:2, name:'Basket Balls', department:'Sports'},
                    { id:3, name:'Oil', department:'Auto'},
                    { id:4, name:'Filters', department:'Auto'},
                    { id:5, name:'Dresser', department:'Home Furnishings' }
                ]
            }),
            selectable: true
        };

        $scope.onListChange = function() {
            // do something
        }

        $scope.listVisible = true;
    }
</script>

Upvotes: 2

James
James

Reputation: 21

One key thing to remember, if you use the kendo template, when binding with Angular, you have to bind to dataItem. So it would be {{dataItem.name}} not {{name}}. If you use Kendo templating, it will be just #= name #. Small but tricky difference. Also do not forget one way binding as typically you do not want 2-way for templates, so {{::dataItem.name}}.

Upvotes: 1

Atanas Korchev
Atanas Korchev

Reputation: 30671

The following should work:

  <div ng-controller="MyController">    
    <div>Products: {{products.total()}}</div>
    <div kendo-list-view k-data-source="products" k-template="template">
    </div>
    <script id="template" type="text/x-kendo-template">
      <div>
         #= name #
      </div>
    </script>
  </div>

<script>
function MyController($scope) {
   $scope.products = new kendo.data.DataSource({ 
     data: [
        { id:1, name:'Tennis Balls', department:'Sports'},
        { id:2, name:'Basket Balls', department:'Sports'},
        { id:3, name:'Oil', department:'Auto'},
        { id:4, name:'Filters', department:'Auto'},
        { id:5, name:'Dresser', department:'Home Furnishings' }
    ]
  });
  $scope.template = $("#template").html();
}
</script>

Here is a live demo: http://jsbin.com/ODElUfO/69/edit

Upvotes: 5

Related Questions