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,
Here could be found a sample with text area where could be added a style in string format and applied to the grid on "Apply new styles" button click.
According to me, the best place to evaluate an expression that depends on rowData, cellValue, etc. would be in the applyCSS method. When the button is clicked, we invoke the applyCSS event and in a global variable, we are keeping the input in the textarea that will hold the new style. Of course, this is only for the purposes of the example and this string could be created from some other place in the code dynamically.
Again for the purposes of the example, each new line is marked with ';' instead of ',', so I could use it as a separator and easily split the lines. This, of course, you could implement in a different manner, however, the goal is to have a string array with the following format:
[<property> , <value>, <property>, <value>...].
Afterwards, you could loop through this array, find and evaluate all functions like "(rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : "white" " and replace them with their correct value. In this case, the value depends on the rowIndex so it is possible to need to loop through all cells in each column too.
After all functions are evaluated and the array is modified appropriately you could merge it back to a single string that would be in correct format using the convertBack method from the attached sample and pass it to the JSON.parse() method.
Initially, as you could see the style that we could apply is:
{ "background": "linear-gradient(to right, #b993d6, #8ca6db)"; "color": "white"; "animation": "0.75s popin" }
Since there is no functions in this string it would be evaluated to
{ "background": "linear-gradient(to right, #b993d6, #8ca6db)", "color": "white", "animation": "0.75s popin" }
Basically, if you require to apply { "background": "linear-gradient(to right, #b993d6, #8ca6db)"; "color": (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : "white" } you should evaluate this function for each column and row to "gray" or "white" and after that to call the JSON.parse() method. This way, I believe it will work, however you need to test it on your side to check for any side effects.
Additionally, I found this discussion that you might consider helpful. Please keep in mind that as I already mention this is related to the JSON specification and it is beyond the scope of Infragistics support.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
stackoverflow.com/.../how-to-get-an-arrow-functions-body-as-a-string
I would appreciate an example please
I have been looking into your requirement and using the demo in the previously mentioned topic, I was able to reproduce similar issue when I enter the following in the text input field.
After an investigation, I determined that the reason for such exception is the incorrect format of the string that we pass to the JSON.parse method. This method expects properties and values, however, rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "gray" : white" is an expression that should be evaluated later. If you try to enter
{ "background": "linear-gradient(to right, #b993d6, #8ca6db)", "color" : "white"}
there would be no issue. When the string value is passed to the JSON.parse method it should be in this format. However, how you will parse the initial string to this format depends is an application level scenario, which is beyond the scope of Infragistics support.
If you require any further assistance on the matter, please let me know.
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" };
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.