I am currently integrating ag-grid with angular 6. There is a specific column that needs to have editable cells. You can refer to the image below for better clarity.
https://i.sstatic.net/oZO1X.png
Is there a way to include an icon that, once clicked, allows the cell to become editable?
To incorporate an icon in your table cells, you must utilize the cellRenderer property within the objects contained in the columnDefs array. Essentially, you combine the content you wish to exhibit with the desired icon inside a single <span> element.
something.component.ts
columnDefs = [
/* ... */
{ headerName: 'Notes', field: 'notes', editable: true,
cellRenderer: function(params) {
return '<span><i class="material-icons">edit</i>' + params.value + '</span>'
} }
];
Consider using this code snippet as your cellRenderer function in ag-Grid:
cellRenderer: params => {
let eIconGui = document.createElement('span');
return eIconGui.innerHTML = '<em class="material-icons">edit</em>' + ' ' + params.data.value;
}
You could also achieve this using a CSS class
/* ---- conditional : only some cell are editable based on cell data type/field -----*/
cellClass: function(params) { return (params.data && params.data.sale ? 'editable-grid-cell':''); },
/* ------ if all cells are editable ----------*/
cellClass: 'editable-grid-cell',
Next, include the following CSS
.editable-grid-cell::after {
content: "\F303";
font-family: "Font Awesome 5 Free";
position: absolute;
top: 0;
right: 0;
font-size: 15px;
font-weight: 900;
z-index: -1; /* this places it in the background so that clicking on it triggers the cell-click event */
}
If you're working in Angular, you may need to use ::ng-deep to override component level styles like so:
::ng-deep ..editable-grid-cell::after { .... }
Be sure to take a look at the official live demonstration
View our altered version of the plnkr example
Instead of using the getRenderer() method, consider creating a customized cellRenderer component and inserting it into the gridOptions under components or frameworkComponents
I am seeking a method to define generic computation on a data set and have the compiler alert me if there are any errors. Having experience with TypeScript, I have seen that you can achieve something like this: /** * Type inferred as: * Array<{ * ...
I am working on a web application that utilizes Kendo Grid. How can I retrieve the values of the "Ticket No" from the selected checkboxes? https://i.stack.imgur.com/aPOje.png This is my code: var grid = $("#poGrid").data("kendoGrid"); grid.items().filte ...
Is it possible to transform this class declaration into a constructor function without losing TypeScript compatibility? class Animal { constructor(public name: string, public energy: string) {} } ...
One practical application of the never type in typescript occurs when a function has an endpoint that is never reached. However, I'm unsure why the throw statement specifically results in this unreachable endpoint. function error(message: string): ne ...
Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...
After developing a site with Angular, everything was running smoothly on my local host. However, when I decided to host the site on GitHub, two errors appeared. You can access my site through this link: Here is a screenshot of the errors encountered [1]: ...
When utilizing the code below, my goal is to filter the first array by checking if the item's id exists in the second array. However, I am encountering an issue where the result is coming back empty. dialogRef.afterClosed().subscribe((airlines: Airli ...
My goal is to store all numbers retrieved from the function getWarrentsNumber() in ionic storage, but I encountered an error. Error: The argument of type "number" cannot be assigned to type 'string'. this.storage.set(this.NumberOfAssignedWarren ...
Hello, I've got an array structured as follows: let test = ["testOne:,O,U,0","testTwo:R,C,0","testTree:1.334","testFour:r,z"]; I'm looking to iterate through the array and remove any occurrences of the cha ...
I am faced with a challenge involving 3 objects of the same type, each having different values for their properties. My goal is to add them together as illustrated below: Consider this scenario: objA = { data: { SH: { propertyA: 0, propertyB: ...
I have a simple scenario that resembles the following and is functioning perfectly: export interface CustomState { someBool: boolean; status: string; } function checkStateDifference<K extends keyof CustomState>(props: { stateKey: K, value: Custo ...
Is there a way to access the original target node when using MutationObserver with options set to childList: true and subtree: true? According to the documentation on MDN, the target node changes to the mutated node during callbacks, but I want to always ...
I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...
After defining these two Sequelize models: export class Users extends Model<Users> { @HasMany(() => UserRoles) @Column({ primaryKey: true, allowNull: false, unique: true }) UserId: string; @Column({ allowNull: false, unique: tru ...
Currently, I am tackling SSR projects using Nuxt and Quasar. However, I encountered an issue when trying to display a dynamic image in a child component as the image is not being shown. The snippet of my code in question is as follows: function getUrl (im ...
My current project involves building a React JS application with TypeScript, where I utilize the TinyMCE editor within a form. To further enhance my development process, I am incorporating integration tests using Cypress in TypeScript. However, I have enco ...
I've been troubleshooting this problem for a while now and I'm hoping that someone here can assist me with finding a solution. The issue at hand involves an array object containing various values such as id, title, amountCounter. Specifically, t ...
I'm a little unsure of my TypeScript knowledge. I have a class MyClass with a member variable that is a function, but I don't know what this function will be at compile time. I want to allow external code to set this function dynamically during r ...
Apologies in advance, as I am working on a professional project and cannot provide specific details. Therefore, I need to describe the situation without revealing actual terms. I am making a GET request to an API that responds in the following format: [0: ...
I have implemented a next-intl library to enable multi-language support on my website. This means that the paths for different languages look like www.next.com/de or www.next.com/en Currently, I am utilizing NextJS 14. <NextLink href="/support-us& ...