[REACT] Using Column Renderer clears the cell value though returning undefined

[vconstruct]

Hi All,

Though returning the undefined from the renderer function, we are unable to see the cell values.

On explicitly setting the alwaysClearCell to false has no effect on the rendering mechanism.

The logic works fine with grid but doesn't work with Gantt.

URL: https://bryntum.com/products/gantt/examples/basic/

Gantt Issue:

import { Gantt, StringHelper } from '../../build/gantt.module.js?464505';
import shared from '../_shared/shared.module.js?464505';

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',

project : {
    autoLoad  : true,
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
},

columns : [
    { 
type : 'name', width : 250, alwaysClearCell: false, renderer: ({ value, cellElement }) => {
                cellElement.innerHTML = `<b>${value}</b>`
                cellElement.firstElementChild.style.backgroundColor = 'blue';
            }
 }
    ],

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

Snapshot:

error2.png (103.74 KiB) Viewed 557 times

Working Grid Example: https://bryntum.com/products/grid/examples/renderers/

Snapshot:

working2.png (235.95 KiB) Viewed 557 times

[marcio]

Hey vconstruct,

Thanks for the report. I created a ticket to fix that https://github.com/bryntum/support/issues/5857

Happy new year!

[vconstruct]

Hi, any update on when we can expect the fix for it?

[tasnim]

Unfortunately, No updates for now. I've added a comment to that ticket that you've asked for the fix.
Please subscribe to the ticket so if there is any update it will notify you.

Good Luck ,
Tasnim

[joakim.l]

Hi!

Have been looking into this issue and have some updates:

Firstly, the alwaysClearCell config isn't doing anything in this case as it's defaults to false (until version 6.0 where it will default to true).

Secondly, the Gantt Name column is a TreeColumn which uses a different rendering mechanism than a regular column. The TreeColumn will use the returned data from the provided renderer and use that as a part of it's content. There is definitly a gap in the documentation here, which we will see to being filled as soon as possible.

Could your problem be solved in another way, perhaps by using the htmlEncode config?

columns : [{
    type: 'name',
    width: 250,
    htmlEncode: false,
    renderer: ({ value, cellElement }) => {
        return `<b style="background-color:blue">${value}</b>`;
    }
}]

[vconstruct]

Hi Joakim,

We are currently trying to color the rows of task based upon the level.

i.e. Level 1 will have different background color & text color but, level 2/3 will have different.

This is also applicable for critical activities.

so we need some mechanism to set styling dynamically based upon the level / custom data set.

If you have some solution around it also please do let us know.

[joakim.l]

Sure, you could do something like this:

columns : [{
    type : 'name',
    width : 250,
    renderer : ({ value, cellElement, row, record }) => {
        row.assignCls({
            level1 : record.childLevel < 1,
            level2 : record.childLevel > 0,
            critical : Boolean(record.critical)
        });
        return value;
    }
}]

With the CSS like:

<style>
	.level1 .b-grid-cell {
		color : blue;
	}
	.level2 .b-grid-cell {
		color : green;
	}
	.critical .b-grid-cell {
		color : black;
		font-weight : bold;
		background-color : #FFCCCC;
	}
</style>

[vconstruct]

I have tried the example you have provided it works fine but is there a way we could apply the background color only to the Grid and not to the Gantt?

[joakim.l]

Should work to just add the class b-grid-subgrid-locked before the others. Something like this (not tested):

<style>
	.b-grid-subgrid-locked .level1 .b-grid-cell {
		color : blue;
	}
	.b-grid-subgrid-locked .level2 .b-grid-cell {
		color : green;
	}
	.b-grid-subgrid-locked .critical .b-grid-cell {
		color : black;
		font-weight : bold;
		background-color : #FFCCCC;
	}
</style>