We are using a custom feature in grid which is similar to Grid.feature.Stripe.
But instead of coloring odd and even rows like Stripe . We are coloring two rows alternatively. like the below picture
this would work fine if it was a basic scheduler pro . But we are using a scheduler pro with grouping feature enabled . So every time the grouping region is closed and opened the rows in the scheduler pro would re render at that time our custom css class is not added.
grid.rowManager.on({
renderrow: 'onRenderRow'
obj: this
})the above listener is fired only when each row is rendered. We do not want this. we need to fire a event listener after all the rows are rendered and we need to have access to all the rows.
I did take a look at the document for Grid - Events - renderRows . But if i use this its not working
https://bryntum.com/docs/scheduler-pro/api/Grid/view/Grid#event-renderRows
Source code for Custom feautre.
export default (base) =>
class CombineStripe extends base {
rows = [];
static get $name() {
return 'cStripe';
}
async construct(grid, config) {
super.construct(grid, config);
// if we call the addColorsToRows method in the construtor it would work fine but wont work if the rows are re - rendered
// this.rows = await grid.rowManager.rows;
// this.addColorToRows(this.rows);
// trying to attach a listener when all the rows are re-rendered
grid.rowManager.on({
renderRows: 'onRenderRow',
thisObj: this,
});
}
/**
* add colors to 2 rows alternatively
*/
addColorToRows(rows) {
const filterRows = this.getFilteredRows(rows);
this.processFilteredRows(filterRows);
}
/**
* filter the rows based on the row type
* @param {*} rows
* @returns
*/
getFilteredRows(rows) {
return rows.filter((r) => {
const keys = Object.keys(r.cls);
return keys.length === 1 && keys[0] === 'b-grid-row';
});
}
/**
* process the filtered rows
* @param {*} filterRows
*/
processFilteredRows(filterRows) {
const splicedArray = [];
while (filterRows.length) {
splicedArray.push(filterRows.splice(0, 2));
}
for (let i = 0; i < splicedArray.length; i += 2) {
const addColorRows = splicedArray[i];
addColorRows.forEach((row) => {
// add the custom css classes here
row.assignCls({
'b-add-color-row': true,
});
});
}
}
/**
* this method should be fired after all the rows are rendered and
* it should give us access to all the rows or the grid itsef
*/
onRenderRow(rows) {
// if the grid is returned. instead of all rows i can do this
//const rows = await grid.rowManager.rows;
// adds the colors to the rows after every re - render
this.addColorToRows(rows);
}
};