How to display items only in the edit dialog

[Akira Kume]

Hi,

I have three features I'd like to implement based on the sample below. Could you please tell me how to implement them?

1.I want to hide the num1, num2, and sum fields from the grid columns and make them editable only in the edit dialog.

2.When you enter num1 or num2, I want the sum to display the total value.

3.When editing the row with Task ID 2, I want to prevent the INPUT NUMNBER tab from being displayed.

sample:https://stackblitz.com/edit/react-wrbgsnq3-xaztgcag?file=index.js

[Sridharan Jayabalan]

Hi Akira,

 

Greetings from Syncfusion.

 

Query 1 - I want to hide the num1, num2, and sum fields from the grid columns and make them editable only in the edit dialog.

 

Keep the fields hidden in the grid: Declare the columns with visible={false}. This uses the standard column visibility setting in the React Gantt component and keeps those fields out of the grid view.

Temporarily show fields in the Add/Edit dialog: Use the actionBegin event with requestType values:'beforeOpenAddDialog' & 'beforeOpenEditDialog'. When either dialog is about to open, access each column via ganttRef.current.columnByField[field] and set visible = true. This ensures the editors for num1, num2, and sum render in the dialog.

 

Query 2 - When you enter num1 or num2, I want the sum to display the total value.

Inside the actionBegin event, when the requestType is "beforeSave", you can retrieve the values entered in the Edit dialog and assign the calculated total to both args.data.sum and args.data.taskData.sum.

 

Query 3 - When editing the row with Task ID 2, I want to prevent the INPUT NUMNBER tab from being displayed.

In the actionBegin event, when requestType === 'beforeOpenEditDialog', check args.rowData.taskId. If it is 2, remove the “INPUT NUMBER” tab from the Edit dialog by filtering args.tabModel.items using its headerText.

 

Code-Snippet:   

index.js:-

 

function App() {

 

  const actionBegin = (args) => {

    if (

      args.requestType == 'beforeOpenEditDialog' ||

      args.requestType == 'beforeOpenAddDialog'

    ) {

      // modify visibilty in dialogs (Query 1)

      ganttRef.current.columnByField['num1'].visible = true;

      ganttRef.current.columnByField['num2'].visible = true;

      ganttRef.current.columnByField['sum'].visible = true;

      if (args.rowData.taskId == 2) {

        // prevent "INPUT NUMBER" tab for taskId 2 (Query 3)

        args.tabModel.items = args.tabModel.items.filter(i => i.header.text !== 'INPUT NUMNBER');

      }

    }

 

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

      // set total value of the field "num1" & "num2" to "sum" (Query 2)

      const n1 = Number(args.data?.num1) || 0;

      const n2 = Number(args.data?.num2) || 0;

      const sum = n1 + n2;

      args.data.sum = sum;

      args.data.taskData.sum = sum;

    }

  },

 

  return (

    <>

      <GanttComponent

        actionBegin={actionBegin}

      >

        <ColumnsDirective>

          // To hide columns in Grid

          <ColumnDirective field="num1" visible={false} />

          <ColumnDirective field="num2" visible={false} />

          <ColumnDirective field="sum" visible={false} />

        </ColumnsDirective>

 

        <EditDialogFieldsDirective>

          <EditDialogFieldDirective

            type="Custom"

            headerText="INPUT NUMNBER"

            fields={['num1', 'num2', 'sum']}

          ></EditDialogFieldDirective>

        </EditDialogFieldsDirective>

 

      </GanttComponent>

    </>

  );

}

 

Sample - only in the edit dialog (duplicated) - StackBlitz

Kb - How to Customize Column Visibility in React Gantt Chart?

If we misunderstood your query, share us detailed information of your requirement.

 

Regards,

Sridharan