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.
Related
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' }
];
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 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 to make an invoice application, and I have to use ng-grid.
But I cannot figure out how to take the value that the user will insert into the cell, and use it.
$scope.myData = [{},{},{}]; /*tre row di default*/
$scope.gridOptions = {
data: 'myData',
enableCellSelection: true,
enableCellEdit: true,
enableRowSelection: false,
columnDefs: [{field: 'Numero', displayName: 'Numero', enableCellEdit: true},
{field:'Descrizione', displayName:'Descrizione'},
{field: 'CostoUnitario', displayName: 'Costo Unitario', enableCellEdit: true},
{field: 'Qta', displayName: 'Qta', enableCellEdit: true},
{field: 'Totale', displayName: 'Totale', enableCellEdit: false},]
};
$scope.addRow = function() {
$scope.myData.push({});
};
I really don't know how to do this!
Try using row.entity object..
On html side, define your input with ng-model="exapmle" as you probably did..
On angular side, get your textbox value with row.entity.example
An example which i did recently.. Look at last column def column..
$scope.gridOptions = {
data: 'accounts',
multiSelect: false,
showFilter: false,
showColumnMenu: false,
showSelectionCheckbox: false,
showGroupPanel: false,
showMenu:false,
showFooter: false,
enableRowSelection: false,
columnDefs: [
{field: 'username', displayName: 'Username', width:180},
{field: 'email', displayName: 'Email', width:250},
{field: 'role.displayTxt', displayName: 'Role', width:120},
{field: 'active', displayName: 'Active', width:80},
{field: '', displayName: ' ', width: 50,
cellTemplate: '<div class="grid-action-cell">' +
'<a class="btn-link" type="button" title="Edit" ng-href="#/accounts/{{row.entity.username}}">' +
'<i class="glyphicon glyphicon-edit" style="left:8px; top:8px;"></i>' +
'</a>' +
'</div>'
},
]
};