I am getting weird behaviour when using angular ui-grid.
Here is my .html
<div class="grid testGrid" ui-grid="testGridOptions" ui-grid-edit
ui-grid-row-edit style="width: 100%;">
</div>
Here are my grid settings
$scope.testGridOptions = {
enableRowSelection: false,
enableRowHeaderSelection: false,
enableCellEdit: true,
enableCellEditOnFocus: false,
enableSorting: false,
enableFiltering: false,
multiSelect: false,
rowHeight: 30,
enableColumnMenus: false,
enableGridMenu: false,
showGridFooter: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
I haven't enabled drag & drop property but still I can perform drag and drop.
What am I doing wrong?
You may include some drag&drop lib. please check angular.module
Related
I am making a grid in AngularJS with Angular UI Grid and the console printing this error:
error: b.forEach is not a function
Does anyone know what is happening?
vm.detalleVirtuales.paginationOptions = {pageNumber: 1, pageSize: 500, sort: null};
vm.detalleVirtuales = {
enableFiltering: true,
enableGridMenu: true,
enableSelectAll: true,
showGridFooter: true,
paginationPageSizes: [500, 1000, 3000, 5000],
paginationPageSize: 500,
useExternalPagination: true,
columnDefs: columDefo,
useExternalSorting: true,
enableFiltering: true,
enableGridMenu: true,
enableSelectAll: true,
enableColumnMenus: true,
exporterCsvFilename: "Detalle_virtuales.csv",
exporterExcelFilename: 'Detalle_virtuales.xlsx',
exporterExcelSheetName: 'Detalle_virtuales',
exporterOlderExcelCompatibility: true,
showColumnFooter: true
I am using Angular js UI grid for table.
Although, everything showing perfect, textbox filter for specific column is not visible to me even after applied !!
My Code :
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
enableColumnMenus: false,
showGridFooter: false,
paginationPageSizes: [10, 20, 30],
paginationPageSize: 10,
paginationOptions: $scope.pagingOptions,
useExternalPagination: false,
multiSelect: false,
enableSorting: true,
enableFiltering: true,
modifierKeysToMultiSelect: false,
noUnselect: false,
enableVerticalScrollbar: true,
enableHorizontalScrollbar: true,
columnDefs: [
{
field: 'name',
displayName: 'UserName',
width: 150,
cellTooltip: true,
CellTemplate: '<div class="GridRow">{{row.name}}</div>',
headerCellTemplate: '<div style="margin: 22px 0px 0px 0px;" ><span class="ui-grid-cell-contents GridHead">Last Run By</span></div>',
cellClass:'tooltipclass',
enableCellEdit: true,
enableFiltering: true
},
]}
Added enablefiltering but its still not showing textbox filter and neither it give any warning or error.
Anyone have any input on if I am missing something over here ?
Thank you very much
The textbox for filtering is not visible because you are providing a headerCellTemplate for that column. See here: Angular UI Grid - Custom Header Template and Filtering. Another solution would be to copy the predefined template of headerCell from ui-grid into your code and modify it as per your requirements.
I have default filter and custom filter for ag-grid . I want to clear filter on tab change.
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: null,
angularCompileRows: true,
enableSorting: true,
enableColResize: true,
enableFilter: true,
rowHeight: 35,
rowSelection: 'single',
onSelectionChanged: onSelectionChanged,
isExternalFilterPresent: isExternalFilterPresent,
doesExternalFilterPass: doesExternalFilterPass,
overlayLoadingTemplate: '<span class="ag-overlay-loading-center">Please wait while your rows are loading</span>',
overlayNoRowsTemplate: '<span style=" transform: translateY(-50%);opacity: 0.25;font-size: 3em;">No data available</span>'
};
I tried this but it's not working
$scope.gridOptions.api.resetFilters();
$scope.gridOptions.api.destroyFilter();
Please suggest any method to do reset all filters of ag-grid.
Try this:
$scope.gridOptions.api.setFilterModel(null);
$scope.gridOptions.api.onFilterChanged();
ui-grid in my demo .here is the api document
http://ui-grid.info/docs/#/tutorial/101_intro
I want to remove hide option from the columns .In each columns there is "V" image and on click of that image it show hide column option.I want to remove that option .how it is possible
here is my code
self.gridOptions = {
enableFiltering: true,
enableRowSelection: true,
multiSelect: false,
enableRowHeaderSelection: false,
enableSorting: false
};
http://plnkr.co/edit/ye0HXTbKv6dDYTQ0DMyX?p=preview
The page you're after is here: http://ui-grid.info/docs/#/tutorial/303_customizing_column_menu
You can remove the menu on each column header completely using:
enableColumnMenus: false
In your grid options as so:
self.gridOptions = {
enableFiltering: true,
enableRowSelection: true,
multiSelect: false,
enableRowHeaderSelection: false,
enableSorting: false,
enableColumnMenus: false
};
You can hide column menu by using colDef."enableColumnMenu":false
self.gridOptions.columnDefs=[ { field: 'name' },
{ field: 'gender' },
{ field: 'company',
enableSorting: true,
enableColumnMenu :false }]
I have a group and subgroup grid using ui-grid v3.0.0-rc.20-8199eb5 - 2015-04-13. I need the plus and minus icon in the rows that contain data and not the grouping header. Right now there are none in any rows. I have been trying to use rowTemplate and have only been successful in adding another row header but not modifying the existing row header.
$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
var cellTemplate = '<div class="ui-grid-row-header-cell ui-grid-expandable-buttons-cell"><div class="ui-grid-cell-contents"><i ng-class="{ \'ui-grid-icon-plus-squared\' : !row.isExpanded, \'ui-grid-icon-minus-squared\' : row.isExpanded }" ng-click="grid.api.expandable.toggleRowExpansion(row.entity)"></i> </div></div>';
$scope.gridApi.core.addRowHeaderColumn({ name: 'rowHeaderCol', displayName: '', cellTemplate: cellTemplate });
},
enableRowSelection: true,
enableRowHeaderSelection: false,
enableGridMenu: true,
multiSelect: false
};
You need to inject 'ui.grid.expandable' in your module and to add 'ui-grid-expandable' to your ui-grid element like this:
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
Use this: http://plnkr.co/edit/0tmCvI05oVNbpfkCquCt?p=preview