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 }]
Related
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 a ui-grid with several columns. Two of those columns are editable. I have also enabled row selection which makes the checkboxes appear in the left most column of the row.
I have disabled cell focus for non-editable columns. What I want to achieve is when I edit one of the editable column cell and hit tab, it should navigate only between the editable columns. The problem with the current setup is that the focus shifts from the editable cells in a row to the selection checkbox in the next row instead of going to next editable cell. I want to disable focus for the selection checkboxes.
vm.tableOptions = {
appScopeProvider: vm,
data: [],
enableSorting: true,
enableFiltering: true,
enableRowSelection: true,
enableColumnResizing: true,
enableSelectAll: true,
multiSelect: true,
enableGridMenu: true,
virtualizationThreshold: 18,
fastWatch: true,
scrollDebounce: 500,
wheelScrollThrottle: 500,
rowHeight: 40,
headerRowHeight: 40,
minRowsToShow: 15,
paginationPageSize: 25,
paginationPageSizes: [],
treeRowHeaderAlwaysVisible: false,
saveScroll: true,
saveGroupingExpandedStates: true,
enableCellEditOnFocus: true,
onRegisterApi: function (gridApi) {
vm.gridApi = gridApi;
/**
* Checks if any rows are selected in the tasks grid.
* #returns True if any tasks are selected; otherwise, false.
*/
function anyRowsSelected() {
var selectedRows = vm.gridApi.selection.getSelectedRows();
return selectedRows ? selectedRows.length > 0 : false;
};
// Check if any tasks are selected when the selection changes
gridApi.selection.on.rowSelectionChanged(null, function (row) {
vm.isRowsSelected = anyRowsSelected();
});
// Check if any tasks are selected when batch selection changes
gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
vm.isRowsSelected = anyRowsSelected();
});
// This is a hack to manually move the focus to next editable cell
// I want to avoid this since this is causing some issues.
gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol) {
var assetColIndex = 4;
if (newRowCol.col.name === "selectionRowHeaderCol" &&
oldRowCol.col.name === "SerialNumber") {
vm.gridApi.cellNav.scrollToFocus(newRowCol.row.entity, vm.tableOptions.columnDefs[assetColIndex]);
}
});
$timeout(vm.restoreGridState, 50);
},
columnDefs: [
{ name: "DiscreteSkuId", enableCellEdit: false, allowCellFocus: false },
{
name: "SlotBin",
cellTemplate: slotBinCellTemplate,
enableCellEdit: false,
allowCellFocus: false,
sort: {
direction: 'desc',
priority: 0
}
},
{ name: "Model", enableCellEdit: false, allowCellFocus: false },
{ name: "AssetType", enableCellEdit: false, allowCellFocus: false },
{ name: "AssetTag" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
{ name: "SerialNumber" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
{ name: "ValidationFailureReasons", cellTemplate: errorMessageCellTemplate, enableCellEdit: false, allowCellFocus: false }
]
};
This is in the html page.
<div id="table" ui-grid="rackItemDetailsCtrl.tableOptions" ng-disabled="rackItemDetailsCtrl.disableUserInteraction" class="grid tasks-table ui-grid-row-hover" ui-grid-save-state ui-grid-resize-columns ui-grid-selection ui-grid-grouping ui-grid-move-columns ui-grid-auto-resize ui-grid-scrolling-fix ui-grid-edit ui-grid-cellNav></div>
Angular ui-grid version: 3.1.0.1
Angularjs version: 1.4.9
You can disable cell focus on a column with the allowCellFocus flag. However, the row selection column is created automatically and you have no way to set this flag. The solution to to manually access the column after it is created and set allowCellFocus to false. Here is how you can do that:
gridApi.grid.getColumn('selectionRowHeaderCol').colDef.allowCellFocus = false;
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();
I am trying to group a row based on a condition. I have 2 columns in my table, User and group.
If the value of group is blank, I want to keep those rows ungrouped.
Trying to achieve this grouping
Right now the rows are also grouped for the rows where group value is blank.
Current grouping which I have acheived
Below is my grid, I have marked my column Group as a grouping.
$scope.gridOptionsUserGroup = {
enableFiltering: true,
enableColumnResizing: true,
resize:false,
enableSorting: true,
enableColumnMenus: false,
enableSelectAll: true,
enableRowSelection: true,
enableFullRowSelection:true,
enableRowHeaderSelection:true,
enableGroupHeaderSelection: true,
multiSelect: true,
enableGridMenu: true,
showGroupPanel: true,
rowHeight: 30,
groups: ['grouping'],
columnDefs: [{ field: 'grouping', displayName: 'Group' ,grouping: { groupPriority: 0 },
sort: { priority: 1, direction: 'asc' }},
{ field: 'userName', displayName: 'User Name' }
],
};
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