Is there a way to know which column is being edited?

[Niels Van Goethem]

In my grid, I have a few columns that have translations. When the grid is in read mode, the value is being shown in the current language. But I want the user to be able to change other languages as well.

My idea is to open a dialog when the user begins editing one of those columns. Is it possible to know which column is being edit, while the row is in edit mode?

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

Upon reviewing your query, we have identified that you require the column name from the edited row to adjust the language on the Grid accordingly. To provide a more effective solution, we need additional information. Kindly share the following details:

1. Specify the mode of editing employed in your Grid.

2. Indicate the type of data binding used in the Grid—whether it is remote or local. If remote data is utilized, please provide the adaptor details.

3. Provide the complete Grid rendering code along with any event handler functions.

4. Mention the Syncfusion package version currently in use.

Regards

Aishwarya R

[Niels Van Goethem]

Dear Aishwarya, it is incorrect that I want the column name to adjust the language in the grid. What I am trying to achieve, is that I use inline editing in the grid. Some columns, for fields like "name", "description", etc, different values for differen languages exist. To make these translations easily accessible for editing, I came up with the idea of using a dialog for that (either custom or provided by the grid component). Is it possible to either:

• Know which column is being edited, so in the "actionBegin" event, I can open a dialog or not
• Or if there is another way to handle this situation within the grid component

I am working with remote data, using the UrlAdaptor. The typescript code looks as follows:

<mat-card>

  <div class="header">

    <mat-icon class="header-icon">developer_board</mat-icon>

    <div class="title">

      <h3>{{ 'Processes.SubTitle' | translate }}</h3>

      <h2>{{ 'Processes.Title' | translate }}</h2>

    </div>

  </div>

  <ejs-grid

    [dataSource]="dataManager"

    [loadingIndicator]="loadingIndicator"

    [pageSettings]="pageSettings"

    [allowPaging]="true"

    [editSettings]="editSettings"

    (actionBegin)="actionBegin($event)"

  >

    <e-columns>

      <e-column [field]="nameField" [headerText]="'Processes.Headers.Name' | translate"></e-column>

      <e-column

        field="code"

        [headerText]="'Processes.Headers.Code' | translate"

        width="120"

      ></e-column>

      <e-column

        [field]="descriptionField"

        [headerText]="'Processes.Headers.Description' | translate"

      ></e-column>

      <e-column

        field="wcmPillarNames"

        editType="dropdownedit"

        [headerText]="'Processes.Headers.WcmPillars' | translate"

      ></e-column>

      <e-column

        field="strategicalAxisNames"

        editType="dropdownedit"

        [headerText]="'Processes.Headers.StrategicalAxis' | translate"

      ></e-column>

      <e-column

        [headerText]="'Processes.Headers.IsActive' | translate"

        width="70"

        textAlign="Right"

      >

        <ng-template #template let-data>

          <mat-slide-toggle [checked]="data.isActive"></mat-slide-toggle>

        </ng-template>

      </e-column>

    </e-columns>

  </ejs-grid>

</mat-card>

<ejs-dialog #nameDialog isModal="true" showCloseIcon="true" [(visible)]="nameDialogVisible">

  <ng-template #header>

    <mat-icon>badge</mat-icon>

    <div class="title">

      <h2>{{ 'Processes.Popups.Name.Title' | translate }}</h2>

      <h3>{{ 'Processes.Popups.Name.SubTitle' | translate }}</h3>

    </div>

  </ng-template>

  <ng-template #content>

    <am-translations-form

      [translations]="names"

      [label]="'Roles.Details.Name'"

    ></am-translations-form>

  </ng-template>

</ejs-dialog>



import { Component, OnInit, ViewChild } from '@angular/core';

import { TranslationService } from '@arcelormittal-platform/core';

import { ProcessesGridService } from '@masterdata/services';

import {

  LoadingIndicator,

  PageSettingsModel,

  EditSettingsModel,

} from '@syncfusion/ej2-angular-grids';

import { DialogComponent } from '@syncfusion/ej2-angular-popups';

import { DataManager } from '@syncfusion/ej2-data';

import { FormArray } from '@angular/forms';

@Component({

  selector: 'am-processes',

  templateUrl: './processes.component.html',

  styleUrls: ['./processes.component.scss'],

})

export class ProcessesComponent implements OnInit {

  @ViewChild('nameDialog') public nameDialog: DialogComponent;

  public dataManager: DataManager;

  public loadingIndicator: Partial<LoadingIndicator>;

  public pageSettings: PageSettingsModel;

  public editSettings: EditSettingsModel;

  public currentNameFormArray: FormArray;

  public nameDialogVisible = false;

  constructor(

    private readonly processesService: ProcessesGridService,

    private readonly translationService: TranslationService

  ) {}

  get nameField(): string {

    return `name${this.translationService.getCurrentLanguage().toUpperCase()}`;

  }

  get descriptionField(): string {

    return `description${this.translationService.getCurrentLanguage().toUpperCase()}`;

  }

  ngOnInit(): void {

    this.loadingIndicator = { indicatorType: 'Shimmer' };

    this.dataManager = this.processesService.getGridDataManager();

    this.pageSettings = { pageSize: 20 };

    this.editSettings = {

      allowEditing: true,

      allowAdding: true,

      allowDeleting: true,

      mode: 'Normal',

    };

  }

  actionBegin(args: any): void {

    console.log('🚀 ~ ProcessesComponent ~ actionBegin ~ args:', args);

    if (args.requestType === 'beginEdit' && args.column.field.includes('name')) {

      this.nameDialogVisible = true;

    }

    if ((args.requestType = 'save')) {

      args.cancel = true;

      console.log('🚀 ~ ProcessesComponent ~ actionBegin ~ args.data:', args);

    }

  }

}

We are using Syncfusion 26.2.7

Or maybe it is easier to edit the translations in the details panel, instead of a custom dialog?

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Sorry for the inconvenience caused.

Query1: “Know which column is being edited, so in the "actionBegin" event, I can open a dialog or not”

To address your requirement for triggering a dialog based on a column name during the Grid's actionBegin event, we have developed a similar sample based on the shared code example. In this sample, the column name is retrieved from the recordClick event of the Grid and utilized to initiate the dialog in the actionBegin event. Please refer to the sample and code example provided below for more details.

App.component.ts

    actionBegin(args: any) :void {

        if (args.requestType === 'beginEdit' && this.columnName === "Employees") {

          this.nameDialogVisible = true;

        }

    }

    recordClick(args: any) :void {

        this.columnName = args.column.field;

    }

Sample: Vu8unu (forked) - StackBlitz

Query 2: “Or if there is another way to handle this situation within the grid component”.

Query 3: “Or maybe it is easier to edit the translations in the details panel, instead of a custom dialog”

To offer an enhanced solution for the above queries, we require additional information to accurately understand your requirements and provide an optimal solution.

1. You mentioned that you are using columns with translations in the Grid, which change values based on different languages. Kindly provide details on how you manage this language switching and how the Grid values are updated accordingly.
2. Kindly share a simple video demonstration of your use case.
3. Please explain, in the case of editing, how you are trying to make the language change accessible using the dialog.
4. If possible, please try to implement the same with the shared sample and explain your exact requirement.

Regards

Aishwarya R