Need a solution to add colored tags to the Dropdown Columns in Datagrid like below, any approach would help, whether it's through CSS, built-in options:
Hello @Karthik Santosh ,
Outsystems Datagrid is based on the Wijmo Flexgrid. You can achieve the customization of your cells by using the Cell Templates . This allows you define custom styling.
You can use the following javascript in the OnInitialize event of the datagrid:
OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.columns.forEach(function(col) {
if (col.header === 'TestHeader') {
col.cellTemplate = '<span style="background:blue; color: white; padding: 10px; border-radius:32px;">${text}</span>'
} });
This is the result:
Make sure to change 'TestHeader' with the actual name of your header column and add the input parameter for the GridWidgetId. You can also use classes if you want.
Thank you, Mihai! Works perfectly fine!
Hi @Mihai Melencu how to change color according to the text value.like for active it should be Green otherwise red.
Hi,You can try this Javascript
col.cellTemplate = `
background: ${
"${text}" === 'Active' ? 'green' :
"${text}" === 'Inactive' ? 'red' :
'orange'};
color: white;
padding: 10px;
border-radius: 32px;">
${"${text}"}
`;
}
});
Thanks,sahana
if (col.header === 'Status') {
col.cellTemplate = function(cellData) {
let color = "yellow"; // Default to yellow for unknown status
if (cellData.text === "Active") {
color = "green";
} else if (cellData.text === "Inactive") {
color = "red";
return `${cellData.text}`;
};
its working as expectedif you want OS classes :
let cssClass = "tag tag-small border-radius-rounded OSInline background-primary"; // Default class
cssClass = "tag tag-small border-radius-rounded OSInline background-green";
cssClass = "tag tag-small border-radius-rounded OSInline background-red";
Hi Ranjeet,
I tried applying your code but why I got this error? Am I missing something. Sorry, I'm not a developer. Maybe I miss something here.
Hi,Please refer the below link,https://www.outsystems.com/forums/discussion/86768/how-to-add-colors-and-tag-in-data-grid/Thanks,Sahana
Hi Sahana,
I am aware of adding tags in action columns but is there a way to add one in the dropdown column?
Thanks,
Karthik
Agreed with @Mihai Melencu you can use GridAPI to inject html you need check GridAPI javascript and you can also mix it with jquery for easy manipulation of html.