Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
0
DataGrid Conditional Decorations
posted

I have been looking for a way to colorize text within my datagrid under specific conditions.

I have looked on the forms as well as the Documentation examples, Nether Have worked for me.

Is their some simple way using a Datagrid Reference perhaps, to Enumerate the Grid for its cell values and apply deco properties to the cell based on the value?  This should be a thing.

I thought the whole Point of Blazor was to get me out of doing Java, but here we are and this isnt working at all:

I basically have in a .razor file:

 <IgbDataGrid Height="600px" @ref="_AKAInsertsGridRef"
                        AutoGenerateColumns="false"
                        IsGroupCollapsable="false"
                        DataSource="_akaInsertRecs"
                        EditMode="@EditModeType.None"
                        ColumnMovingMode="ColumnMovingMode.Deferred"
                        ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
                        ColumnMovingSeparatorWidth="2"
                        ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
                        ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
                        CornerRadiusTopLeft="20"
                        CornerRadiusTopRight="20"
                        CornerRadiusBottomLeft="20"
                        CornerRadiusBottomRight="20"
                        >
                        <IgbTemplateColumn IsEditable = "false" Field="DESCRIP" HeaderText="PT Description" CellUpdatingScript="onAKAItemDataValidate" />
                        <IgbTextColumn IsEditable = "false" Field="PTITEMNUMBER" HeaderText="PT Item Number" />
                        <IgbTextColumn IsEditable = "false" Field="CUSTOMERITEMNUMBER" HeaderText="Customer Item Number" />
                        <IgbTextColumn IsEditable = "false" Field="CUSTOMERDESCRIPTION" HeaderText="Customer Description" />
                        <IgbTextColumn IsEditable = "false" Field="INVALID" HeaderText="Validty" />
                    </IgbDataGrid>

I then created a java file named AKAItemInsertDataStyles.js within my wwwroot directory:

function onAKAItemDataValidate(column, args) {
    let value = args.content;
    if (value.textContent == "UNKNOWN ITEM") {
       args.cellInfo.textColor = "#FF0000";
    }
}
igRegisterScript("onAKAItemDataValidate", onAKAItemDataValidate, false);

Then finally I have a method that is setting item Descriptions == to UNKNOWN ITEM.

The effect of applying the JavaScript function is I lose my Text and No coloring. 

Any Suggestions?

For some reason the top code block is showing empty even though I have pasted into it multiple times so I am leaving this here just incase:

<IgbDataGrid Height="600px" @ref="_AKAInsertsGridRef"
AutoGenerateColumns="false"
IsGroupCollapsable="false"
DataSource="_akaInsertRecs"
EditMode="@EditModeType.None"
ColumnMovingMode="ColumnMovingMode.Deferred"
ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
ColumnMovingSeparatorWidth="2"
ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromRightAndFadeIn"
ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToRightAndFadeOut"
CornerRadiusTopLeft="20"
CornerRadiusTopRight="20"
CornerRadiusBottomLeft="20"
CornerRadiusBottomRight="20"
>
<IgbTemplateColumn IsEditable = "false" Field="DESCRIP" HeaderText="PT Description" CellUpdatingScript="onAKAItemDataValidate" />
<IgbTextColumn IsEditable = "false" Field="PTITEMNUMBER" HeaderText="PT Item Number" />
<IgbTextColumn IsEditable = "false" Field="CUSTOMERITEMNUMBER" HeaderText="Customer Item Number" />
<IgbTextColumn IsEditable = "false" Field="CUSTOMERDESCRIPTION" HeaderText="Customer Description" />
<IgbTextColumn IsEditable = "false" Field="INVALID" HeaderText="Validty" />
</IgbDataGrid>

Parents Reply Children
No Data