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);
});
...
Related
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;
};
}
Basically I have datatable with dyamic column header ( date format ), so I'm wondering how to set the columnDefs dynamically.
my data is like :
$scope.data = [{"FirstName":"Ali","8/11/2016 12:00:00 AM":"Yes" ;}]
and here is how i'm calling it :
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
enableEditing: true,
rowHeight: 110,
data: data ,
/* columnDefs: [
{ name: 'FirstName', field: 'FirstName', displayName: 'FirstName' , enableCellEdit: false , width :'60' }
]*/
};
PS: the data can have many columns with date format and i'm using angular 1.3
Try this,
Keep the headers on $scope and call them in columnDefs
$scope.headers = [
FirstName:newFName
]
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
enableEditing: true,
rowHeight: 110,
data: data ,
columnDefs: [
{field:'FirstName' , displayName: $scope.headers.displayName , enableCellEdit: false , width :'60' }
];
I'm wondering how can i create a filter with multiple options in it.
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{ name: 'Cars', field: 'Cars', displayName: 'Cars' , enableCellEdit: false , width :'80' },
{ name: 'Driver', field: 'Driver', displayName: 'Driver' , enableCellEdit: false , width :'80' },
in case I want to filter by two types of cars , how can i do it , do you guys have any example ?
thanks,
First loop the $scope.gridOptions.columnDefs , so you get object names use that object name in your filter.
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{name: 'Cars', field: 'Cars', displayName: 'Cars', enableCellEdit: false, width :'80' },
{ name: 'Driver', field: 'Driver', displayName: 'Driver', enableCellEdit: false, width :'80' }
]
};
angular.forEach($scope.gridOptions.columnDefs, function (val, key){
console.log(val, key);
$scope.filterName = val.name; //use this scope variable in filter.
console.log($scope.filterName);
});
Hope this helps you.
I am getting a nested collection from service. When i am mapping field to Array with Array.length it is giving me output. BUT when i try
field: Auditlogs[Auditlogs.length-1].auditState.StateName . It stops working. Please help me on this.
I also want to disable Pagination based on a Flag in $scope. Below is my ui-grid setting
$scope.gridOptions = {
data: 'auditList',
enableColumnResizing: true,
paginationPageSizes: [10, 25, 50],
paginationPageSize: 10,
enablePaginationControls: false,
enableFiltering: false,
enableSorting: true,
useExternalPagination: true,
columnDefs: [
{
name: 'LOAN #',
cellTemplate: '<a ng-click="grid.appScope.getLoanDetails(row.entity.Loan.LoanNumber,row.entity.Id)">{{row.entity.Loan.LoanNumber}}</a>'
,enableHiding: false
},
{
name: 'Audit Type',
field: 'AuditType.AuditType1'
,enableHiding: false
},
{
name: 'Borrower Last Name',
field: 'Loan.BorrowerLastName'
,enableHiding: false
},
{
name: 'Funding Date',
field: 'Loan.FundingDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\'',
enableFiltering: false
,enableHiding: false
},
{
name: 'Audit start date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Due Date',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
},
{
name: 'Finding Count',
field: 'AuditFindings.length',
enableHiding: false
},
{
name: 'Current Status',
field: 'Auditlogs[Auditlogs.length-1].auditState.StateName'
//$scope.auditList[0].Auditlogs[$scope.auditList[0].Auditlogs.length-1].auditState.StateName
,enableHiding: false
},
{
name: 'Cur.Status Dt.',
field: 'AuditStartDate',
type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
,enableHiding: false
}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
$scope.paginationOptions.pageNumber = newPage;
$scope.paginationOptions.pageSize = pageSize;
$scope.getAllPA($scope.flagValue.value);
});
}
};
I Solved the above issue by using CellTemplate instead of Feild
cellTemplate: '<div>{{row.entity.Auditlogs[row.entity.Auditlogs.length-1].auditState.StateName}}</div>'
I am still looking to dynamically enable/disable pagination on Grid.
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.');
});
}