Gantt Component - Custom edit for ColumnDirective doesn't work with disabling cell via allowEditing=false

Question

I have a Column directive that I wanted to disable the editing feature in some cell while the other is enable and using a custom edit cell via "edit" property

I try setting allowEditing to false on actionBegin for cell that I wanted to disable following a similar instruction here: https://helpej2.syncfusion.com/aspnetcore/documentation/grid/how-to/disable-editing-for-particular-row-cell#:~:text=You%20can%20disable%20the%20editing,Denmark%20is%20prevented%20from%20editing.&text=For%20batch%20mode%20of%20editing,use%20CellEdit%20event%20of%20Grid.

but it didn't work at all as every cell is editable with the custom edit

here is the function for actionBegin

 const actionBegin: (props) => void = (props) => {
        if (props.type === "edit") {
            if (props.rowData.genericType === "Project") {
                props.cancel = true;
                props.columnObject = JSON.parse(JSON.stringify(props.columnObject));
                props.columnObject.allowEditing = false;
            } else {
                props.cancel = false;
                props.columnObject.allowEditing = true;
            }
        }

        if (props.requestType === "splitTaskbar") {
            console.info("Split task ");
        } else if (props.requestType === "mergeSegment") {
            console.info("mergeTask: ");
        }
    };

here is the ColumnDirective that I have setup for custom edit view

 <ColumnDirective
                        field="TaskName"
                        headerText="ID & Name"
                        clipMode="EllipsisWithTooltip"
                        minWidth="200"
                        edit={{
                            create: (property) => {
                                elem = document.createElement("input");
                                elem.value = property.value;
                                return elem;
                            },
                            destroy: () => {
                                dObj.destroy();
                            },
                            read: () => {
                                return dObj.value;
                            },
                            write: () => {
                                dObj = new AutoComplete({
                                    dataSource: usersToSearch,
                                    fields: { value: "fullName" }
                                });
                                dObj.appendTo(elem);
                            }
                        }}
                    ></ColumnDirective>

Premkumar Sudalaimuthu · Answer

Hi Thomas ,

Query

Solution

Disable the celledit of particular column using allowEditing as false

We can able to disable the cell edit for particular column when we map allowEditing as false in the column. We have shared sample and code snippets for your reference.

Code snippets:

<ColumnDirective

field="TaskName"

allowEditing={false}

></ColumnDirective>

Sample: https://stackblitz.com/edit/react-1mm81m?file=index.js

For disabling particular cell using action begin

We have forwarded the query to the dependent team and will share further details within 2 business days on 25^th March 2022. Until then we appreciate your patience.

Regards,

Premkumar S

Thomas Quan · Answer

Thank you for the quick reply and will be looking forward to the further details that will be share.

Premkumar Sudalaimuthu · Answer

We suggest you use cellEdit event for disabling a particular cell from editing. The cellEdit will trigger when the Edit action begins. 
 
Refer to the code below:- 




 
cellEdit(args) { 
     if (args.columnName == 'duration' && args.value == 5) { 
            args.cancel = true; 
        } 
    } 
 
sample Link: https://stackblitz.com/edit/react-d74not  
 
 
Regards, 
Premkumar S

Thomas Quan · Answer

Thank you, that seems to work for me

Ranjani Prabakaran · Answer

Hi Thomas, 
  
Great! Please get back to us if you need any further assistance. 
  
Regards,Ranjani