I'm trying to use the event onRenderRow, but it's call just once, sample:
import { Grid, DataGenerator, EventHelper, StringHelper } from '../../build/grid.module.js?456127';
import shared from '../_shared/shared.module.js?456127';
const grid = new Grid({
appendTo : 'container',
features : {
sort : 'name '
},
onRenderRow : [console.log('Evento Works!')],
onbeforeRenderRow : [console.log('Evento Before Works!')],
columns : [
{
text : 'Name',
field : 'name',
flex : 1,
cellCls : 'name',
headerRenderer : ({ record }) => {
return `<label>Name</label><button class="addnew b-blue b-raised b-button">ADD</button> `;
}
},
{
type : 'number',
text : 'Age',
field : 'age',
width : 60,
cellCls : 'age',
align : 'center',
htmlEncode : false,
renderer : ({ value = '' }) => StringHelper.xss`<div class="badge">${value}</div>`
},
{
text : 'City',
field : 'city',
icon : 'b-fa b-fa-map-marker',
flex : 1
},
{
text : 'Food',
field : 'food',
flex : 1,
headerRenderer : ({ column, headerElement }) => {
headerElement.style.color = '#00a164';
headerElement.style.fontWeight = '700';
return `- ${column.L('Food').toLocaleUpperCase()} -`;
}
},
{
text : 'Color',
field : 'color',
cls : 'color',
flex : 1,
htmlEncode : false,
renderer : ({ value = '', cellElement }) => {
cellElement.innerHTML = StringHelper.xss`<div class="color-box"></div>${value}`;
cellElement.firstElementChild.style.backgroundColor = value;
}
},
{
type : 'number',
text : 'Score',
field : 'score',
flex : 1,
cls : 'score',
icon : 'b-fa b-fa-trophy',
headerRenderer : ({ column }) => StringHelper.xss`<u>${column.text}</u>`,
renderer : ({ value, cellElement }) => {
const percent = value / 1000 * 100,
from = 'rgba(117,241,255,.5)',
to = 'rgba(255,255,255,0)';
cellElement.style.background = `linear-gradient(to right, ${from} 0%, ${from} ${percent}%, ${to} ${percent}%)`;
return value;
}
}
],
data : DataGenerator.generateData(250),
});
The console value is called just once.