【问题标题】：Programmatically selecting a row in Kendo grid AngularJS以编程方式在 Kendo 网格 AngularJS 中选择一行
【发布时间】：2014-03-28 15:29:24
【问题描述】：

有人可以帮助我以角度编程方式选择剑道网格行吗？我可以按行号选择一行。我无法找到一种方法来根据其列的内容选择一行。

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


});

另外，当以编程方式选择一行时，我的网格更改事件中出现错误。手动选择行时效果很好。

这是我的笨蛋 http://plnkr.co/edit/PpDuSR10xNOxOVirDpfN?p=preview

【问题讨论】：

标签： angularjs kendo-grid

【解决方案1】：

将你的 dataBound 更改为这个，这会在整个行中搜索该搜索词：

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

您收到控制台错误，因为网格未附加到数据绑定函数中 select 命令上的 $scope，导致网格引用为空。我对 Angular JS 了解不多，但我通过分配网格和 ID，然后从该 ID 选择器获取网格，在上面做了一个 hack 解决方案。

【讨论】：

谢谢，有没有办法只在一个列上进行搜索？如果我按照您的建议执行搜索，我可能会在意外列中获得文本匹配的行。还有不完全等于我的搜索词的值（如 Henry Jr、Henry Sr）等
当我手动选择一行时，Gridchange 函数运行良好，但如果像上面那样以编程方式选择该行，我会在控制台上收到错误“无法选择未定义”
@Young.Programmer 看看我更新的答案是否能解决你的问题。
我希望以有角度的方式来做，不想使用 jQuery。我的网格在加载后是一种静态的（没有排序、过滤等）。所以，我现在能想到的唯一方法是检查我的数据源并获取行的索引并最终选择。我想知道是否有一种有效/更好的方法来做到这一点。
@Young.Programmer 我知道你想坚持有角度的做事方式，所以我会尝试找到正确的做事方式。同时，您可以使用有效的方法。即使您不使用选择器，实际上您已经在使用 jQuery，因为 Angular 本身使用 jQuery。如果我找到更好的方法，我会更新。

【解决方案2】：

您的“tr”应该基于 id/uid。如果您检查元素，它会告诉您该表行中的属性。

                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 + '"]');  
                     }  
                  })
                },

【讨论】：

【解决方案3】：

同样的问题：调用 $scope.myGrid.select(someRow) 不起作用。该代码不会引发异常，但它只是忽略调用。

为了让它工作，我把它放在一个 setTimeout 中：

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

它并不优雅，但它可以在没有太多 LoC 的情况下工作。我希望 Telerik 能在未来的版本中解决这个问题。

【讨论】：

【解决方案4】：

程序员

使用您正在使用的剑道版本，可能不可能。使用最新版本，您可以这样做：

要“改进 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 样式添加到行。
修改您的模型以记住以编程方式选择了哪一行。

我的网页上的长答案是here。是的，我经历了和你一样的痛苦。

【讨论】：