Hi,
I want some clarification on the new IgrGrid (link)
As in the example mentioned below we are using the template column type to show cell text colour. Currently, we are using the logic where we apply the cell text colour in the cellUpdating method for Template columns (logic used is to denote red colour for negative values and green for positive). For that, we are re-applying the logic again and again in cellUpdating method. I wanted to know if is there any alternative to this approach where we can set the template for the Igr template column to apply this logic on its own.
(Example link:https://es.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid/performance )
Hoping to hear a positive response soon!
Hello,
The IgrGrid has a ColumnInit property that you can use to some formatting on an entire column. The column also has a cellClasses property where you can style cells without having to use an event.
eg.
www.infragistics.com/.../live-data
<IgrColumn field="price" id="price" header="Price" width="120px" dataType="currency" sortable="true" editable="true" filterable="true" bodyTemplate={priceTemplate} cellClasses={trends}> </IgrColumn>
const negative = (rowData: any): boolean => rowData['changeP'] < 0; const positive = (rowData: any): boolean => rowData['changeP'] > 0; const changeNegative = (rowData: any): boolean => rowData['changeP'] < 0 && rowData['changeP'] > -1; const changePositive = (rowData: any): boolean => rowData['changeP'] > 0 && rowData['changeP'] < 1; const strongPositive = (rowData: any): boolean => rowData['changeP'] >= 1; const strongNegative = (rowData: any): boolean => rowData['changeP'] <= -1; const trends = { changeNeg: changeNegative, changePos: changePositive, negative: negative, positive: positive, strongNegative: strongNegative, strongPositive: strongPositive }; const trendsChange = { changeNeg2: changeNegative, changePos2: changePositive, strongNegative2: strongNegative, strongPositive2: strongPositive };