Hiding the [allowEditing]= 'false' coloumns in edit in dialog mode

[Aditya Murthy]

HI Team,

Im editing the rows in dialog for which im using dialog mode in edit setting

So i have a requirement of hiding the not editable coloums in edit mode. 

Please guide me with a solution for the same.

Regards,

Aditya

[Praveenkumar Gajendiran]

Hi Aditya,

Thanks for contacting Syncfusion support.

We checked your query and  we infer that you want to hide the not editable columns(i.e., column.allowEditing= ‘false’) in dialog edit mode. For this we suggest to use actionBegin and actionComplete events of Grid to achieve your requirement.

We can show or hide the editor by using column.visible property in the actionBegin event, based on requestType as beginEdit or add. Now we can reset the properties back to the column state in the actionComplete event, based on requestType as save.  

In the below example, we have rendered the grid columns ShipCity and ShipCountry as the not editable columns(i.e., column.allowEditing= ‘false’). In the edit mode, we have changed those columns to hidden state.

Code Example: 

<ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)="actionBegin($event)"  (actionComplete)="actionComplete($event)" > 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='120' [validationRules]='customeridrules'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 

            <e-column field='ShipCity' headerText='Ship City' width='150' [allowEditing]='false'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' editType='datepickeredit' format='yMd' textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' [allowEditing]='false' editType='dropdownedit' [edit]='editparams' ></e-column> 

        </e-columns> 

    </ejs-grid>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[app.component.ts]

actionBegin(args: EditEventArgs) { 

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

      for (const cols of this.grid.columns) { 

        if ((cols as Column).allowEditing == false) { 

          (cols as Column).visible = false; 

        } 

      } 

    } 

  } 

 

  actionComplete(args: SaveEventArgs) { 

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

      for (const cols of this.grid.columns) { 

        if ((cols as Column).allowEditing == false) { 

          (cols as Column).visible = true; 

        } 

      } 

    } 

  } 

Screenshot: 

 

We have prepared a sample based on this for reference. 

Sample: https://stackblitz.com/edit/angular-hn9knt?file=app.component.ts

Refer the below document for actionBegin and actionComplete events of Grid. 

API Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin
                 https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G