hi, i'm trying to pass a string in the column using the [cellStyles] property but i get a css error. "SyntaxError: Unexpected token ( in JSON at position 69".this is my string:
{"background": "linear-gradient(to right, #8ca6db, #b993d6)","color":(rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : white"};
public applyCSS() { var splitted = this.field.grid.cellStyles.split(";"); splitted.forEach(element => { if (element!=null && element!='') { var css= element.trim(); try { var style = JSON.parse(css); console.log(style); this.field.headerGrid.forEach((column, index) => { column.cellStyles = style; }); } catch (error) { console.log(error); return false; } } }); }
Hello,
I have been looking into your question and created a simple sample application that demonstrates how to apply a conditional styling of cells based on custom rules.
Here could be found my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Additionally, here could be found a topic about Grid Conditional Cell Styling that you might consider useful.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
in this https://stackblitz.com/edit/igx-grid-cond-cell-style?file=src/app/grid/grid-conditional-cell-style-2/grid-conditional-cell-style-2.component.ts i see static css on this functions
public oddColStyles = { background: "linear-gradient(to right, #b993d6, #8ca6db)", color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "white" : "gray", animation: "0.75s popin" }; public evenColStyles = { background: "linear-gradient(to right, #8ca6db, #b993d6)", color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : "white", animation: "0.75s popin" };