Please find the ng grid example in plunker
http://plnkr.co/edit/CncDWCktXTuBQdDVfuVv?p=preview
It will allow user to select only one row but there will be one selected row at all time. I want to deselect all rows.
ng-grid has keepLastSelected option.
Try:
keepLastSelected: false in gridOptions. This will toggle selection.
Example
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
keepLastSelected: false
};
The following works for me:
Plunker
First you need store gridApi:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
};
Then you can use:
$scope.unSelectAll = function(){
$scope.gridApi.selection.clearSelectedRows();
}
simply :
$scope.gridApi.selection.clearSelectedRows()
For Selecting ALL Rows We Use ::
$scope.GridOptions.api.selectAll()
Here $scope.GridOptions is your own grid data
And For Deselecting All Rows We use::
$scope.gridOptions.api.deselectAll();
Here (.api) is file and you get this file from
(ag-grid.js) file from internet
Url:https://cdnjs.com/libraries/ag-grid
Related
I am using UI grid v3.0.0 in my project. Recently I changed my code to filter grid using drop down list value. After this change, UI grid getting blank when I filter grid multiple times. This is intermittent issue and I am not getting any javascript error. when UI grid get blanked after applying filter, UI grid will remain blank till user move scroll bar of UI grid.
I am using below Grid options.
$scope.options = {
enableColumnMenus: false,
enableSelectAll: true,
enableFiltering: true,
enableHorizontalScrollbar:0,
enableRowHeaderSelection: false,
enableRowSelection: true,
data : [],
showSelectionCheckbox: true,
selectionRowHeaderWidth: 25,
rowHeight: 25,
columnDefs : $scope.columnDefs
};
$scope.options.onRegisterApi = function (gridApi) {
$scope.options = gridApi;
gridApi.selection.on.rowSelectionChanged($rootScope , function(gridApi) {
$scope.options.selected = gridApi;
});
I am also calling below grid api for refresh after filering ui grid array .
$scope.options.core.refresh();
But still it is not working. If anyone can give me the hint about how this problem can be solved, it would me much appreciated. Thanks.
I have never been able to get the core.refresh to work for me. I actually use a workaround. You can try it to see if it helps with this issue.
create Function:
$scope.refresh = false;
function refresh () {
$scope.refresh = true;
$timeout(function () {
$scope.refresh = false;
}, 0);
};
Put an ng-if on your grid div:
<div ng-if="!refresh" ui-grid="gridOptions" class="grid"></div>
Then call refresh() in your controller where/when you want to refresh the grid.
I hope this helps!
You need to set scroll position after refresh like below :
$scope.options.core.refresh();
$scope.options.core.scrollTo($scope.data[0], $scope.columnDefs[0]);
You can use $filter of angular to filter your kendo grid dataSource.
You can take the reference from following code, let me know anything else you required.
var ds = $filter('filter')($scope.grdDataSource.dataSource.data, $scope.searchText);
$scope.kendoGridOptions.dataSource.data = ds;
I am using ui-grid in my project, I need to show the selected row index value in pagination part.
For example, there are total 100 items in my grid, it is divided into 4 pages, each page has 25 items. If I select 10th row from a page, I need show 10 of 25 items
I am using :
HTML
<div ui-grid="gridOptions" ui-grid-selection > </div>
controller:
$scope.gridOptions ={
data:'data',
coulmnDef: $scope.coulmnDef,
paginationPageSizes: [25, 50, 75,100],
paginationPageSize: 25,
};
could you please help me any one, Thanks in advance
You can get the selected rows by listening for rowSelectionChanged event, after which you can use the getSelectedRows method on gridApi's selection object. To do so, add the following to your gridOptions object:
$scope.selection = [];
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
modifierKeysToMultiSelect: true,
multiSelect: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function () {
$scope.selection = gridApi.selection.getSelectedRows();
});
}
};
Now everytime the selection changes, the selection array in your scope gets updated of which you can take the length property which gives you the selection count. Hope that helps, good luck!
Reference: http://ui-grid.info/docs/#/tutorial/210_selection
I have a grid displaying data. I want to be able to route to a new view with a click of a grid row. Right now I am unable to even register a row click/selection. I have tried in my grid definition:
onRegisterApi: function (gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.onRowSelectionChanged($scope, function (rows) {
$scope.mySelections = gridApi.selection.getSelectedRows();
});
},
with a call to mySelections in the html:
<p>{{mySelections}}</p>
this results in error : Cannot read property 'on' of undefined. However, I can't tell what is 'undefined'.
I have also tried a separate function:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
alert(row.isSelected);
//$scope.mySelections = gridApi.selection.getSelectedRows();
});
};
but it returns the same error.
I have added ui.grid and ui.grid.selection to my angular.module. I would love to find an actual example of using rowselect to link to a new page, but I have to find anything.
Cannot read property 'on' of undefined.
Suggests that the selection property is not available on your gridApi object, i'de double check if you really added the dependencies the right way:
angular.module('app', [
'ui.grid',
'ui.grid.selection'
]);
Next, calling gridApi.selection.on.onRowSelectionChanged won't work because the method is called rowSelectionChanged not onRowSelectionChanged. You've got that right in your second example. For the rest your code seems ok, perhaps there's something wrong in the rest of your grid definition. Here's one that works with an example using ui.router for view change:
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (rows) {
var selection = gridApi.selection.getSelectedRows();
$state.go('item', {item: selection[0]});
});
}
};
http://plnkr.co/edit/Rs9M6pJd83vK8syr3W9g?p=preview
Don't forget to add the "ui-grid-selection" attribut to your DIV :
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ... ></div>
I would like to be able to set/update a value in my controller that is then filtered in the grid. Currently, the changes to the filter aren't updated until I type into the grid which then triggers the filterChanged event. Any idea of how I can automatically filter the data in my grid config or at least do a hard refresh?
Thank you for the help.
Here's a slightly modified Plunker from the AngularJS UI Grid website.
http://plnkr.co/edit/pgX31NT3Ry3XllZ3JO2B?p=preview
Here's my current filter definition in the columnDefs section:
{ field: 'company', filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return cellValue == scope.term;
}
When you define your gridOptions, set the gridAPI variable with the following:
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
And then in your update function, run the following to re-evaluate the filter condition:
$scope.gridApi.grid.refresh()
As #Conan mentioned, a breaking update was released and this works only in
There was a bug and this doesn't work on 3.2.x. Tested and works in 3.1.x and 4.x
http://plnkr.co/edit/YbgV9YZrWCZE4cc3qGru?p=preview
I am using ng-grid of AngularUI-Grid, and having a checkbox for row selection. It gives me a checkbox in header too.
If user selects checkbox in header, I want some event/method to trigger in $scope, is there any way? I thought by specifying :- checkboxHeaderTemplate , I would get toggleSelectAll() method would get called. but it is not happening. Any clue?
Also is there any Event or method of $scope which can get called on multiple row selection or un-selection.
$scope.gridOptions = {
data: 'dataList',
enablePaging: true,
showFooter: true,
showFilter: true,
totalServerItems: 'totalVehicles',
pagingOptions: $scope.VehpagingOptions,
filterOptions: $scope.VehfilterOptions.filterText,
showSelectionCheckbox: true,
beforeSelectionChange: $scope.beforeVehicleSelectionChange,
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-show="multiSelect" ng-model="allSelected" ng-change="toggleSelectAll(allSelected, true)"/>'
};
I found that ng-grid sends array of item to afterSelectionChange if multiple rows are being selected. I used this instead (this solved my problem):-
$scope.afterVehicleSelectionChange = function (rowItem, event) {
if (rowItem.length) {
_.each(rowItem, function (item) {
updateItemOnSelectionChange(item);
});
} else {
updateItemOnSelectionChange(rowItem);
}
return true;
};