I am using Ag-Grid for displaying tabular data, is there a way we can add a placeholder in the dropdown options which are displayed in a column where we have an agSelectCellEditor?
Problem Statement:
Sample Code:
for(const [key,value] of countryCodes ) {
if (key !== ' ') {
countryNames.push([value.countriesCd]);
}
}
console.log(this.countryNames) = [['France'], ['Belgium'], ['USA'], ['UAE']]
For eg: The column filed = 'country'
country.cellEditor = 'agSelectCellEditor',
country.singleClickEdit = true,
country.cellEditorParams = {
values.countryNames,
}
When clicking on the country column, it shows the select dropdown with the countryNames list and without making any selection it defaults the dropdown to France, its confusing for the users as an option is displayed in the editorCell without selection
Related
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;
}
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.
Is there a way to have row selection checkbox for each row without configuring a special column for it? I mean to add propertie for my gridOptions and to see checkbox near each row, then to get all selected rows?
All the documentation I read is showing how to do it by adding it to specific column.
Thanks,
You can still have row selection without having a checkbox column - you can either simply have selection based on row selection, or have a column render with a checkbox in it (with a custom cell renderer).
Take a look at the Selection Documentation for more information about row selection, and at the Cell Rendering Documentation about cell rendering
I know it is too late to answer on this post. But It may help someone who look for solution still. It works with checkbox selection on each row (click anywhere on the row to select checkbox), shift/control and toggle selection. Here I have given only necessary code.
vm.gridOptions = {
appSpecific : {},
onRowClicked : onRowClicked,
onGridReady : function() {
let api = vm.gridApi = vm.gridOptions.api;
}
};
function toggleSelect(row) {
row.node.setSelected(!row.node.isSelected(), false);
}
function onRowClicked(row) {
var appSpecific = vm.gridOptions.appSpecific;
var lastSelectedRow = appSpecific.lastSelectedRow;
var shiftKey = row.event.shiftKey;
// if not modifier keys are clicked toggle row
if (!shiftKey) {
toggleSelect(row);
} else if (lastSelectedRow !== undefined) {
if (shiftKey) {
var startIndex, endIndex;
// Get our start and end indexes correct
if (row.rowIndex < lastSelectedRow.rowIndex) {
startIndex = row.rowIndex;
endIndex = lastSelectedRow.rowIndex;
}
else {
startIndex = lastSelectedRow.rowIndex;
endIndex = row.rowIndex;
}
// Select all the rows between the previously selected row and the
// newly clicked row
for (var i = startIndex; i <= endIndex; i++) {
vm.gridApi.selectIndex(i, true, true);
}
}
}
// Store the recently clicked row for future use
appSpecific.lastSelectedRow = row;
getSelection(); // Implement functionality to get selected rows
}
I'm trying to set values in a slick grid from jQuery thru val and text e.g. .find('div.slick-cell.l2.r2').text('xyz'). There is a jquery autocomplete on the cell in question but it only gets activated on click. So when I click the cell in question it get overwritten by the initial defaultValue in the editor:
function ComboBoxEditor(args) {
...
this.loadValue = function (item) {
defaultValue = item[args.column.field] || "";
$input.val(defaultValue);
$input[0].defaultValue = defaultValue;
$input.select();
};
...
Can I get the jQuery text value from within the world of the slick grid.
Think of slickgrid as a rendering engine and dataView as the data interface (You are using dataView right?) Jquery or javascript editing of dom elements isn't gong to work so think about how jquery/javascript can use the dataView methods to do the updating.
I ran into this same issue when adding drag and drop of files into SlickGrid
I detect the elementID of the drop and map it back to the dataView row and column.
Here is the function I used for text pasting:
function insertText(textString, location) {
grid.resetActiveCell();
$(location).click();
var startCell = grid.getActiveCell();
if (startCell) {
// only paste text into active cells for now
var columnDef = grid.getColumns();
var colField = columnDef[startCell.cell].field;
if (!dataView.getItem(startCell.row)) {
// new row
var tobj = {'id': "new_" + (Math.random() + 1).toString(36).substring(7)};
tobj[colField] = textString;
dataView.addItem(tobj);
} else {
// modify existing cell
var item = dataView.getItem(startCell.row);
item[colField] = textString;
dataView.updateItem(item.id, item);
}
grid.resetActiveCell();
grid.render();
dataView.refresh();
}
}