Select some entities from row in ui-grid - angularjs

I have in my grid sometimes few columns, I hide some that only two are visible. I want to select rows only with these two entities(visible) and pass them to array. In this example Date and Result. Is there specific method to do this? Because when I use
vm.chartData.push($scope.gridApi.selection.getSelectedRows()) in chartData array I have got all entities.
This is my controller code.
(function () { "use strict";
angular.module("app")
.controller("grid", grid);
function grid($scope) {
var vm = this;
vm.chartData = [];
$scope.gridOptions =
{
enableGridMenu: true,
enableSorting: true,
enableRowSelection: true,
selectionRowHeaderWidth: 35,
enableSelectAll: true,
multiSelect: true,
columnDefs: [
{ name: 'Trial', field: 'Trial' },
{ name: 'Date', field: 'Date', type: "date", cellFilter: "date:'dd-MM-yyyy HH:mm'" },
{ name: 'Result', field: 'Result'}
],
data: [
//example of row entities
{
"Trial": "Weight",
"Date": "2015-02-03T05:49:54.850Z",
"Result": 60
}
]
};
$scope.pushAll = function () {
//this line returns all three entities
vm.chartData.push($scope.gridApi.selection.getSelectedRows());
};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
};
}

Related

how to pass the selected row item in angular ui-grid to fetch data for another ui-grid

I have 2 ui-grids displaying data using 2 different controllers, each controller calling a different service. (service uses ngresource and not http.)
My need is : when one row is selected in 1st grid(vendors), the 2nd grid(contracts) should get data only where the value matches the id that was fetched in the first grid.
So basically when the 1st grid vendors $scope.gridApi.selection.on.rowSelectionChanged event is triggered the contracts.query should get triggered with the VEID value of the row selected.
I am new to angular, so not able to figure out exactly where to pass the values and where to add in function to achieve this. I saw the article on $emit and $on, but not clear on it. Also my service uses $ngresource and QUERY method , while most examples are using $http or POST method. Please help!
//app.js
(function () {
'use strict';
angular.module('VendorApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection','ang_venservice','ang_contservice','ui.grid.pinning']);
})();
//vendor controller
(function () {
'use strict';
angular
.module('VendorApp')
.controller('ang_vencontroller', ang_vencontroller);
ang_vencontroller.$inject = ['$scope', 'vendors','contracts','$timeout', 'uiGridConstants'];
function ang_vencontroller($scope, $rootscope,vendors, $timeout, uiGridConstants)
{
$scope.vendorsvalues = vendors.query()
$scope.gridOptions = {
enableRowHeaderSelection: false,
multiSelect: false,
enableRowSelection: true,
enableSelectAll: true,
enableSorting: true,
enableFiltering: true,
enablePagination: true,
enablePaginationControls: true,
paginationCurrentPage: 1,
paginationPageSize: 100,
maxVisibleColumnCount: 200,
columnDefs: [
{ name: 'VENDORID', field: 'MVE_VEID' },
{ name: 'NAME', field: 'VE_NAME' },
{ name: 'ADDR1', field: 'VE_ADDR1' }
],
data: $scope.vendorsvalues
};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
$timeout(function () {
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$scope.value = row.entity.MVE_VEID;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
//$scope.contractvalues =function(){$rootScope.$emit( contracts.query({ id: $scope.value }))};
});
//contract controller
(function () {
'use strict';
angular
.module('VendorApp')
.controller('ang_contcontroller', ang_contcontroller);
ang_contcontroller.$inject = ['$scope', 'contracts'];
function ang_contcontroller($scope, $rootscope,contracts) {
$scope.contractvalues = contracts.query({ id: $scope.value });
$scope.gridoptions2 = {
enableRowHeaderSelection: false,
multiSelect: false,
enableRowSelection: true,
enableSelectAll: true,
enableSorting: true,
enableFiltering: true,
enablePagination: true,
enablePaginationControls: true,
paginationCurrentPage: 1,
paginationPageSize: 100,
maxVisibleColumnCount: 200,
columnDefs: [
{ name: 'CONTRACTID', field: 'MCO_COID' },
{ name: 'NAME', field: 'CO_DESC' },
{ name: 'VENDORID', field: 'MCO_VEID' }
],
data: $scope.contractvalues
};
}
})();
//contract service
(function () {
'use strict';
var ang_contservice = angular.module('ang_contservice', ['ngResource']);
ang_contservice.factory('contracts', ['$resource', function ($resource)
{
return $resource('/api/ContractsAPI/:id', { id: 0 }, { query: { method: 'GET', params: {}, isArray: true } });
}])
})();
<body ng-cloak>
<h4>VENDORS</h4>
<div ng-controller="ang_vencontroller" >
<div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>
<strong>SelectedRowCount:</strong> <span ng-bind="mySelectedRows.length"></span>
<br />
<strong>SelectedVendor:</strong> <span ng-bind="value"></span>
</div>
<br>
<br>
<h4>CONTRACTS</h4>
<div ng-controller="ang_contcontroller">
<div id="grid2" ui-grid="gridoptions2" ui-grid-pagination ui-grid-selection class="grid"></div>
</div>
</body>
</html>
I got this working.
I had to have both the grids in the same controller and that fixed the issue.
This is because the $scope.GridApi is not available between controllers.
U may be able to achieve grids to interact in different controllers using Controller AS , but for now, this serves my purpose.
Below is the working controller code:
(function () {
'use strict';
angular
.module('VendorApp')
.controller('ang_vencontroller', ang_vencontroller);
ang_vencontroller.$inject = ['$scope','$rootScope', 'vendors','contracts','$timeout', 'uiGridConstants'];
function ang_vencontroller($scope, $rootScope, vendors, contracts, $timeout, uiGridConstants) {
$scope.value = 0;
$scope.vendorsvalues = vendors.query();
$scope.gridOptions = {
enableRowHeaderSelection: false,
multiSelect: false,
enableRowSelection: true,
enableSelectAll: true,
enableSorting: true,
enableFiltering: true,
enablePagination: true,
enablePaginationControls: true,
paginationCurrentPage: 1,
paginationPageSize: 100,
maxVisibleColumnCount: 200,
columnDefs: [
{ name: 'VENDORID', field: 'MVE_VEID' },
{ name: 'NAME', field: 'VE_NAME' },
{ name: 'ADDR1', field: 'VE_ADDR1' }
],
data: $scope.vendorsvalues
};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
console.info("grid api 1 registered", $scope.gridApi);
$timeout(function () {
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
$scope.value = $scope.mySelectedRows[0].MVE_VEID;
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$scope.value = row.entity.MVE_VEID;
$scope.contractvalues = contracts.query({ id: $scope.value });
console.log("scope.contractvalues:", $scope.contractvalues);
$scope.gridoptions2.data = $scope.contractvalues;
$scope.gridApi2.core.notifyDataChange(uiGridConstants.dataChange.ALL);
});
});
};
$scope.contractvalues = contracts.query({ id: $scope.value });
$scope.gridoptions2 = {
enableRowHeaderSelection: false,
multiSelect: false,
enableRowSelection: true,
enableSelectAll: true,
enableSorting: true,
enableFiltering: true,
enablePagination: true,
enablePaginationControls: true,
paginationCurrentPage: 1,
paginationPageSize: 100,
maxVisibleColumnCount: 200,
columnDefs: [
{ name: 'CONTRACTID', field: 'MCO_COID' },
{ name: 'NAME', field: 'CO_DESC' },
{ name: 'VENDORID', field: 'MCO_VEID' }
],
data: $scope.contractvalues,
onRegisterApi: function (gridApi) {
$scope.gridApi2 = gridApi;
}
};
$scope.gridoptions2.onRegisterApi = function (gridApi) {
$scope.gridApi2 = gridApi;
console.info("***grid api 2 registered***", $scope.gridApi2);
};
}
})();

How can I access UI-Grid isolate scope from outside?

There is a button outside of angular UI grid.
I would like to call a function on "Default" button click and post grid object parameter to the callback function.
There is a second example as well. But instead of posting grid object to the buttons inside of the grid I would like to post the grid object to the button outside of the grid.
To cut a long story short I would like to have an edit button outside of the grid (select one row mode is turned on) instead of adding a column of edit buttons without select row option.
Is it possible starting from v3.1.0?
http://plnkr.co/edit/JyiN7MejqkiTuvczsOk1
For some reason gridOptions.appScopeProvider is null when I expand $scope object in MainCtrl.Here is js-code sample:
angular.module('modal.editing', ['ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.bootstrap', 'schemaForm'])
.constant('PersonSchema', {
type: 'object',
properties: {
name: { type: 'string', title: 'Name' },
company: { type: 'string', title: 'Company' },
phone: { type: 'string', title: 'Phone' },
'address.city': { type: 'string', title: 'City' }
}
})
.controller('MainCtrl', MainCtrl)
.controller('RowEditCtrl', RowEditCtrl)
.service('RowEditor', RowEditor)
;
MainCtrl.$inject = ['$http', 'RowEditor', '$modal'];
function MainCtrl ($http, RowEditor) {
var vm = this;
vm.editRow = RowEditor.editRow;
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
selectionRowHeaderWidth: 35,
columnDefs: [
{ field: 'id', name: '', cellTemplate: 'edit-button.html', width: 34 },
{ name: 'name' },
{ name: 'company' },
{ name: 'phone' },
{ name: 'City', field: 'address.city' },
]
};
vm.test = function() {
debugger;
};
$http.get('http://ui-grid.info/data/500_complex.json')
.success(function (data) {
vm.gridOptions.data = data;
});
}
RowEditor.$inject = ['$rootScope', '$modal'];
function RowEditor($rootScope, $modal) {
var service = {};
service.editRow = editRow;
function editRow(grid, row) {
debugger;
$modal.open({
templateUrl: 'edit-modal.html',
controller: ['$modalInstance', 'PersonSchema', 'grid', 'row', RowEditCtrl],
controllerAs: 'vm',
resolve: {
grid: function () { return grid; },
row: function () { return row; }
}
});
}
return service;
}
function RowEditCtrl($modalInstance, PersonSchema, grid, row) {
var vm = this;
vm.schema = PersonSchema;
vm.entity = angular.copy(row.entity);
vm.form = [
'name',
'company',
'phone',
{
'key': 'address.city',
'title': 'City'
},
];
vm.save = save;
function save() {
// Copy row values over
row.entity = angular.extend(row.entity, vm.entity);
$modalInstance.close(row.entity);
}
}
That is exactly what onRegisterApi is for:
vm.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
selectionRowHeaderWidth: 35,
columnDefs: [
{ field: 'id', name: '', cellTemplate: 'edit-button.html', width: 34 },
{ name: 'name' },
{ name: 'company' },
{ name: 'phone' },
{ name: 'City', field: 'address.city' },
],
onRegisterApi: function (gridApi){
vm.gridApi = gridApi;
}
};
Then the gridApi will be in your scope (vm.gridApi) and you can access the grid and all the rows in gridApi.grid.
Hope this helps.

Updating cell data in ui-grid without page refresh

I have a table that I made using ui-grid. The table displays information about a list of news stories. In the final column, I am giving the user the ability to edit, delete, and/or make a news story.
Everything seems to be working fine with that - I am able to have a modal pop up, and after entering in the required information, I can see my data change on the server. If I refresh the page, I can also see my data change on the table. However, I would like the cell data to change without page refresh. It doesn't seem to be binding to my news data.
Here is the ui-grid:
$scope.news = getAdminNews.results;
/**
* ui-grid implementation
*/
$scope.gridOptions = {
data: 'news',
enableColumnResizing: true,
enableFiltering: true,
enableGridMenu: false,
enableColumnMenus: false,
paginationPageSizes: [25,50,75],
paginationPageSize: 25,
rowHeight: 75
};
$scope.gridOptions.columnDefs = [{
displayName: 'Title',
field: 'title.rendered',
filterCellFiltered: true,
sortCellFiltered: true,
width: '20%'
}, {
displayName: 'Body',
field: 'body',
width: '20%'
}, {
displayName: 'Created',
field: 'created',
type: 'date',
cellFilter: 'date:"yyyy-MM-dd"',
filterCellFiltered: true,
sortCellFiltered: true,
width: '20%',
sort: {
priority: 0
}
},
{
displayName: 'Actions',
displayName: 'Actions',
width: '20%',
enableSorting: false,
enableFiltering: false,
field: 'actions',
cellTemplate: 'table-cell-actions'
}
];
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
};
And one part of my controller which is working successfully:
$scope.newPost = function() {
ngDialog.openConfirm({
template: 'modalPostNew',
className: 'ngdialog-theme-default',
scope: $scope
}).then(function() {
var newPost = {
"id": 0,
"title": $scope.newPostForm.title
}
AdminNews.save(newPost);
toaster.pop('success', 'Updated', 'News item updated successfully.');
});
}
I needed to update my $scope.news data that ui-grid was populating the table with. Here is what my controller looks like now:
$scope.newPost = function() {
ngDialog.openConfirm({
template: 'modalPostNew',
className: 'ngdialog-theme-default',
scope: $scope
}).then(function() {
var newPost = {
"id": 0,
"title": $scope.newPostForm.title
}
AdminNews.save(newPost).$promise.then(function(response) {
var myObj = {
"id": response.data.id,
"title": {
"rendered": response.data.title
}
}
$scope.news.push(myObj);
});
toaster.pop('success', 'Updated', 'News item updated successfully.');
});
}

How to access row data upon row Selection

I'm using ui-grid to display data.
I want to access a column's value when a row is selected. I've implemented a rowSelectionChange event, but I can't seem to access the data.
gridOptions:
$scope.gridOptions = {
paginationPageSizes: [10, 25, 50],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
multiSelect: false,
enableSelectAll: false,
columnDefs: [
{ name: 'Name', field: 'properties.Name'},
{ name: 'Address', field: 'properties.Address'},
{ name: 'PhoneNumber', field: 'properties.PhoneNumber'}
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var msg = row.entity.Name;
alert("Row Selected! " + msg);
});
...
What am I missing?
Found the solution by adding a breakpoint and looking at the value of row.entity. Changing it to row.entity.properties.Name fixed my problem.
You should use row.entity.name instead of row.entity.Name
$scope.gridOptions = {
paginationPageSizes: [10, 25, 50],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
multiSelect: false,
enableSelectAll: false,
columnDefs: [
{ name: 'Name', field: 'properties.Name'},
{ name: 'Address', field: 'properties.Address'},
{ name: 'PhoneNumber', field: 'properties.PhoneNumber'}
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var msg = row.entity.name; //change Name -> name.
alert("Row Selected! " + msg);
});
...

Populate ng-grid by another grid selection

I am trying to populate a ng-grid based on the JSON array returned from a selection of a first ng-grid. As of right now I can get the JSON array displayed onto the screen but I cannot navigate deeper into the JSON array or get anything to display in the second grid. I have the controller code attached and the plnkr can be found at http://plnkr.co/edit/nULoI4?p=info.
'use strict';
function ArticleDataCtrl($rootScope, $scope, articleDataService) {
articleDataService
.getArticles()
.then(
function(articles) {
$rootScope.articles = articles;
$scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
});
$scope.articleGrid = {
data: 'articleGridItems',
showGroupPanel: false,
multiSelect: true,
checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-click="getDeliveryLocations()" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>',
showSelectionCheckbox: true,
selectWithCheckboxOnly: true,
enableColumnResize: true,
selectedItems: [],
columnDefs: [{
field: 'soMerArticleNbr',
displayName: 'Article'
}, {
field: 'soMerOrdQty',
displayName: 'Qty'
}, {
field: 'soArtDeliveryCode',
displayName: 'Delivery Code'
}, {
field: 'dsgnSysRecDesc',
displayName: 'Description'
}]
};
//This is not being called on header template click
$scope.getDeliveryLocations = function() {
$scope.deliveryLocationData = $scope.commonDeliveryLocations;
};
$scope.selections = $scope.articleGrid.selectedItems;
var jsonObject = JSON.stringify($scope.selections);
//Thought a json problem occured here...was wrong
$scope.test = jsonObject.deliveryLocations;
$scope.deliveryGrid = {
data: 'selections',
showGroupPanel: false,
multiSelect: false,
columnDefs: [{
displayName: 'Delivery Methods'
}]
};
}
myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
'articleDataService', ArticleDataCtrl
]);
So instead of trying to use angular's built in checkboxes I used my own with a custom method on ng-click. Here is the code and the plunker demonstrating the functionality is http://plnkr.co/edit/nULoI4?p=info.
'use strict';
function ArticleDataCtrl($rootScope, $scope, articleDataService) {
articleDataService
.getArticles()
.then(
function(articles) {
$rootScope.articles = articles;
$scope.articleGridItems = articles.data.specialMerchandise.specialMerItem;
});
$scope.articleGrid = {
data: 'articleGridItems',
showGroupPanel: false,
multiSelect: false,
enableColumnResize: true,
selectWithCheckboxOnly: true,
columnDefs: [{
/*
headerCellTemplate: myHeaderCellTemplate,
*/
cellTemplate: '<input id="checkSlave" name="articleCheckBox" ng-checked="master" type="checkbox" ng-click="getDeliveryLocation(row.entity)" />'
}, {
field: 'soMerArticleNbr',
displayName: 'Article'
}, {
field: 'soMerOrdQty',
displayName: 'Qty'
}, {
field: 'soMerUOIDesc',
displayName: 'UOM'
}, {
field: 'soArtDeliveryCode',
displayName: 'Delivery Code'
}, {
field: 'soMerShrtMerDesc',
displayName: 'Description'
}, {
field: 'soMerDesc',
displayName: 'Vendor'
}]
};
$scope.getDeliveryLocation = function(deliveryLocation) {
$scope.deliveryLocationData = deliveryLocation.deliveryLocation;
for (var i = 0; i < $scope.deliveryLocationData.length; i++) {
var locationId = $scope.deliveryLocationData[i].dlvryLocId;
var locationDesc = $scope.deliveryLocationData[i].dlveryLocDesc;
$scope.deliveryLocationData[i].dlvryLocId = locationId + locationDesc;
}
return $scope.deliveryLocationData;
};
return $scope.deliveryLocationData;
};
$scope.deliveryGrid = {
data: 'deliveryLocationData',
showGroupPanel: false,
multiSelect: false,
columnDefs: [{
field: 'dlvryLocId',
displayName: 'Delivery Methods'
}]
};
$scope.customerGroup = {
value: 'DIY'
};
}
myApp.controller('ArticleDataCtrl', ['$rootScope', '$scope',
'articleDataService', ArticleDataCtrl
]);

Resources