Menu
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
415
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.
159
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 + '"]');
}
})
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
