I have to enable columns selection and perform operation like export Excel/copy to clipboard on particular columns selected.
The requirement is when I click on column header it should select the entire column.
How can this be achieved?
There are a few ways to do it.
One would be to add a new 'Select Column' entry to the Column Menu and then in the Action create a new cell range. Something like this should do the trick:
var gridOptions = {
....
getMainMenuItems: getMainMenuItems,
....
}
function getMainMenuItems(params) {
var menuItems = params.defaultItems.slice(0);
menuItems.push({
name: 'Select Column',
action: function () {
gridOptions.api!.clearRangeSelection();
const cellRangeParams: CellRangeParams = {
rowStartIndex: 0,
rowEndIndex: gridOptions.api!.getDisplayedRowCount(),
columnStart: params.column.getId(),
columnEnd: params.column.getId(),
};
gridOptions.api!.addCellRange(cellRangeParams);
},
});
return menuItems;
}
Related
can someone help how to copy row data with formatted grid values in right click menu options
Grid column defs have valueFormatter
Got it working with the help of processCellForClipboard(params) as mentioned in documentation
You have to process each cell manually like this:
function prepareCellForClipboard(params) {
// Export values as formatted
const colDef = params.column.getColDef()
if (colDef.valueFormatter) {
return colDef.valueFormatter({
...params,
data: params.node?.data,
colDef: colDef,
})
}
return params.value
}
const gridOptions: GridOptions = { ...agGridDefaultOptions }
gridOptions.processCellForClipboard = prepareCellForClipboard
When using the row grouping feature provided by the ag-Grid, there is inserted a new 'row' as the header of the group, the click expand / collapse area which identifies that group.
Is there any way to access this row?
It is not present in row data which populates the grid.
this.autoGroupColumnDef = {
field: "column",
headerName: " Column containing the expand / collapse rows ",
valueGetter: function nameGetter(params) {
console.log("All rows: ", params.data); // group rows not present here
return params.data.nameToDisplay;
}
}
Since there is no clarity with the above code, I can just suggest you to identify which row is a group and which is not.
You can call the onModelUpdated which gets called on page load and on any update to the ag-grid.
*Example:*
onModelUpdated = (params) => {
params.api.forEachNode((node) => {
if (node.group) {
console.log('Row data', node);
} else {
//do nothing
}
});
}
node.group returns either true or false
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.
I have a handler : onCalendarEditFunc that is ment to edit selected cell from the grid. For now I have this:
onCalendarEditFunc: function() {
var selection = this.getView().getSelectionModel().getSelection();
requires : [
'Ext.grid.plugin.CellEditing',
'Ext.grid.column.Column'
]
edit = this.editing;
console.log(this.getView().getSelectionModel().getSelection());
edit.cancelEdit();
// this.store.insert(0, rec);
edit.startEditByPosition({
row: this.store.indexOf(selection[0]),
column: 0
});
},
where row: this.store.indexOf(selection[0]), works fine and being like that I can edit the first cell from a selected row. But my row has a multiple columns, so I want to give column: a value which is the value of the selected cell.
Thanks
Leron
In order to detect the exact cell selected by the user (if you want to edit button functionality which make the selected cell editable as it was in my case) here is what you can do. That's the begining of the initComponent function
initComponent: function(){
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
Ext.apply(this, {
title: 'Календар',
frame: false,
plugins : [this.editing],
store: 'CalendarEvents',
selModel: {
selType: 'cellmodel'
},
The important part here is
selModel: {
selType: 'cellmodel'
},
which then allows you to use the following syntaxis in the edit function:
editfunction: function() {
var selection = this.view.getSelectionModel().getCurrentPosition();
requires : [
'Ext.grid.plugin.CellEditing',
'Ext.grid.column.Column',
'Ext.selection.CellModel'
]
edit = this.editing;
//console.log(this.view.getSelectionModel().getCurrentPosition().column);
edit.cancelEdit();
// this.store.insert(0, rec);
edit.startEditByPosition({
row: selection.row,
column: selection.column
});
},
And this is it, now you get the position of the selected cell and pass it so you can start editing from there or as it is in the function:
edit.startEditByPosition({
row: selection.row,
column: selection.column
});
Try something like this:
edit.cancelEdit();
edit.startEdit(selection[0] /* this basically your record */, column /* 3 for example */);
I try to receive row id of JQGrid on checkbox click like:
loadComplete : function() {
jQuery(".jqgrow td input").each(function() {
jQuery(this).click(function() {
var grid = $("#list");
var rowid = grid.jqGrid('getGridParam', 'selrow');
alert(rowid);
});
});
}
But row is not selected - so I always receive a null.
What can be the reason?
Thanks.
The reason is var rowid = grid.jqGrid('getGridParam', 'selrow'); will only contain rowid if you have already selected a row by clicking on the row before.
If you want an alternative, then you can select the checkbox on onSelectRow instead
onSelectRow: function(id,status){
var rowData = jQuery(this).getRowData(id);
var ch = jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked');
if(ch) {
jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked',false);
} else {
jQuery(this).find('#'+id+' input[type=checkbox]').attr('checked',true);
}
rowChecked=1;
currentrow=id;
}
Why not use the onSelectRow event built in jqGrid?
You can read more about jqGrid events here