checkbox widjet, on change shoould trigger that row only

[lakshminarayana]

Hi,

I am using a checkbox widjet,

issue 1: when i change the state, the other state of the checkbox is getting removed.

issue 2: When i change the states multiple times, i am getting stack is overflowed, can you please help me on this.

  {
    type: "widget",
    width: "10px",
    field: "estimatedEndDateCheckBox",
    widgets: [
      {
        type: "checkbox",
        field: "estimatedEndDateCheckBox",
        onAction(props) {
          const gantt = props.source.cellInfo.column.grid;
          const record = props.source.cellInfo.record;
  
          // Update the record's originalData with the new checkbox state
          record.originalData.estimatedEndDateCheckBox = props.checked;
  
          // Refresh the row to ensure the renderer is called
          gantt.rowManager.refresh(record);
        },
      },
    ],
    renderer(data) {
      const recordData = data.record.originalData;
  
      // Highlight rows with a hard date constraint
      if (recordData?.hardDateConstraint?.EndDate) {
        data.rowElement.style.backgroundColor = "#F5E8FF";
      } else {
        data.rowElement.style.backgroundColor = ""; // Reset background color if no hard date constraint
      }
  
      // Show or hide the checkbox based on whether the record can be locked
      data.widgets[0].hidden = !recordData.canBeLocked;
  
      // Set the checkbox state based on the record's data
      data.widgets[0].checked = recordData?.estimatedEndDateCheckBox || recordData?.hardDateConstraint?.EndDate;
    },
  }, 

[marcio]

Hey lakshminarayana,

Thanks for reaching out.

Based on the snippet that you shared, it's not possible to point out what could be causing the issue.

Is it a custom field? Do you see any errors on the console?

I tried to adapt your column to our Gantt basic demo, but some parts of your configuration are missing. Could you please try to adapt our https://bryntum.com/products/gantt/examples/basic/ with a runnable test case for us to debug?

[lakshminarayana]

Hi Marcio,

can you please provide me an example of checkbox column(using widgets or custom checkbox column ), where on click of that particular checkbox, i need to make changes in the same row but different columns

[marcio]

Hey,

Sure, I adapted our basic demo, here you see a check column that updates the name of the record and one specific column

const gantt = new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoSetConstraints : true, // automatically introduce `startnoearlier` constraint if tasks do not use constraints, dependencies, or manuallyScheduled
        autoLoad           : true,
        transport          : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        }
    },

columns : [
    { type : 'name', width : 250 },
    {
         type: 'check',
         listeners: {
            beforeToggle: (ev) => {
                ev.record.name = "New check name";
                gantt.columns.records[0].text = 'New column name';
            }
         }
    }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

Documentation reference https://bryntum.com/products/gantt/docs/api/Grid/column/CheckColumn#event-beforeToggle