Hi Bryntum , We have a feature where the rows should be colored alternatively . so for this we implemented a custom class which is similar to stripe(feature) but with our business logic.
The displaying of the colors works . But when I click on the group header row, the color changes to a different row completely and UI is seems to be buggy. We would like to know how this issue can be resolved .
Thanks for the support!
below is the class we have implemented
export default (base) =>
class CombineStripe extends base {
static get $name() {
return 'combineStripe';
}
async construct(grid, config) {
super.construct(grid, config);
// adds the colors to the rows
await this.addColorToRows(grid);
}
doDisable(disable) {
if (!this.isConfiguring) {
// Refresh rows to add/remove even/odd classes
this.client.refreshRows();
}
super.doDisable(disable);
}
/** add colors to 2 rows alternatively */
async addColorToRows(grid) {
const rows = await grid.rowManager.rows;
const mainObjectMap = new Map();
let isColor = true;
console.log(rows);
for(let row of rows) {
const mo = row.cellContext._record._data.mainObject;
if(mainObjectMap.get(mo) === undefined) {
mainObjectMap.set(mo, []);
}
mainObjectMap.get(mo).push(row);
}
mainObjectMap.forEach((values,key) => {
if(key !== undefined) {
for(let row of values) {
row.assignCls({
'b-add-color-row': !isColor,
})
}
}
isColor = !isColor;
});
}
};
Hard to say based on just your snippets. This shouldn't need more than a few lines in one of your Column renderer methods, where you can call row.addCls
Hi , Thanks for letting us know of a better approach . It was easier compared to the previous method.
But unfortunately we are having facing three issues with the new implementation.
1) The column for which the renderer method is applied does not show any data.
When the renderer is not applied , it shows the data as expected.
image (1).png (49.8 KiB) Viewed 467 times
But when i apply a rendered method to the first column. the data which is supposed to come in the first column doesnt come.
Hi mats, thank you for the reply. We got the field shown after returning the data of the column. Thank you so much.
I have forgotten to post the rest of the question. Please let me ask them.
2) Even though the css classes we successfully applied . is there a way to turn off the grey colored hover as it does not suit the blue background.
hover (1).gif (246.2 KiB) Viewed 452 times
3) The css classes are applied successfully when the screen loads. but when a event resizes or event drag n dropped.
the css classes which we had added disappears for some reason. how do we solve this issue.