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>
Hello Dustin,
I have been investigating into the behavior you are seeing and from the JavaScript function that you have provided, it sounds like you are just trying to color the text if it is a certain value. If my impression is correct in this case, it isn’t really necessary to use the IgbTemplateColumn for this, and you would see more performance using a normal IgbTextColumn and the DataBoundScript event.
For example, if you hooked this into your DataBoundScript to an IgbTextColumn pointed at your “DESCRIP” Field, I would imagine it should work to achieve the behavior you are looking for:
function onDataBound(column, args) { var cellInfo = args.cellInfo;
if (cellInfo.rowItem.DESCRIP == “UNKNOWN ITEM”) { cellInfo.textColor = "red"; } }
igRegisterScript("onDataBound", onDataBound, false);
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
You Know I posted a follow up to this weeks ago and you guys have not approved the post to hit the boards. This is silly. 95 viewers have looked at this post, and possibly think what you posted actually works, when I provided examples of it not working correctly at all.
We were having some issues with our moderation queue specifically for the Blazor forum in the past which are thankfully fixed now, and I apologize that I did not see your follow-ups to this until now.
If your onDataBound script is not working, my best guess is that perhaps the JavaScript file you have defined likely is not merged. You will need to define a <script> in the body tag of your index.html within the wwwroot folder like so:
<script src="./name_of_your_file_here.js"></script>
My apologies for the inconvenience and delay in my response. Please let me know if you have any other questions or concerns on this matter.