We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Row-based edit settings

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?


1 Reply

PS Pon Selva Jeganathan Syncfusion Team November 3, 2022 10:20 AM

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.




Loader.
Live Chat Icon For mobile
Up arrow icon