Enhancing data-tree server functionality with Ag-grid editing group feature

ISSUE:

I have encountered a problem where cells in group rows are not editable when using the Server Side Data-Tree mode. I followed the documentation provided for constructing the grid - https://www.ag-grid.com/javascript-grid-server-side-model-tree-data. Here is an example:

https://plnkr.co/edit/t1uZ4V3cUs6IHZDsPKYI?p=preview

Even though all columns have 'editable: true' properties, group rows remain non-editable in this example.

this.columnDefs = [
              { field: "jobTitle", editable: true },
              { field: "employmentType", editable: true }
        ];
        this.defaultColDef = {
          width: 240,
          resizable: true
        };
        this.autoGroupColumnDef = {
          cellRendererParams: {
            innerRenderer: function(params) {
              return params.data.employeeName;
            }
          }
        };
        this.rowModelType = "serverSide";
        this.isServerSideGroup = function(dataItem) {
          return dataItem.group;
        };
        this.getServerSideGroupKey = function(dataItem) {
          return dataItem.employeeId;
        };

Objective:

I expect all rows and cells (excluding Group column) to be editable. Here is an example with usual data tree without the server-side model:

https://plnkr.co/edit/HCmkdUJ7VPPoug7pOct3?p=preview

 this.columnDefs = [{ field: "jobTitle", editable: true }, { field: "employmentType", editable: true }];

It is important to note that all columns have 'editable: true' properties in both cases, but it seems to not work in the server side scenario.

Query:

What steps should I take to enable editing for all rows (even within group rows)?

Answer №1

You were on the right track - but one thing missing is defining the cellEditor for each editable cell, like so:

{ field: "jobTitle", editable: true, cellEditor: 'agLargeTextCellEditor' }

Also, keep in mind that you can't directly edit top-level values (used for grouping), you can only edit child nodes within the group.

Here are some of the available ag-grid editors for inline cell modifications:

  • agTextCellEditor - basic text editor
  • agPopupTextCellEditor - text editor in a popup
  • agLargeTextCellEditor - popup for multi-line text editing
  • agSelectCellEditor - dropdown editor
  • agPopupSelectCellEditor - dropdown editor in a popup
  • agRichSelectCellEditor - rich select editor with row virtualization (available in ag-Grid-Enterprise)

Editing grouped cells is supported starting from Version 7.2.x of ag-grid. To enable group editing, set the enableGroupEdit property to true.

<ag-grid-angular
      ...
      [enableGroupEdit] = "true"
      ...
    ></ag-grid-angular>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ionic 3: Struggling to Access Promise Value Outside Function

I've encountered an issue where I am unable to retrieve the value of a promise outside of my function. It keeps returning undefined. Here's what I have attempted so far: Home.ts class Home{ dd:any; constructor(public dbHelpr:DbHelperProvider ...

What is the process for subscribing when setting up an observable?

There's this situation where I have an observable that emits an ID. My goal is to fetch an element associated with that ID and save it into a new observable. The catch is, the new observable must be subscribed to in order to emit its value. Here' ...

The request/response is missing property "x" in type "y" but it is required in type "z" during fetch operation

I have configured an interface specifically for utilization with an asynchronous function: interface PostScriptTagResponse { script_tag : { readonly id : number , src : string , event : string , readonly created_at : string , readonl ...

The data type 'string | boolean' cannot be assigned to type 'never'. Only the data type 'string' is allowed to be assigned to type 'never'

interface popup { title: string; isActive: boolean; } type Option = "title" | "isActive"; const data: popup = retrieveData(); function retrieveData(): any { return { title: "Greetings" } } class Popup { title: string; is ...

Try using ngFor within the insertAdjacentHTML method

When a user clicks, I dynamically attach an element inside a template like this: this.optionValue = []; youClickMe(){ var moreput = ''; moreput += '<select">'; moreput += '<option *ngFor="let lup of opti ...

Is there a deeper philosophical rationale behind choosing to use (or not use) enums in TypeScript, along with string union types?

Recently, I delved into the world of enum and const enum in Typescript, causing some confusion. I grasped that const enum gets transpiled into simple values while regular enums do not. I also recognized certain distinctions between using string union type ...

A guide on manipulating queryParams within the current route in angular 2 without triggering a page reload

I am currently dealing with the following route: http://localhost:96/#/pages/settings/devices I am looking to add queryParams={name:realTime} to this existing route, like so: http://localhost:96/#/pages/settings/devices?name=realTime Can I manipulate ...

Develop a variety of Jabber client echo bots

Hello Stackoverflow Community, I've been trying different approaches to resolve my issue, but I keep ending up with stack overflow errors. Programming Language: Typescript Main Objective: To create multiple instances of the Client Class that can be ...

"Having trouble with Set-Cookie Response Header not setting the cookie? It could be due to

My webpage is located at: http://localhost:4201/login When a user clicks on login, it sends a request to: http://localhost:4201/api/login/authenticate This request is then proxied to: The response from the proxy contains a set-cookie header with the f ...

What is the purpose of a Typescript function that returns a function with a generic type?

I recently stumbled upon a perplexing piece of TypeScript code that revolves around the function componentControl. Despite my efforts, I find myself struggling to fully comprehend its purpose and functionality. componentControl: const componentControl: &l ...

A versatile generic type infused with dynamic typing and optional parameter flexibility

Looking to develop a function that can accept an optional errorCallback parameter. In cases where the consumer of this function does not provide a callback, I aim to default to a preset handler. The key criteria here are strong typing and utilizing the ret ...

What could be the reason for the absence of {{ list.title }} on display

I'm currently learning how to develop my first MEAN stack app by following a tutorial on YouTube. However, I've encountered an issue where the title of the list is not displaying correctly. I'm using Insomnia to create the lists. Here's ...

Angular struggles to process the mapped type modifiers in Typescript during compilation

In my node.js project, I have successfully implemented a custom mapped type as follows: export type Mutable<T> = { -readonly [P in keyof T]: T[P]; }; However, when I tried to add the same code to an Angular 6 project, compilation failed with th ...

Encountered error in Angular unit testing: Route matching failed to find a match

I am currently working on unit testing in my Angular 15 application. While running the test, I encountered the following error: Error: Cannot match any routes. URL Segment: 'signin' Below is the code for the unit test of my component: fdescribe ...

Incorporating JavaScript code into Ionic 3

Excuse my English. I need to integrate JS code into Ionic 3 for a specific page. I am trying to create a countdown timer using this code, but TypeScript does not allow JS code in the file. Thank you. Here is an example image: enter image description here ...

Unable to establish a connection between Laravel websocket and Angular

The CORS policy has blocked access to XMLHttpRequest from the origin 'http://localhost:4200' to the resource at 'http://localhost:8080/socket.io/?EIO=3&transport=polling&t=MgBuvgw' because there is no 'Access-Control-Allow- ...

Upon transitioning to Angular 18, an error message appears: During resolution of [email protected], the following was discovered: @angular/[email protected] was found

Regarding the ng update command: After analyzing your package.json file, it appears that everything is in order. Good job! However, despite this assessment, when using npm I encountered the following issue: https://i.sstatic.net/M6X9Osjp.png I attempted ...

Can you explain the purpose of <p>{{"TABLE.TRANSACTION_NUMBER"| translate}}</p> within Angular?

As I embark on my journey to learn Angular, I find myself faced with unfamiliar code. While analyzing some lines, I encountered puzzling elements that elude my understanding. Despite my attempt to research and seek clarification, I have failed to locate ...

Obtain the Epoch time value for various TimeZones

My current time zone is IST. I attempted to specify the timezone within the Date object like this: const usaRegionTime = new Date(inputDate.toString()).toLocaleString( 'en-US', { timeZone: 'America/New_York', ...

The safeguarding of Angular2 and Laravel against CSRF vulnerabilities

I have come across some interesting articles that I've read recently. The issue I am facing revolves around this particular section of code: <meta property="csrf-token" name="csrf-token" content="{{ csrf_token() }}"> I am utilizing Angular2 a ...