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' }
];
Related
Imagine that i have the structure below:
$scope.gridOptions = {
enableHorizontalScrollbar: 1,
enableFiltering: true,
paginationPageSizes: [150, 300, 450],
paginationPageSize: 150,
rowHeight: 110,
data: data,
columnDefs: [
{ name: 'IdQuestion', field: 'IdQuestion', displayName: 'Question Number' , enableCellEdit: false , width :'60' },
{ name: 'Category', field: 'Category', displayName: 'Category' , enableCellEdit: false , width :'83' }
I need to create a button in order to hide the Category column, i was thinking that this would work :/
$("#gridOptions").field("Category").hide();
but it didn't , can you guys let me know the correct way to access to the category column.
Thanks in advance.
<label ng-show="gridOptions[0].enableCellEdit">Category</label>
in the above code if enableCellEdit is true then that label will show other wise it will hide.
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'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);
});
...
I have an ng-grid 2.0.12 that I want to have first column rows as headers. So basically have a vertical table. Is there a way to achieve this in ng-grid?
.controller('ReportA', function($scope,$http, DaService, reportFactoryTable, trendReportFactoryTable) {
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.gridOptions = {
data: 'aData',
jqueryUITheme: true,
enablePinning: true,
showFooter: true,
enableRowSelection: false,
filterOptions: $scope.filterOptions,
plugins: [new ngGridCsvExportPlugin()],
columnDefs: [
{field: "item1", width: 120 },
{field: "item2", width: 120 },
{field: "item3", width: 120 },
{field: "item4", width: 120 },
{field: "item5", width: 120 },
]
};
$scope.toggleCol= function(i){
$scope.gridOptions.$gridScope.columns[i].toggleVisible();
};