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.
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' }
];
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 use ag-grid with Angular 1.5 and I have defined 5 columns in the following format in an array:
[
{headerName: 'Username', width: 150, field: 'username'},
{headerName: 'Full Name', width: 150, field: 'full_name'},
{headerName: 'Location', width: 150, field: 'location'},
{headerName: 'Email', width: 150, field: 'email'},
{headerName: 'Check In Comment', width: 370, field: 'comment'},
];
The rendering shows 6 columns with the right-most one being blank. I've tried everything, but I cannot still remove the blank column. See the :
gridOptions:
options = {
rowData: dataArray,
rowModelType: 'pagination',
columnDefs: getColumnDefs(),
enableColResize: true,
enableSorting: false,
enableFilter: true,
rowHeight: 25,
angularCompileRows: true,
suppressRowClickSelection: true
};
The html code:
<div style="width: 100%;"
ag-grid="vm.gridOptions"
class="ag-fresh ag-basic">
</div>
I wonder how to remove the blank column right to the 'Check In Comment' column. any ideas?
Have you tried gridOptions.api.sizeColumnsToFit() ?
Source (7min 50sec)
extra column is there even if we use that api gridOptions.api.sizeColumnsToFit().
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
I'm trying to get UI-Grid on my Angular App to filter dates properly but it doesn't seem to respond to any kind of filter change. I've tried going over the docs and using their example:
displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true,
But nothing seems to change the format of the date, here is my code currently: (updated)
$scope.gridOptionsClaims = {
enableSorting: true,
enableFiltering: true,
showColumnFooter: true,
enableGridMenu: true,
columnDefs: [
{ field: 'date', name: 'Date', displayName: "Date", type: 'date', cellFilter: 'date:"MM-dd-yyyy"', filterCellFiltered: true },
{ field: 'transaction_id', name: 'Purchase Order', displayName: "Purchase Order" },
{ field: 'full_name', name: 'Salesperson', displayName: "Salesperson" }
]};
I've tried using filters 'date:MM-dd-yyy' and that didn't work either. Could anyone please tell me what I'm missing?
Did you enable filtering with enableFiltering: true property?
Also, try to define cellFilter with filters as you already mentioned:
cellFilter: 'date:"yyyy-MM-dd HH:mm"'