Premium support for our pure JavaScript UI components


Post by H9FFDC »

Hi,

We are configuring a group renderer to directly modify the cellElement that is passed in e.g. to append a new DOM element.

This works perfectly if the groupRenderer is configured on a specific column. However, it does not work for the groupRenderer that is defined on the grid feature. The documentation for renderers suggests that this should be possible, as long as the renderer function returns undefined. Is there something different about the renderer defined on the group feature that means that this manipulation shouldn't be possible?

I've been able to reproduce this by modifying the following example - https://www.bryntum.com/examples/grid/grouping/

Does not work when defined on feature:

features: {
  group: {
    renderer : ({ groupRowFor, count, cellElement, isFirstColumn }) => {
      if (isFirstColumn) {
        cellElement.textContent = `${groupRowFor} (${count}) -`;

        const child = document.createElement('span');
        child.textContent = 'Hello';
        cellElement.appendChild(child);
      }
    }
  }
}

Works when defined on specific column:

groupRenderer : ({ groupRowFor, count, cellElement }) => {
  cellElement.textContent = `${groupRowFor} (${count}) -`;

  const child = document.createElement('span');
  child.textContent = 'Hello';
  cellElement.appendChild(child);
}

Thanks


Post by alex.l »

Hi H9FFDC,

Basically, any renderer should returns an HTML as a result. You should not manipulate with the DOM inside the renderer method, but prepare an HTML and return it as result.

All the best,
Alex

All the best,
Alex


Post by H9FFDC »

Thanks. We have been experimenting with this so that we can add a DOM element with a click listener within a group renderer. We have not found another way of doing this.

The following in the grid documentation suggested that this would be a suitable use of the renderer NOTE: If you mutate cellElement and you want to prevent cell content to be reset during the rendering, please return undefined from the renderer or just omit the return statement. If you return a value and the value can be undefined, please make sure you return an empty string to update the cell content.

I appreciate that these are internal comments, but the code comments in Group.buildGroupHeader also suggest that the renderer could be used to manipulate the cellElement and there is also specific handling around any potential child elements added by renderer. Is it still advised to not manipulate the element directly?


Post by alex.l »

Thank you for clarifications!
That's totally my mistake. Renderer does allow to modify DOM elements if you return undefined as it said in docs.
I was able to reproduce this bug, here is a ticket: https://github.com/bryntum/support/issues/2250

All the best,
Alex

All the best,
Alex


Post by H9FFDC »

Brilliant, thanks very much!


Post Reply