Programmatically selecting a row in Kendo grid AngularJS

Question

Can someone help me in selecting a kendo grid row programmatically in angular. I can select a row by row number. I'm unable to figure out a way to select a row based on one if its column's contents.

HTML:

 <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div kendo-grid="myGrid" k-options="myOptions"  k-selectable="'row'" k-on-change="myGridChange()"></div> 
  </body>

JS:

var app = angular.module('plunker', ['kendo.directives']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.myOptions = {
    columns:[
      {
        field: 'ID'
      },
      {
        field: 'FirstName'
      },
      {
        field: 'LastName'
      },
      ],
      dataSource: [
            {ID:139, FirstName:'John', LastName:'Doe'},
            {ID:250, FirstName:'Jane', LastName:'Smith'},
            {ID:376, FirstName:'Henry', LastName:'Rocks'}
            ],
      dataBound:function(e) {
              var grid = e.sender;
              grid.select("tr:eq(2)");
              grid.select("tr[FirstName='Henry'])");  // This doesn't work
      }
  };

  $scope.myGridChange = function(){
     var selectedRows = $scope.myGrid.select();             // This doesn't work
     console.log($scope.myGrid.dataItem(selectedRows[0]));
  };


});

Also, when a row is selected programmatically, I'm getting an error in my grid change event. It works fine when row is selected manually.

Here is my plunker http://plnkr.co/edit/PpDuSR10xNOxOVirDpfN?p=preview

gitsitgo · Accepted Answer · 2014-03-28 21:25:58Z

3

Change your dataBound to this, this searches the whole row for that search term:

  dataBound:function(e) {
        var searchTerm = "Henry";
        var grid = e.sender;  
        grid.select("tr:contains('" + searchTerm + "')");
  }

Or to search based on a single column only, do this:

  dataBound:function(e) {
    var grid = e.sender;
    $.each(grid.tbody.find('tr'),function(){
      var model = grid.dataItem(this);
      if(model.FirstName=="Henry"){
        grid.select(this);
      }                          
    });
  }

As for your the console error, add id="grid" onto your grid on the index page, and replace your myGridChange with this:

$scope.myGridChange = function(){
    var grid = $scope.myGrid;
    if(!grid)
      grid = $("#grid").data("kendoGrid");
    var selectedRows = grid.select(); 
    var data = grid.dataItem(selectedRows[0]);
    console.log("The name is " + data.FirstName + ", "+ data.FirstName + " " + data.LastName);
};

You were getting the console error because the grid was not attached to $scope on the select command in the databound function, causing the grid reference to be null. I don't know much about angular JS, but I did a hack solution above by assigning the grid and ID and then getting the grid from that ID selector.

edited Mar 28, 2014 at 21:25

answered Mar 28, 2014 at 19:38

gitsitgo

6,8193 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Young.Programmer Over a year ago

Thanks, is there a way to do a search just on one column? If I perform search as you have suggested, I might get rows with the text matching in unintended columns. And also values that are not exactly equal to my search term (like Henry Jr, Henry Sr), etc

Young.Programmer Over a year ago

Gridchange function works well when I select a row manually, but if the row gets selected programmatically as above, I get error on console "Cannot select of undefined"

gitsitgo Over a year ago

@Young.Programmer see if my updated answer solves your problems.

Young.Programmer Over a year ago

I wish to do it in angular way and don't want to use jQuery. My grid is kind of static once its loaded (no sorting, filtering, etc). So, the only way I can think of doing it right now, is by checking my datasource and getting the index of the row and finally selecting. I would like to know if there is an efficient/better way of doing this.

gitsitgo Over a year ago

@Young.Programmer I understand that you want to stick to angular way of doing things, so I'll try to find the proper way of doing it. In the mean time, you can use what works. Even if you don't use selectors, you are in fact already using jQuery because angular itself uses jQuery. I`ll update if I find a better way.

|

akodevs · Accepted Answer · 2014-08-27 21:12:19Z

3

You should base your "tr" on id/uid. if you inspect the element it will tell you what attribute you have in that table row.

                dataBound:function(e) { 
                  var grid = e.sender;
                  var data = grid._data; //this is your array of data. make sure you check what's in your object array. log it to see.

                  data.forEach(function(entry) { 
                     if($scope.name === entry.name){ 
                        grid.select('tr[data-uid="' + entry.uid + '"]');  
                     }  
                  })
                },

answered Aug 27, 2014 at 21:12

akodevs

713 bronze badges

Comments

David Urting · Accepted Answer · 2015-10-13 10:29:18Z

1

same issue here: calling $scope.myGrid.select(someRow) does not work. The code doesn't throw an exception but it simply ignores the call.

To make it work I put it in a setTimeout:

setTimeout(function () {
  $scope.grid.select(someRow);
});

It is not elegant, but it works without too much LoC. I hope Telerik will fix this in a future release.

answered Oct 13, 2015 at 10:29

David Urting

4182 silver badges8 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Programmer

Using the version of Kendo that you're using, it's probably not possible. Using the latest version, you can do this:

To "improve myGridChange()":

1. change

k-on-change="myGridChange()"

to

k-on-change="myGridChange( dataItem )"

2. change

$scope.myGridChange = function(){
  // some code
}

to

$scope.myGridChange = function( dataItem ){
  // dataItem will contain the row that was selected
}

Basically you should save the selected row somewhere in your model / controller.

To programmatically select a row

$scope.myGrid.select(); // this will not work.

This is mixing Kendo code with AngularJs. Sometimes we have to do it, but let's avoid it as much as possible.

The quick answer is there is no way to do it. What you have to do is:

Add the CSS style to the row.
Modify your model to remember which row was programmatically selected.

The long answer is here on my webpage. Yes I went through the same pain you did.

Collectives™ on Stack Overflow

Programmatically selecting a row in Kendo grid AngularJS

4 Answers 4

6 Comments

Comments

Comments

To "improve myGridChange()":

1. change

2. change

To programmatically select a row

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

To "improve myGridChange()":

1. change

2. change

To programmatically select a row

Comments

Your Answer

Sign up or log in

Post as a guest

Related