All geek questions in one place

Programmatically select a row in a Kendo AngularJS grid

Can someone help me in choosing a kendo grid line programmatically in angular. I can choose line by line. I cannot determine how to select a row based on one if the contents of a column.

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 get an error in the grid change event. It works great when a row is manually selected.

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

+4
source share
4 answers

You must put your "tr" on id / uid. if you check the element, it will tell you what attribute you have in this row of the table.

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

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

, :

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

, :

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

, id="grid" myGridChange :

$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);
};

, $scope select , . angular JS, , , .

+2

: $scope.myGrid.select(someRow) . , .

, setTimeout:

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

, LoC. , Telerik .

+1

Kendo, , , , . , :

" myGridChange()":

1.

k-on-change="myGridChange()"


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

2.

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


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

- /.

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

Kendo AngularJs. , .

: . :

  • CSS .
  • , , .

-. , , .

0

Source: https://habr.com/ru/post/1533939/

More articles:


All Articles