I need rednere the FeatureTable any rows have blue or green colors stands for update or new features.I used override FeatureTable.grid._grid.cellClassNameGenerator function render custom colors,but when i update arcgis core version to 4.29,this method no longer seems to work.
Is there another way to do this? I really need this feature!
Solved! Go to Solution.
I find Grid Components in Vaadin Docs ,at Arcgis Core 4.29 version use the new Vaadin 24.Because vaadin updated the cellClassNameGenerator method, it is now invalid. Now take a new approach to referencing custom css.Writing is now easier than before, and there is no need to inject CSS code into shadowRoot.
Look Grid v24 docs: Grid Styling Rows & Columns Dynamically
In my angular demo:
TS file:
RenderTableColor(table: FeatureTable) {
setTimeout(() => {
table.when(() => {
try {
(table as any).grid._grid.cellPartNameGenerator = (column: any, model: any) => {
console.log({column, model})
let parts = '';
if (model && model.item) {
const item = model.item;
if (item.feature.attributes.update_type === 'add') {
parts += ' tb-row-add';
} else if (item.feature.attributes.update_type === 'update') {
parts += ' tb-row-update';
}
}
return parts;
};
} catch (e) {
this.dataLogService.msg('数据表格颜色渲染失败,请重新刷新页面');
}
});
}, 2000);
}
CSS file:
::ng-deep .esri-feature-table vaadin-grid::part(tb-row-add){
background-color: rgba(6,233,108,0.3);
}
::ng-deep .esri-feature-table vaadin-grid::part(tb-row-update){
background-color: rgba(249,170,62,0.5);
}
I find Grid Components in Vaadin Docs ,at Arcgis Core 4.29 version use the new Vaadin 24.Because vaadin updated the cellClassNameGenerator method, it is now invalid. Now take a new approach to referencing custom css.Writing is now easier than before, and there is no need to inject CSS code into shadowRoot.
Look Grid v24 docs: Grid Styling Rows & Columns Dynamically
In my angular demo:
TS file:
RenderTableColor(table: FeatureTable) {
setTimeout(() => {
table.when(() => {
try {
(table as any).grid._grid.cellPartNameGenerator = (column: any, model: any) => {
console.log({column, model})
let parts = '';
if (model && model.item) {
const item = model.item;
if (item.feature.attributes.update_type === 'add') {
parts += ' tb-row-add';
} else if (item.feature.attributes.update_type === 'update') {
parts += ' tb-row-update';
}
}
return parts;
};
} catch (e) {
this.dataLogService.msg('数据表格颜色渲染失败,请重新刷新页面');
}
});
}, 2000);
}
CSS file:
::ng-deep .esri-feature-table vaadin-grid::part(tb-row-add){
background-color: rgba(6,233,108,0.3);
}
::ng-deep .esri-feature-table vaadin-grid::part(tb-row-update){
background-color: rgba(249,170,62,0.5);
}