Select to view content in your preferred language

How to FeatureTable rows render custom colors?

398
1
Jump to solution
04-06-2024 08:56 PM
MaQingLin
New Contributor

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!

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
MaQingLin
New Contributor

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);
}

View solution in original post

0 Kudos
1 Reply
MaQingLin
New Contributor

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);
}
0 Kudos