Custom Field on Table Cell and Popup DIalog

[PT Lattice Teknologi Mandiri]

Is it possible to make data on table cell and on popup dialog different for custome field ?

For example, for field  Xe i want to remove it on table cell, but i want it to still appear on popup dialog

This is my code. When i remove field Xe from ColumnDirective to remove it from the table cell. Xe field on Popup dialog is also dissapear

[Sridharan Jayabalan]

Hi PT Lattice,

 

Greetings from Syncfusion.

 

For your query, we suggest you to set visible property to false in columnDirective for  "Xe" column. This will hide the "Xe" column in the table cell, and as a default behavior, the "Xe" field will also be hidden in the dialog box.

However, if you want to hide the "Xe" column in the table cell but display it in the dialog box, we recommend enabling the visible property for that particular column using  columnByField method inside the actionBegin event. This approach allows you to customize the visibility of the "Xe" field specifically for the dialog box. Then, you can manage the position of the "Xe" field by setting editDialogFieldDirective. Refer to the code snippet below for your reference.

Code-Snippet:-

index.js:-

 

const Editing = () => {

  let ganttInstance;

  const actionbegin = (args) => {

    if (

      args.requestType == 'beforeOpenEditDialog' ||

      args.requestType == 'beforeOpenAddDialog'

    ) {

      ganttInstance.columnByField['Xe'].visible = true; // Display in dialogs

    }

  };

 

  return (

    <div className="control-pane">

      <div className="control-section">

        <GanttComponent

          ref={(gantt) => (ganttInstance = gantt)}

          actionBegin={actionbegin}

        >

          <ColumnsDirective>

            <ColumnDirective field="TaskID" width="80"></ColumnDirective>

            <ColumnDirective

              field="Xe"

              headerText="Custom column"

              visible={false}

            ></ColumnDirective>

         </ColumnsDirective>

          <EditDialogFieldsDirective>

            <EditDialogFieldDirective

              type="General"

              headerText="General"

              fields={['TaskID', 'TaskName', 'Xe']}

            ></EditDialogFieldDirective>

          </EditDialogFieldsDirective>

        </GanttComponent>

      </div>

    </div>

  );

};

 

Sample - Jyzrpakw (forked) - StackBlitz

 

 

 

 

Regards,

Sridharan