Row-based edit settings

[Ignacy Mielniczek]

Hi,

I am working with a tree grid in edit mode and I need row-based edit settings. See this screenshot:

When I edit the "Amount" row, I need to have a regular input (editType='stringedit') but when I edit the "Unit" row, I need to display a dropdown (editType='dropdownedit') to display options: ml/g, etc.

Is this possible with Syncfusion Grid?

[Pon Selva Jeganathan]

Hi Ignacy Mielniczek,

Query: When I edit the "Amount" row, I need to have a regular input (editType='stringedit') but when I edit the "Unit" row, I need to display a dropdown (editType='dropdownedit') to display options: ml/g, etc

We have achieved your requirement by using the edit template feature and actionBegin event of the treegrid. The edit template is used to add a custom component for a particular column when the column is edited.

Please refer to the below code example,

App.component.html

 

<ejs-treegrid

    #treegrid

    [dataSource]="data"

    height="400"

    childMapping="subtasks"

    [treeColumnIndex]="1"

    [selectionSettings]="selectionsettings"

    (actionBegin)="actionBegin($event)"

    [editSettings]="editSettings"

    [toolbar]="toolbar"

  >

    <e-columns>

..

      <e-column

        field="taskName"

        headerText="Task Name"

        allowEditng="true"

        width="220"

      >

        <ng-template #editTemplate let-data>

          <div

            *ngIf="

              data.taskID == 5 ||

                data.taskID == 4 ||

                data.taskID == 8 ||

                data.taskID == 2;

              else second

            "

          >

            <ejs-dropdownlist

              id="taskName"

              [dataSource]="dddata"

              #samples

              [(ngModel)]="orderData.taskName"

            ></ejs-dropdownlist>

          </div>

        </ng-template>

        <ng-template #second let-data>

          <input

            class="e-input"

            name="input"

            type="text"

            [(ngModel)]="orderData.taskName"

          />

        </ng-template>

      </e-column>

 

 

….

 

App.component.ts

 

 actionBegin(args) {

    if (args.requestType === 'beginEdit' || args.requestType === 'add') {

      this.orderData = Object.assign({}, args.rowData);

    }

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

      // cast string to integer value.

      const taskName = 'taskName';

      args.data[taskName] = this.orderData[taskName];

    }

  }

 

 In the above code snippet, we have render different control based on condition.

Please refer to the below sample,

https://stackblitz.com/edit/angular-mqa5hw-r3kzgw?file=app.component.ts

Please refer to the below screenshot,

While Editing:

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid#actionbegin

Please get back to us if you need more assistance. 

Regards, 

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.