TreeGrid Suite 9 – Single column template with partially editable content (readonly + editable areas)

Suite and Optimus Suite 7
#1

Hi @Siarhei @Maksim_Lakatkou @ArtyomBorisevich,

I’m using DHTMLX Suite 9 TreeGrid and I have a column that combines two fields:

  • levelIndicator (readonly)
  • product.fullName (editable)

My current column configuration:

{
  id: "test",
  minWidth: 300,
  htmlEnable: true,
  header: [
    { text: "Level Indicator" },
    { content: "inputFilter" }
  ],
  editorType: "input",
  template: (value, row) => {
    const level = row?.levelIndicator ?? "";
    const name = row?.product?.fullName ?? "";

    return `
      <span class="lvl-readonly">${level}</span>
      -
      <span class="product-editable">${name}</span>
    `;
  }
}

Requirement

  • Clicking or double-clicking on levelIndicator should not trigger editing.
  • Editing should start only when the user clicks on the product-editable part of the cell.

Question

Is there a recommended or native way in Suite 9 TreeGrid to make only a specific part of a templated cell editable, while keeping the rest readonly?

Or would you recommend a different column structure to achieve this behavior?

Thanks in advance :+1:

#2

Hello @krjani,

There is no specific config, that allows to define different behavior for different parts of the cell, but your requirement still can be achieved using built-in events.

The idea could be to get the exact clicked element from the cellClick event, and set up some flag, that will be used to allow/block edit from the beforeEditStart event, like follows:

let shouldEdit = true;

grid.events.on("cellClick", (row, column, event) => {
        if(event.target.className == "lvl-readonly")
            shouldEdit = false;
        else 
            shouldEdit = true
    });

grid.events.on("beforeEditStart", (row, column, editorType) => {
    if(shouldEdit)
        return true;
    else return false

});

Here is an example(clicks on the “readonly” part of cell won’t open editor):
https://snippet.dhtmlx.com/ogdarh3k

Kind regards,