Daniel Groh Daniel Groh - 1 year ago 262
AngularJS Question

kendo ui listview with angular - selectable items

I have a kendo ui ListView and I would like to make the items selectable (single selection). I haven't found any sample on the internet with angular.

What I have to do is to set a style for the selected item and also do some calls based on the selected item.

This is my HTML:

<div class="list-group no-radius no-border no-bg m-b-none"

<a class="list-group-item p-l hover-anchor b-a no-select ng-scope" k-template>

This is my JavaScript:

vm.publishPositionsSource = new kendo.data.DataSource({
dataType: "aspnetmvc-ajax",
transport: {
read: {
url: "publish/getall",
type: "GET"
schema: {
type: "json",
data: "Data",
total: "Total",
model: {
id: "Id"

vm.publishPositionsSourceOptions = {
dataBound: function (e) {
// Set selected style for the first item when loaded

Any idea? I wonder if there is a way of doing that instead of using

Answer Source

To enabled single selection on a kendoUI listview, add selectable: "Single" to your listview-config. You can also set the selected item programmatically by using the listview's select method.

When you put it all together it might look like this:

$scope.listViewOptions = {
    dataSource: $scope.myDataSource,
    selectable: "Single",
    dataBound: function(event) {
        /* Select the first item here */
    change: function(event) {
        /* Do something with the selected item */

I've also created a working dojo (it's not using angular though).