How to make some row read-only?

[Akira Kume]

Hi,

Is there a way to make some rows read-only?

I have read the documentation but could not find a way.

[Sridharan Jayabalan]

Hi Akira,

 

Greetings from Syncfusion.

 

We have default "readOnly" property which disables editing for all rows. Since your requirement is to make only a specific row read-only, we recommend using the actionBegin and cellEdit events.

 

For example, we’ve implemented a read-only restriction for "Task ID 3" by canceling edit, taskbar modification, and dialog interactions within these events. This ensures Task ID 3 remains non-editable across all UI interactions.

 

Refer the below code snippet and sample for your reference.

 

Code-Snippet:   

const Editing = () => {

  const onActionBegin = (args) => {

    if (args.requestType === 'beforeOpenEditDialog') {

      // prevent dialog edit

      const rowData = args.rowData; // Example: Make task with ID 3 read-only

      if (rowData.TaskID === 3) {

        args.cancel = true;

      }

    }

    if (args.requestType === 'taskbarediting' && args.data.TaskID == 3) {

      // prevent taskbar edit

      args.cancel = true;

    }

  };

 

  function cellEdit(args) {

    // prevent cell edit

    if (args.rowData.TaskID == 3) {

      args.cancel = true;

    }

  }

  return (

        <GanttComponent

          id="Editing" 

          actionBegin={onActionBegin}

          cellEdit={cellEdit}

        >

        </GanttComponent>

  );

};

 

Sample - M3mcvokw (duplicated) - StackBlitz

 

 

Regards,

Sridharan