Disable editing for cell based on rowData

[Jenson]

Say a column named 'A' is only editable if the rowData has a property 'editable' to be true.

How can I do that in inline edit mode?

Thanks.

[Rajapandiyan Settu]

Hi Jenson,  

  

Thanks for contacting Syncfusion support. 

We have validated your requirement at our end. You can achieve this by using actionBegin event (RequestType as beginEdit) of Grid. 

actionBegin: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin 

In that event, you can dynamically change the allowEditing property of particular column based on the row data. Find the below code example and sample for your reference. 

allowEditing: https://ej2.syncfusion.com/vue/documentation/api/grid/column/#allowediting 

[App.vue] 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      ref="grid" 

      :dataSource="data" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      :actionBegin="actionBegin" 

      height="273px" 

    > 

      ----- 

    </ejs-grid> 

  </div> 

</template> 

<script> 

--- 

 

export default { 

  --- 

  methods: { 

    actionBegin: function (args) { 

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

        // dynamically enable and disable the editing on column based on row data 

        if (args.rowData.Editable) {  // use your condition as you want 

          this.$refs.grid.$el.ej2_instances[0].getColumnByField("CustomerID").allowEditing = true;  // enable the Editing on column 

        } else { 

          this.$refs.grid.$el.ej2_instances[0].getColumnByField("CustomerID").allowEditing = false; // disable the Editing on column 

        } 

      } 

    }, 

  }, 

}; 

</script> 

 

Sample: https://codesandbox.io/s/vue-template-forked-wbe08?file=/src/App.vue 

Please get back to us if you need further assistance with this. 

Regards,  

Rajapandiyan S