Par programmation, la sélection d'une ligne dans le Kendo grille AngularJS

Quelqu'un peut m'aider dans le choix d'un kendo ligne de la grille de programme dans angulaire. Je peux sélectionner une ligne par un numéro de ligne. Je ne suis pas en mesure de trouver un moyen pour sélectionner une ligne basée sur un si son contenu d'une colonne.

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


});

Aussi, lorsqu'une ligne est sélectionnée par programme, j'obtiens une erreur dans ma grille de modifier l'événement. Il fonctionne très bien lorsque la ligne est sélectionnée manuellement.

Voici mon plunker
http://plnkr.co/edit/PpDuSR10xNOxOVirDpfN?p=preview

OriginalL'auteur Young.Programmer | 2014-03-28

  1. 3

    Vous devez baser votre "tr" sur id/uid. si vous inspectez l'élément qu'il vous dira ce qu'attribut dans la ligne de la table. 

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

    OriginalL'auteur akodevs

  2. 2

    Changer votre dataBound de ce, de ce des recherches de l'ensemble de la ligne pour le terme de recherche:

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

    Ou de faire une recherche basée sur une seule colonne, faites ceci: 

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

    Que pour la console d'erreur, ajouter id="grid" sur votre grille sur la page d'index, et de remplacer votre 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);
};

    Vous procurer la console d'erreur parce que la grille n'a pas été jointe $portée sur la commande select dans le databound fonction, ce qui provoque la grille de référence est nul. Je ne sais pas beaucoup sur angular JS, mais j'ai fait un hack de la solution ci-dessus par l'affectation de la grille et l'identification et l'obtention de la grille à partir de ce sélecteur d'ID.

    Merci, est-il un moyen de faire une recherche juste sur une colonne? Si j'effectue la recherche comme vous l'avez suggéré, je pourrais obtenir des lignes avec le texte correspondant dans des colonnes. Et aussi, des valeurs qui ne sont pas exactement égale à terme de recherche (comme Henry Jr, Henry Sr), etc
    Gridchange fonction fonctionne bien lorsque je sélectionne une ligne manuellement, mais si la ligne est sélectionné par programme comme ci-dessus, j'obtiens l'erreur sur la console "Ne peut pas sélectionner de undefined"
    voir si ma réponse mis à jour résout vos problèmes.
    Je souhaite le faire dans angulaire de la manière et ne souhaitez pas utiliser jQuery. Ma grille est une sorte de statique une fois son chargement (pas de tri, filtrage, etc). Donc, la seule façon que je peux penser à faire actuellement, est de vérifier ma source de données et d'obtenir l'indice de la ligne et enfin la sélection. Je voudrais savoir si il y a un efficace/le meilleur moyen de le faire.
    Je comprends que vous voulez rester angulaire de la façon de faire les choses, donc je vais essayer de trouver la bonne façon de le faire. Dans le même temps, vous pouvez utiliser ce qui fonctionne. Même si vous n'avez pas utiliser les sélecteurs, vous êtes, en fait, déjà à l'aide de jQuery car angulaire de lui-même utilise jQuery. Je vais mettre à jour si je trouve une meilleure façon.

    OriginalL'auteur gitsitgo

  3. 1

    même problème ici: appel $champ d'application.myGrid.sélectionnez(someRow) ne fonctionne pas. Le code ne jette pas une exception, mais il se contente de les ignorer l'appel.

    Pour le faire fonctionner, je l'ai mis dans un setTimeout:

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

    Il n'est pas très élégant, mais ça fonctionne sans trop de LoC. J'espère Telerik sera corrigé dans une future version.

    OriginalL'auteur David Urting

  4. 0

    Programmeur

    À l'aide de la version de Kendo que vous utilisez, il est probablement pas possible. À l'aide de la dernière version, vous pouvez le faire:

    À "améliorer myGridChange()":

    1. changement

    k-on-change="myGridChange()"

    à

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

    2. changement

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

    à

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

    Fondamentalement, vous devez enregistrer la ligne sélectionnée quelque part dans votre modèle /contrôleur.

    De programmation pour sélectionner une ligne

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

    C'est un mélange de Kendo code avec AngularJs. Parfois, nous devons le faire, mais il faut éviter autant que possible.

    La réponse rapide, il n'y a aucun moyen de le faire. Ce que vous avez à faire est de:

    1. Ajouter le style CSS à la ligne.
    2. Modifier votre modèle de rappeler la ligne qui a été sélectionné par programme.

    La réponse longue est ici sur ma page web. Oui je suis passé par la même douleur que vous avez fait.

    OriginalL'auteur Gerard Setho