I am using ag-grid and I would like to highlight cells in a column if the cell values for a particular column are duplicated. The duplicated cells should be highlighted using a red border.
You can achieve the duplicate highlighting by iterating through the row data to detect the duplicate values and then pass the detected duplicates to a custom cellStyle function.
defaultColDef = {
cellStyle: function(params) {
const columnId = params.colDef.field;
const currentValue = params.value;
const duplicates = params.context.duplicates;
if (columnId in duplicates && duplicates[columnId] == currentValue){
return { 'background-color': 'red' };
}
return { 'background-color': null};
}
}
ngOnInit() {
for (let key in this.rowData[0]) {
let seenValues = new Set<string>()
for (let i in this.rowData){
const item = this.rowData[i]
if (seenValues.has(item[key])){
this.duplicates[key] = item[key];
} else {
seenValues.add(item[key]);
}
}
}
}
Here is an example:
Here is the code for AngularJS:
https://stackblitz.com/edit/ag-grid-duplicates-highlighting-6adsz6
Here is the code for Vue:
https://stackblitz.com/edit/ag-grid-highlight-duplicates-vue
Related
I am using w2ui (1.5) and I would be interested in whether it is possible to use a filter that only delivers negative results
That means only records/keys which not fullfilling a certain criteria.
Like a condition "contains not" or "is not" in addition to
http://w2ui.com/web/docs/1.5/w2grid.textSearch.
Thanks!
Gordon
okay, a possible solution is
w2ui['grid'].search([{ field: var1, value: var2, operator: 'not in'}], 'OR');
I coded my own solution to this problem. This adds a way to use "not" for string and "!=" for number searches.
This function does the search and it is also used to store the grid advanced search popup in history state.
I'm sure this can be even more optimized, so please use this more like a guideline. Hope this helps somebody.
function searchExtend(event, grid) {
// if event is null, we do just the local search
var searchObj;
if (event == null) {
searchObj = grid;
} else {
searchObj = event;
}
// make a copy of old data
const oldSearchData = structuredClone(searchObj.searchData);
const oldSearchLogic = structuredClone(searchObj.searchLogic);
var searchData = searchObj.searchData;
var invertedSdata = [];
var toSplice = [];
// check operator if it's "not" or "!="
for (var i = 0; i < searchData.length; i++) {
var sdata = searchData[i];
// invert the condition
if (sdata.operator == "not") {
toSplice.push(i);
invertedSdata.push({
field: sdata.field,
type: sdata.type,
operator: "contains",
value: sdata.value
});
}
if (sdata.operator == "!=") {
toSplice.push(i);
invertedSdata.push({
field: sdata.field,
type: sdata.type,
operator: "=",
value: sdata.value
});
}
}
// remove all "not" and "!=" from searchData
for (var i in toSplice) {
searchData.splice(i, 1);
}
var foundIds = [];
// use inverted criteria to search
if (invertedSdata.length > 0) {
grid.searchData = invertedSdata;
grid.searchLogic = "OR";
grid.localSearch();
grid.searchLogic = oldSearchLogic;
// store found ids
foundIds = structuredClone(grid.last.searchIds);
}
if (foundIds.length > 0) {
// perform a search with original criteria - spliced "not" and "!="
grid.searchData = searchData;
grid.localSearch();
var allRecIds = structuredClone(grid.last.searchIds);
// if there's not any results, push push all recIds
if (grid.last.searchIds.length == 0) {
for (let i = 0; i < grid.records.length; i++) {
allRecIds.push(i);
}
}
// remove all ids found with inverted criteria from results. This way we do the "not" search
for (const id of foundIds) {
allRecIds.splice(allRecIds.indexOf(id), 1);
}
if (event != null) {
// let the search finish, then refresh grid
event.onComplete = function() {
refreshGrid(grid, allRecIds, oldSearchData);
setSearchState(grid);
}
} else {
// refresh the grid
refreshGrid(grid, allRecIds, oldSearchData);
setSearchState(grid);
}
return;
}
if (event != null) {
event.onComplete = function() {
setSearchState(grid); // store state
}
} else {
// refresh whole grid
refreshGrid(grid, allRecIds, oldSearchData);
setSearchState(grid);
}
}
function refreshGrid(grid, allRecIds, oldSearchData) {
grid.last.searchIds = allRecIds;
grid.total = grid.last.searchIds.length;
grid.searchData = oldSearchData;
grid.refresh();
}
function setSearchState(grid) {
history.replaceState(JSON.stringify(grid.searchData), "Search");
}
To use this, you have to call it from the grid's onSearch:
onSearch: function(event) {
searchExtend(event, w2ui["grid"]);
}
Also, if you want to use the history.state feature, it needs to be called from onLoad function:
onLoad: function(event) {
event.onComplete = function() {
console.log("History state: " + history.state);
if (history.state != null) {
w2ui["grid"].searchData = JSON.parse(history.state);
searchExtend(null, w2ui["grid"]);
}
}
To add operators, please use this reference.
This is my solution to the problem:
operators: {
'text': ['is', 'begins', 'contains', 'ends', 'not'], // could have "in" and "not in"
'number': ['=', 'between', '>', '<', '>=', '<=', '!='],
'date': ['is', 'between', {
oper: 'less',
text: 'before'
}, {
oper: 'more',
text: 'after'
}],
'list': ['is'],
'hex': ['is', 'between'],
'color': ['is', 'begins', 'contains', 'ends'],
'enum': ['in', 'not in']
}
Learning ag-grid and ran into this issue. Calling a service to fill in a table. But my last column "Mode" returns an array. I want that to be broken so "Mode1" is on first row. Then "Mode2" on second row. All the previous columns for can be blank on the "Mode1" row.
Currently it print out Mode1Mode2 cause I concatenate the mode strings on the first row. I did use a rowspan that does evaluate to 2. But not sure how to force it to force the text to actually take advantage of that. Any help is appreciated and thank you.
public columnDefs;
public defaultColDef;
public rowData: DataObj[];
public title = 'Grid';
constructor(private service: DataService) {
this.columnDefs = this.createColumnDefs();
}
// on init, subscribe to the athelete data
ngOnInit() {
this.service.loadProcesses().subscribe(data => {
this.rowData = data;
console.log('data',data);
},
error => {
console.log(error);
}
)
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
} // on GridReady ends here
private createColumnDefs(){
return [
{ headerName:"IDs", field:"id", width:80 },
{ headerName:"Process", field:"content", width:120,rowSpan: calculateRowSpan },
{ headerName:"Requirement", field:"req", width:160,rowSpan: calculateRowSpan },
{ headerName:"Comment", field:"comment", width:120,rowSpan: calculateRowSpan },
{ headerName:"Mode",
field:"fModes",
valueGetter: function generateModeField(params) {
let modesCount = params.data.fModes.length;
let returnValue = '';
for (let x=0;x<modesCount;x++){
returnValue = returnValue + params.data.fModes[x].name;
}
return returnValue;
},
rowSpan: calculateRowSpan,
width:200 }
];
}
Notice it takes up rowspan of 2
As per title, is there a way to customise the "ghost text" with the (unmanaged) row-dragging implementation in AgGrid via the API?
I found workaround using valueGetter property to change this text.
Example configuration of column:
private dragDropColumn= {
rowDrag: true,
...
valueGetter: (params) => {
return params.data.myVariableFromRow;
}
}
Hope this helps
You can now use colDef.rowDragText to set a callback function to set the dragged text.
https://www.ag-grid.com/javascript-grid-row-dragging/#custom-row-drag-text
onRowDragEnter event,
you could search for the ghost element
and then append your custom class to it.
document.querySelectorAll('.ag-dnd-ghost')[0]
.classlist.add('my-custom-ghost-element');
Dont forget to follow the hierarchy of classes, otherwise you would end up using !important in the custom class :-)
// For updating text
search for the element with className ag-dnd-ghost-label
document.querySelectorAll('.ag-dnd-ghost-label')[0]
.innerHTML = 'your_custom_text';
Ghost element is added only during drag, once drag is ended, its removed from dom by Ag-Grid.
Hope this helps
I've researched this and there is nothing built in to ag-grid. I accomplished this by attaching to the onRowDragMove and onRowDragMove events.
I set a class variable 'isRowDragging' to only do this once while dragging.
I use the Angular Renderer2 class (this.ui) to find and update the Element of the ghost label.
All of this is available with vanilla javascript or other supported ag-grid frameworks.
this.gridOptions.onRowDragMove = (params: RowDragMoveEvent) => {
const overNode = params.overNode;
const movingNode = params.node;
if (!this.isRowDragging) {
this.isRowDragging = true;
if (!movingNode.isSelected()) {
if (params.event && params.event.ctrlKey) {
movingNode.setSelected(true);
}
if (params.event && !params.event.ctrlKey) {
movingNode.setSelected(true, true);
}
}
let labelText: string = '';
const selectedNodes = this.gridOptions.api.getSelectedNodes();
if (selectedNodes.length === 1) {
labelText = selectedNodes[0].data.Name;
}
else {
const guids: string[] = [];
let folderCount: number = 0;
let docCount: number = 0;
selectedNodes.forEach((node: RowNode) => {
guids.push((node.data.FolderGuid || node.data.DocumentGuid).toLowerCase());
if (node.data.FolderGuid !== undefined) {
folderCount++;
}
else {
docCount++;
}
});
if (folderCount === 1) {
labelText = '1 folder';
}
else if (folderCount > 1) {
labelText = folderCount + ' folders';
}
if (docCount === 1) {
labelText += (labelText !== '' ? ', ' : '') + '1 document';
}
else if (docCount > 1) {
labelText += (labelText !== '' ? ', ' : '') + docCount + ' documents';
}
}
console.log(this.ui.find(document.body, '.ag-dnd-ghost').outerHTML);
this.ui.find(document.body, '.ag-dnd-ghost-label').innerHTML = labelText;
}
}
this.gridOptions.onRowDragEnd = (event: RowDragEndEvent) => {
this.isRowDragging = false;
}
I am using ag-grid with react and using cellRendererFramework property of ColDef to use custom react component, my value getter returns object, so when I start dragging I am getting [object object], I added toString method to returning object and did the trick, below is my sample code
const col1 = {
rowDrag: true,
...
valueGetter: (params) => {
const {id, name} = params.data;
return {id, name, toString: () => name}; // so when dragging it will display name property
}
}
I've customized the arrow navigation keys using the callback 'navigateToNextCell'.
But now I want to customize 'Home' and 'End' key.
There is any way to do it?
It's not super easy at the moment... here are some relevant "enhancements" that have been requested on the github page:
support page up/ down, home and end keys
allow overriding of keyboard events
Suggestion: Allow any key for navigation (not just tab)
That last link has something useful. There is a comment on how to disable any propagation of the 'home' and 'end' keys:
// note, this is angular 2 code, `this.el.nativeElement` is just the grid component
document.documentElement.addEventListener(
'keydown',
(e: KeyboardEvent) => {
// this runs on the document element, so check that we're in the grid
if (this.el.nativeElement.contains(e.target)) {
if (e.key === 'Tab' || e.key === 'Home' || e.key === 'End') {
e.stopImmediatePropagation();
e.stopPropagation();
}
if (e.key === 'Home' || e.key === 'End') {
// we don't want to prevent the default tab behaviour
e.preventDefault();
}
}
},
true
);
AFTER you have done that, you could add new event listeners to the grid, or depending on what you are trying to do, you could add listeners to specific cells as it mentions in the Keyboard Navigation section of the Ag-Grid docs under Custom Actions:
Custom Actions
Custom cell renderers can listen to key presses on the focused div.
The grid element that receives the focus is provided to the cell
renderers via the eGridCell parameter. You can add your own listeners
to this cell. Via this method you can listen to any key press and do
your own action on the cell eg hitting 'x' may execute a command in
your application for that cell.
I initially wrote this code for navigating home/end with command+arrow key, but have put comments where logic differs since 98% will be the same. Comments are untested but should work
I will divide this into 4 parts:
suppress the event so ag-grid does nothing by default
find a way for us to place a event listener on the right keys
compute which cell should be navigated to next
tell ag grid which cell should be selected
For #1, we can use suppressKeyboardEvent and either set it on defaultColDef(in `GridOptions´) or on every col def.
Mine looks like this:
const suppressKeyboardEventFn: ColDef["suppressKeyboardEvent"] = (
params: SuppressKeyboardEventParams
) => {
const key = params.event.key;
const isControl = isControlKey(params.event);
// For end/home, test for key === "Home" || key === "End" instead
const isNavigation =
key === "ArrowUp" ||
key === "ArrowDown" ||
key === "ArrowRight" ||
key === "ArrowLeft";
if (isNavigation && isControl) {
return true;
}
return false;
};
isControlKey is so it works on both mac&windows, and is written as recommended by MDN (not relevant if using home/end key):
const isMac = navigator.platform.startsWith("Mac");
export const isControlKey = (event: KeyboardEvent) => {
return isMac ? event.metaKey : event.ctrlKey;
};
For #2 where we want to handle the event ourselves, we can use onCellKeyDown:
const onCellKeyDownFn: GridOptions["onCellKeyDown"] = (cellKeyDown) => {
if (cellKeyDown.event == null) {
return;
}
const event = cellKeyDown.event as KeyboardEvent;
const key = event.key;
const isControl = isControlKey(event);
// Instead write cases here for case "Home": and case "End":
switch (key) {
case "ArrowUp": {
if (isControl) {
dispatch(navigateCell({ direction: "up", end: true }));
}
break;
}
case "ArrowDown": {
if (isControl) {
dispatch(navigateCell({ direction: "down", end: true }));
}
break;
}
case "ArrowRight": {
if (isControl) {
dispatch(navigateCell({ direction: "right", end: true }));
}
break;
}
case "ArrowLeft": {
if (isControl) {
dispatch(navigateCell({ direction: "left", end: true }));
}
break;
}
}
};
Using the same isControlKey function. I have implemented redux navigation actions that handles navigating to home and end.
For #3, we can implement this in different ways. Here is how I FIND the correct cell to navigate to. Either one step to a direction, or to the end/home (which is our scenario, since I pass end: true)
// For using Home/End, add a case for each and mix logic from
// below to find the correct cell. Last column logic is in
// right when end===true and last row is in down when end===true etc
switch (params.direction) {
case "up": {
let newRowIndex;
if (params.end === true) {
newRowIndex = 0;
} else {
newRowIndex = selectedCell.lastKnownRowIndex - 1;
if (newRowIndex < 0) {
return;
}
}
const node = gridApi.getDisplayedRowAtIndex(newRowIndex);
if (node?.id == null) {
log.warn("Could not find Node ID");
return;
}
dispatch(
selectCell({
nodeId: node.id,
colKey: selectedCell.colKey,
})
);
break;
}
case "down": {
let newRowIndex;
if (params.end === true) {
newRowIndex = maxRowIndex;
} else {
newRowIndex = selectedCell.lastKnownRowIndex + 1;
if (newRowIndex > maxRowIndex) {
return;
}
}
const node = gridApi.getDisplayedRowAtIndex(newRowIndex);
if (node?.id == null) {
log.warn("Could not find Node ID");
return;
}
dispatch(
selectCell({
nodeId: node.id,
colKey: selectedCell.colKey,
})
);
break;
}
case "right": {
let nextColumn;
if (params.end === true) {
const columns = columnApi.getAllGridColumns();
nextColumn = columns[columns.length - 1];
} else {
const column = columnApi.getColumn(selectedCell.colKey);
if (column == null) {
log.warn("Could not find column");
return;
}
nextColumn = columnApi.getDisplayedColAfter(column);
}
if (nextColumn == null) {
return;
}
dispatch(
selectCell({
nodeId: selectedCell.nodeId,
colKey: nextColumn.getColId(),
})
);
break;
}
case "left": {
let nextColumn;
if (params.end === true) {
const columns = columnApi.getAllGridColumns();
nextColumn = columns[1];
} else {
const column = columnApi.getColumn(selectedCell.colKey);
if (column == null) {
log.warn("Could not find column");
return;
}
nextColumn = columnApi.getDisplayedColBefore(column);
}
if (nextColumn == null) {
return;
}
dispatch(
selectCell({
nodeId: selectedCell.nodeId,
colKey: nextColumn.getColId(),
})
);
break;
}
default: {
assertNever(params.direction);
}
}
Lastly #4, here is parts of my selectCell implementation that can give you some idea of how to make sure ag-grid focuses the right cell.
This code will focus the cell, add a range highlight, add a row selection, and make sure that it is visible if the viewport needs to jump:
// no difference in logic when using Home/End!
// just make sure correct cell is passed
gridApi.ensureNodeVisible(node);
gridApi.ensureColumnVisible(params.colKey);
gridApi.clearRangeSelection();
gridApi.addCellRange({
rowStartIndex: rowIndex,
rowEndIndex: rowIndex,
columns: [params.colKey],
});
gridApi.setFocusedCell(rowIndex, params.colKey);
node.setSelected(true, true)
Google Visualization API for GWT provides control over rows only.
How to get control over a particular cell in Visualization Table?
selection.isCell() doesn't give true result in any case.
private SelectHandler createSelectHandler(final PieChart chart) {
return new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
String message = "";
// May be multiple selections.
JsArray<Selection> selections = chart.getSelections();
for (int i = 0; i < selections.length(); i++) {
// add a new line for each selection
message += i == 0 ? "" : "\n";
Selection selection = selections.get(i);
if (selection.isCell()) {
// isCell() returns true if a cell has been selected.
// getRow() returns the row number of the selected cell.
int row = selection.getRow();
// getColumn() returns the column number of the selected cell.
int column = selection.getColumn();
message += "cell " + row + ":" + column + " selected";
} else if (selection.isRow()) {
// isRow() returns true if an entire row has been selected.
// getRow() returns the row number of the selected row.
int row = selection.getRow();
message += "row " + row + " selected";
} else {
// unreachable
message += "Pie chart selections should be either row selections or cell selections.";
message += " Other visualizations support column selections as well.";
}
}
Window.alert(message);
}
};
}
Google Table has 4 events: ready,select,page,sort.
When you sort or paginate, it stops listening the ready event.
To have the cell click working after pagination or sort you need to add the click listener on all of them.
You can use click instead of mouseover.
On select event I use getSelection to be able to get and set the selected row properties.
var colIndex;
google.visualization.events.addListener(table, 'ready', function () {
$("#table").find("td").each(function() {
$(this).mouseover(function(){
colIndex=$(this).index();
});
});
});
google.visualization.events.addListener(table, 'sort', function () {
$("#table").find("td").each(function() {
$(this).mouseover(function(){
colIndex=$(this).index();
});
});
});
google.visualization.events.addListener(table, 'page', function (event) {
$("#tableGoogle").find("td").each(function() {
$(this).mouseover(function(){
colIndex=$(this).index();
});
});
});
google.visualization.events.addListener(table, 'select', function () {
var selection = table.getSelection();
var item;
if(selection.length!=0){
lastSelection=selection;
}
for (var i = 0; i < lastSelection.length; i++) {
item = lastSelection[i];
}
switch (colIndex){
case 0:
data.setValue(item.row,index,true);
// YOUR CODE FOR COLUMN 0
break;
case 1:
var id=data.getRowProperty(item.row, 'id');
// YOUR CODE FOR COLUMN 1
break;
}
});
The Table Visualization does not pass column information in the selection event, so you cannot identify an individual cell this way. You will need to register a click event handler on the cells of the table and then determine the cell's row and column indices. Here's one way to do it using jQuery:
google.visualization.events.addListener(table, 'ready', function () {
$('#table_div td').click(function () {
var column = $(this).index();
var row = $(this).parent().index() - 1; // subtract 1 for the table header
console.log(row, column);
});
});
You'll have to adapt the event handler to the method used in the GWT Viz API package, but the jQuery code should work.
var rowIndex;
var colIndex;
google.visualization.events.addListener(table, 'ready', function () {
jQuery("#table").on("click", "td:not(.google-visualization-table-th)", function() {
colIndex = jQuery(this).index();
rowIndex = jQuery(this).parent().index() - 1;
alert("row "+rowIndex+" col "+colIndex);
//put rest of function here
});
This gets rowindex based on the row of the html. To get the rowindex based on the data (where the row's index won't change even if you sort the table and it's position changes) use
google.visualization.events.addListener(table, 'select', function() {
var selected=table.getChart().getSelection();
var item=selected[0];
rowIndex=item.row;
});
This will run before the code in the .on("click", ...) function in the ready function.