ng-grid Event for Selection checkbox on header - angularjs

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

Related

UI Grid getting blank when filtering data using external filter

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;

How to get the rowcol object of a cell DOM element selected in the grid of UIGrid?

I'm using UIGrid.
How can I get the row-column object of a selected cell's DOM element in the grid?
$(".ui-grid-cell-focus") this gives you the HTML DOM of the currently focused/selected cell. I'm trying to get the uiGrid row-col object using this HTML DOM value. I dont know how to!
Please try as shown below.
js
var editCellTemplate = '<div class="ngCellText"><button class="btn btn-icon-only
green height-28" ng-click="grid.appScope.editProperty(row.entity.id)"><i
class="fa fa-edit"></i></button></div>';
vm.yourGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: 'id',
field: 'id',
width: 240,
},
{
name: 'Edit',
cellTemplate: editCellTemplate,
width: 40,
}
],
data: []
};
//edit property
vm.editProperty = function (id) {
// your logic here
};
You could try in your gridOptions declaration:
onRegisterApi: function(gridApi){
gridApi.cellNav.on.navigate($scope,function(newRowcol, oldRowCol){
console.log(newRowcol);
});
}
Just be sure to inject ui.grid.cellNav into your angular module and ui-grid-cellNav in your grid directive view. newRowcol is your row-col object

Show selected row count in pagination in ui-grid

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

Multiple Grids using ngIf and ngRepeat will not update pagination controls and footer from server side paging

We have an issue we are facing where we have tabs of grids and different gridOptions per grid. When tabbing from grid to grid, the data updates correctly, but the footer does not update the total items properly. We have the ui-grid directive wrapped in our own custom directive so that we can pass different options to each of the tabs, although I've removed some of that code for the purpose of reporting here.
The first tab always works just fine with everything. But none of the other tabs do. Once going to the tab, clicking on a different tab, and back again, the footer seems to update just fine on the second time around... I thought it might have something to do with onRegisterApi not being set correctly on the 2 - x tabs because I did notice some weirdness there and that's why even after my extend of the default options, I have the line scope.gridOptions.onRegisterApi = setGridApi; just to make sure that gets run. If I don't add this line, then the other tabs do not call this method.
I've even tried not using ngIf and ngRepeat and just using a watch on the gridOptions to update a single grid with different data, but still had the same issue. ngShow works great, except that it loads all of the grids all at once on first page load and I can't have that.
Am I doing something wrong or is this an issue I've found? (I know pagination is still in "Alpha")
I've searched stack overflow as well as ui-grid's github issues and have found some similar issues regarding the footer, but nothing that has really been relevant. Most of the issues I found were about the grid not being drawn correctly until the browser is resized, and this is not that issue. I've also posted this same issue on their github: https://github.com/angular-ui/ui-grid/issues/4364
I'm using Angular 1.4.4 and angular-ui-grid 3.0.4 (tried 3.0.6 as well, but same issue)
Here's a plnkr: http://plnkr.co/edit/4XWarYb9xlDnadpTC0kG?p=preview
subTab.html:
<div class="panel panel-default padding-xlg">
<ul id="subtabs" class="list nav-detail nav-detail-tabs">
<li data-ng-repeat="tab in tabs" data-ng-class="getTabClasses(tab)">
{{tab.heading}}
</li>
</ul>
<div data-cs-grid data-ng-repeat="tab in tabs" data-grid-options="tab.gridOptions" data-ng-if="isActiveTab(tab)"></div>
</div>
subTab Directive (slightly edited for privacy):
...
function csSubTab($resource, $stateParams, $state) {
var directive = {
restrict: 'A',
scope: {},
templateUrl: 'subTab.html',
link: link
};
function link(scope) {
scope.activeTab;
scope.tabs = getModuleSubTabs($stateParams.module);
select(scope.tabs[0]);
scope.select = select;
scope.isActiveTab = isActiveTab;
scope.getTabClasses = getTabClasses;
function select(tab) {
scope.activeTab = tab.heading;
}
function isActiveTab(tab) {
return tab.heading === scope.activeTab;
}
function getTabClasses(tab) {
var classes = '';
if (isActiveTab(tab)) {
classes += 'active';
}
return classes;
}
function getModuleSubTabs(moduleName) {
var tabs = [];
var tabList = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];
for (var i = 0, len = tabList.length; i < len; i++) {
tabs.push({
heading: tabList[i],
gridOptions: getSubTabGridOptions(tabList[i].toLowerCase().replace(/ /g, ''))
});
}
return tabs;
}
function getSubTabGridOptions(subTabName) {
return {
useExternalPagination: true,
paginationPageSizes: [10],
paginationPageSize: 10,
enableFiltering: false,
enableGridMenu: true,
exporterMenuPdf: false,
enableRowSelection: true,
selectWithCheckboxOnly: true,
showSelectionCheckbox: true,
rowHeight: 22,
columnsResource: $resource('app/modules/data/subTabs/' + subTabName + 'Columns.json'),
dataResource: $resource('api/3/' + subTabName)
};
}
}
return directive;
}
grid.html:
<div data-ui-grid="gridOptions" class="grid" data-ui-grid-edit data-ui-grid-cellnav data-ui-grid-pagination ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection ui-grid-exporter ui-grid-grouping></div>
grid Directive (slightly edited for privacy):
...
function csGrid($resource) {
var directive = {
restrict: 'A',
scope: {
gridOptions: '='
},
templateUrl: 'grid.html',
link: link
};
function link(scope) {
var defaultGridOptions = {
useExternalPagination: true,
paginationPageSizes: [10],
paginationPageSize: 10,
onRegisterApi: setGridApi,
enableFiltering: false,
enableGridMenu: true,
exporterMenuPdf: false,
enableRowSelection: true,
selectWithCheckboxOnly: true,
showSelectionCheckbox: true,
rowHeight: 22
};
scope.gridOptions = angular.extend({}, defaultGridOptions, scope.gridOptions);
scope.gridOptions.onRegisterApi = setGridApi;
scope.gridOptions.columnsResource.get({}, setColumns);
getPage(1);
function setColumns(data) {
scope.gridOptions.columnDefs = data.columns;
}
function setData(data) {
if (data['#type'] && data['#type'] !== 'Error') {
scope.gridOptions.totalItems = data['hydra:totalItems'];
scope.gridOptions.data = data['hydra:member'];
if (data['hydra:member'].length === 0) {
alert('No Results');
}
} else {
alert(data['hydra:title'] + ':\n\t' + data['hydra:description']);
}
}
function dataError(e) {
alert('error retrieving data:\n\t' + e);
}
function setGridApi(gridApi) {
scope.gridApi = gridApi;
scope.gridApi.pagination.on.paginationChanged(scope, getPage);
}
function getPage(pageNum){
scope.gridOptions.dataResource.get({page: pageNum}, setData, dataError);
}
}
return directive;
}

deselect all rows in ng grid

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

Resources