Wondering if anyone has customized ag-grid so that the filter panel is on the left (instead of right) with criteria open by default. We would like to improve usability by making the filters less obscure.
Also wondering if filter criteria can be added/removed by the user rather than having all criteria listed by default.
There is position param thatse ts the side bar position relative to the grid.
sideBar = {
toolPanels: [
...
],
position: 'left',
defaultToolPanel: 'filters'
}
Filter criteria can be also added/removed regarding your needs by defining your custom toolPanel:
var columnDefs = [
{
field: "your_field",
filter: false, //set filter to false to hide it from sidebar
},
];
and the sidebar settings:
sideBar = {
{
id: 'filters',
labelDefault: 'Filters',
labelKey: 'filters',
iconKey: 'filter',
toolPanel: 'agFiltersToolPanel',
}
]
}
More detail in official documentation: ag-grid sidebar
Related
I have an ag-grid where rows are grouped by first column. The group are expanded by default. I want to disable group collapse on click.
colDefs = [{
field: 'colA',
rowGroup: true,
hide: true
}, {
field: 'colB'
},
...
];
gridOptions = {
groupDefaultExpanded: -1,
...
}
How do i prevent from collapsing the group open by default
I guess the colB has a showRowGroup: 'colA' and a cellRenderer: 'agGroupCellRenderer'.
You can remove the cellRenderer from it and it will display the group title as a simple string without showing the collapse icon and without the collapse abililty too.
I managed to do that by adding the following css:.ag-group-expanded {pointer-events: none;}
I also set to true suppressDoubleClickExpand and suppressEnterExpand so there is no way to collapse the rows.
I'm using ag-grid (vanilla javascript) and would like to be able have the user click on the filter box (as well as the filter icon) to display the filter options.
Currently it is read only and can only be accessed by clicking the filter icon.
I cannot find any information in the documentation to allow this to happen and cannot think of a way to achieve this.
I've created a Plunker example which you can see here:
https://plnkr.co/edit/XQP8FFzSaaknRSMh2zdN?p=preview
var columnDefs = [{
headerName: 'Athlete',
field: 'athlete',
width: 150,
filter: 'agSetColumnFilter',
filterParams: {
cellHeight: 20,
values: irishAthletes(),
debounceMs: 1000
}
}, {
headerName: 'Country',
field: 'country',
width: 140,
cellRenderer: 'countryCellRenderer',
keyCreator: countryKeyCreator,
filter: 'agSetColumnFilter',
filterParams: {
selectAllOnMiniFilter: true
}
},
];
I would like a user to be able to click on the filter box (e.g. the box below 'Athlete') in the headers to display the relevant filter options. As if they have clicked on the filter icons.
Any suggestions would be appreciated.
I am using agSelectCellEditor to imlement a dropdown menu in a particular column cells.
This is the column definition:
{
headerName: "Rattachement",
field: "rattachement",
editable: true,
headerTooltip:
"Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
cellEditor: "agSelectCellEditor",
cellEditorParams: {
values: [
"",
"Audit",
"RA",
"Consulting",
"FA",
"Tax&Legal",
"ICS",
"Taj"
]
}
}
This is how ag-grid renders it:
I have to doubl-click on it in order for the dropdown list to show-up this way:
And then I can select any of the available options.
As you notice, this is really poor rendering and may cause the user to be confused and unable to use the tool that I am building.
So my question is:
Is there any way to make ag-grid show the dropdown menu from the beginnig without having to double-click on the cell so that the user actually knows what to do?
Thanks!
PS: I don't want to use a custom cell renderer, because the options in the cell depend on other variables and the whole thing may get messy if I choose to implement the dropdown list using a customcellRenderer (which I did with other columns where it doesn't cause me any of the mentioned trouble)
This is the same issue which i encountered :).
By default AgGrid doesnt show dropdown columns. If you wish to show it as a dropdown you will have to use cellRenderer just to show the image to notify user that this is dropdown column.
Double click edit can be changed to singleclick or no click edit that option is avaiable.
Set columndef option singleClickEdit : true,
var columnDefs = [
{field: 'name', width: 100},
{
field: 'gender',
width: 90,
cellRenderer: 'genderCellRenderer',
cellEditor: 'agRichSelectCellEditor',
singleClickEdit : true,
cellEditorParams: {
values: ['Male', 'Female'],
}
},]
var gridOptions = {
components: {
'genderCellRenderer': GenderCellRenderer
},
columnDefs: columnDefs,
}
function GenderCellRenderer() {
}
GenderCellRenderer.prototype.init = function (params) {
this.eGui = document.createElement('span');
this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
};
GenderCellRenderer.prototype.getGui = function () {
return this.eGui;
};
DEMO
Hope this helps.
Is there an option to remove first menu from ag-grid column menu?
I mean the menu with 'pinSubMenu', 'valueAggSubMenu', 'autoSizeThis', etc.
I want to open the context menu and to see first the filter menu and second the columns visibility menu.
I tried to do this, but it still opens empty menu and I need to navigate to my filter menu:
function getMainMenuItems(params) {
var countryMenuItems = [];
var itemsToExclude = [
'separator', 'pinSubMenu', 'valueAggSubMenu', 'autoSizeThis', 'autoSizeAll', 'rowGroup', 'rowUnGroup',
'resetColumns', 'expandAll', 'contractAll','toolPanel'
];
params.defaultItems.forEach(function(item) {
if (itemsToExclude.indexOf(item) < 0) {
countryMenuItems.push(item);
}
});
return countryMenuItems;
}
Looks like you should be able to accomplish what you want to do within the gridOptions:
gridOptions = {
...
suppressMenuMainPanel: true,
...
}
You can also suppress any of the panels of the column menu:
gridOptions = {
...
suppressMenuMainPanel: true,
suppressMenuColumnPanel: true,
suppressMenuFilterPanel: true,
...
}
This is supposing that you are using the Enterprise version, which I assumed you were based on your usage of the getMainMenuItems function
You need to specify menuTabs in the colDef object:
{
headerName: "ID",
field: "id",
menuTabs: ['filterMenuTab','generalMenuTab','columnsMenuTab']
}
See more details here.
Let's say I have a grid with multiselect option on, when user selects 4 lists and wants to get the values ( alerted on screen) how would I do that? And how would I disable buttons untill at least one list is selected?
All questions you've asked are answered many times already. Also there are good ExtJS examples on sencha.com. For example list view grid shows multiple select and editable grid with writable store shows button enable on click. But THE MOST important is documentation! Let me explain functionality on following code. Most of it is from list view example.
This grid gets JSON from list.php which has following structure
{"authors":[{"surname":"Autho1"},{"surname":"Autho2"}]}
And the grid:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*'
]);
Ext.onReady(function(){
// Here i've definned simple model with just one field
Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: ['surname']
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'ImageModel',
proxy: {
type: 'ajax',
url: 'list.php',
reader: {
type: 'json',
root: 'authors'
}
}
});
store.load();
var listView = Ext.create('Ext.grid.Panel', {
id: 'myPanel', // Notice unique ID of panel
width:425,
height:250,
collapsible:true,
renderTo: Ext.getBody(),
store: store,
multiSelect: true,
viewConfig: {
emptyText: 'No authors to display'
},
columns: [{
text: 'File',
flex: 50,
// dataIndex means which field from model to load in column
dataIndex: 'surname'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
// This button will log to console authors surname who are selected
// (show via firebug or in chrome js console for example)
text: 'Show selected',
handler: function() {
// Notice that i'm using getCmp(unique Id of my panel)
// to get panel regerence. I could also use
// this.up('toolbar').up('myPanel')
// see documentation for up() meaning
var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection();
for (var i=0; i < selection.length; i++) {
console.log(selection[i].data.surname);
}
}
},{
text: 'Disabled btn',
id: 'myHiddenBtn', // Notice unique ID of my button
disabled: true // disabled by default
}]
}]
});
// Here i'm waiting for event which is fired
// by grid panel automatically when you click on
// any item of grid panel. Then I lookup
// my button via unique ID and set 'disabled' property to false
listView.on('itemclick', function(view, nodes){
Ext.getCmp('myHiddenBtn').setDisabled(false);
});
});
I didn't knew how to do this from top of my head, but I used documentation and the result works ;-). See Grid panel docs for more information.