How to prevent a column from being edited

[Zachary]

I have a column with a button in it. When I click to edit the row it turns into a textbox. is there an option to disable editing for a column?

I treid binding it to allowediting with a value of false, but it does not work.

    <e-column headerText='' [allowEditing]="blockEdit">

      <ng-template #template let-data>

        <div>

          <button ejs-button class="DefaultButton"   (click)="onDelete($event)">

            Delete

          </button>

        </div>

      </ng-template>      

    </e-column>

  </e-columns>

[Zachary]

I actually do now notice that the textbox is read only when I applied the allowEditing property, but I just wanted to clarify, what I actually would like is not to show a textbox at all in edit mode.

[Jagadesh Ram Raajkumar]

Hi Zachary, 

  

Greetings from Syncfusion Support. 

  

Query: Need to hide column template when editing a row. 

  

To hide the column template which is a button in your scenario, you can use the actionComplete event to add the CSS class ‘e-hide’ to the respective cell, the button which has been rendered will be hidden while you are editing the row. Please refer to the below code snippet.

Code Snippet: 

[App.component.html] 

    <ejs-treegrid [dataSource]='data' allowPaging='true' childMapping='subtasks' height='350' [treeColumnIndex]='1' 

    [editSettings]='editSettings'  (actionComplete)='actionComplete($event)'> 

        <e-columns> 

            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column> 

            <e-column field='taskName' headerText='Task Name' width='200'></e-column> 

            <e-column headerText='' [allowEditing]=false> 

            <ng-template #template let-data> 

              <div> 

                <button ejs-button class="DefaultButton" (click)="onDelete($event)"> 

                  Delete 

                </button> 

              </div> 

            </ng-template>       

          </e-column> 

        </e-columns> 

    </ejs-treegrid> 

  

[App.component.ts] 

  

export class AppComponent {    public data: Object[] = [];    public editSettings: EditSettingsModel;     ngOnInit(): void {        this.data = sampleData;        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };     }    actionComplete(args: EditEventArgs) {        if (args.requestType === "beginEdit") {                    (args.row as HTMLTableRowElement).cells[0].querySelectorAll('.e-rowcell')[2].classList.add('e-hide')                 }      }}

  

Please refer to the below sample and documentation,

Sample: https://stackblitz.com/edit/angular-f169099?file=app.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/api/treegrid/#actioncomplete

Please get back to us for further assistance.

 

Regards,
Jagadesh Ram