Category / Section
How to apply custom color in conditional formatting
1 min read
Description
This knowledge base explains how to apply the custom colors for conditional formatting in Spreadsheet.
Solution
It can be achievable by defining the custom color to the properties ‘color’ for foreground and ‘bgColor’ for background color in Spreadsheet.
[JS]
var defaultData = [{ "Name": "VINET", "Average": 90, "Grade": "S" }, { "Name": "TOMSP", "Average": 83, "Grade": "A" }, { "Name": "HANAR", "Average": 80, "Grade": "A" }, { "Name": "VICTE", "Average": 93, "Grade": "S" }];
$("#Spreadsheet").ejSpreadsheet({
sheets: [{
dataSource: defaultData;
}],
loadComplete: "loadComplete"
});
[RAZOR]
@(Html.EJ().Spreadsheet<object>("Spreadsheet")
.Sheets(sheets =>
{
<!-- you can define datasource at server side -->
sheets.Datasource((IEnumerable)ViewBag.DataSource).Add();
})
.ClientSideEvents(
events => events.LoadComplete("loadComplete")
)
)
[ASPX]
<ej:Spreadsheet ID="Spreadsheet" runat="server"> <Sheets> <ej:Sheet></ej:Sheet><!-- you can define datasource at server side --> </Sheets> <ClientSideEvents LoadComplete="loadComplete" /> </ej:Spreadsheet>
[JS]
function loadComplete(args) {
if (!this.isImport) {
// Define Hex color code for font color & background color in "color" and “bgColor” property
this.XLCFormat.setCFRule({ "action": "equalto", "inputs": ["90"], "color": "#FFFFFF", "bgColor": "#139228", "range": "A1:C5" });
this.XLCFormat.setCFRule({ "action": "textcontains", "inputs": ["N"], "color": "#FFFFFF", "bgColor": "#bd1313", "range": "A1:C5" });
}
}
The below screenshot represents the output of the above code example.
