Context:
version : 2013.2.2028
One page with WebDataGrid.
StyleName => Rubberblack
What I want to achieve:
Based on one column value, I want to put a row in a specific color to help the user find its information as fast as possible.
I've tried : http://ko.infragistics.com/community/forums/p/63030/319707.aspx#319707
But, doesn't seems to work (maybe due to style set to rubberblack).
so the question is simple:
What should I do to make it works ?
What even do I have to handle ? what piece of code to fix this ?
Thanks
Hello Nicolas,
Due to the classname prefixes applied for the RubberBalck styleset, the style definition in this scenario should reflect this:
<style type="text/css"> tbody.igg_RubberBlackItem >tr>td.customStyleEven { background-color:Red ; } tbody>tr.igg_RubberBlackAlt>td.customStyleOdd { background-color:Blue; } </style>
Please also note that the tbody.igg_RubberBlackItem > tr > td class (item class) applied by the RubberBlack styleset has a definition for a background-image which will be displayed on top of the background color. Therefore in this scenario you may wish to manually edit this class in order to remove the background image definition.
Hope this helps. Please feel free to contact me if with any questions.
it helps but not totally solve the problem...
Here the code I have:
protected void WebDataGrid1_InitializeRow(object sender, RowEventArgs e) { if (e.Row.Items[2].Value.ToString() == "Crée") { foreach (GridRecordItem item in e.Row.Items) { if (item != null) { item.CssClass = "customStyleEven"; } }
and style:
tbody.igg_RubberBlackItem >tr>td.customStyleEven { background-color:Red ; } tbody>tr.igg_RubberBlackAlt>td.customStyleOdd { background-color:Blue; }
My question: What should I do to avoid some lines aren't well colored ?
Question 2: Is it possible to apply a style on a row instead of each item of the row ? is so, how ?
I'm sure you will propose an answer as fast as you will read this :)
Thank you for your replies.
Styling a row can be achieved by using a class selector similar to:
tbody.igg_RubberBlackItem >tr.CustomRowStyle>td { background-color:Red ; }
Note that for some attributes, !important may need to be applied as the usual hierarchy of applying css rules may be ignored (which should be used with caution). The row class can then be set at InitializeRow using:
e.Row.CssClass = "CustomRowStyle";
Regarding the issues in the image shown, I am not completely sure why one of the columns is being skipped while styling. Can you provide me with some additional information whether there are some special settings applied on the Cree column ?
Do not hesitate to contact e with any updates or questions.
Well, it's always the same
The style is set to rubberblack and nothing else is done except in the code provided...
Thank you for your reply.
In order to allow me to examine this further, is it possible for you to share a sample illustrating the issue ? Inspecting whether unexpected CSS rules are applied on the particular column's cells through the developer tools may also help in revealing issues.
Please do not hesitate to contact me with any updates or questions.
Sorry peter but I have no time to create a sample...
What I've done is quite easy...
just a Select from a table...
Put the data in the webDataGrid.. use filtering with ExcelStyle...
And then, I've just try to make the row having a value being colored the right way.
Maybe if you could do a little "demo" with these "requirements", I will be able to make it work on my own at my office :)
thanks Petar...
It solved the issue :)
It seems that in this scenario the styling is being applied only to the first column, however the styling for the even rows is not being applied due to the background image applied on the row CSS class by default (the alt row style does not have a background image, that is why the alt rows are styled blue successfully). For the rest of the rows, the background image is displayed on top of the background color.
To resolve this matter, open the ig_dataGrid.css CSS file located in the RubberBlack styling folder and modify the following class:
tbody.igg_RubberBlackItem>tr>td and remove the background-image definitions.
The class will afterwards look similar to:
tbody.igg_RubberBlackItem>tr>td { background-color:White; background-repeat:repeat-x; border-width:0px; border-color:Transparent; border-top:solid 1px LightGrey; height: 20px; line-height: 20px; padding:5px 8px 5px 8px; overflow: hidden; text-align:left; vertical-align:middle; }
Please remember to clear the browser cache after the changes to ensure that the updated stylesheet is fetched.
Hope this helps. Feel free to contact me with any updates.
Hi
I'm still having the issue with the color.
I'm using the webdatagrid binded directly to a database. I also use ItemTemplate for columns.
I've tried your code, it worked fine but when doing the same in my project, what I got was this :
It seems that the rows are right colored at the first rendering but, just half a second after, the grid is redrawn with previous settings in a way
that I can no longer see the CSS setting done in the initializerow event
Attach a small video of what is going on...
Maybe watching this, you'll be able to find "clues" :)
Please do not hesitate to contact me if you are still experiencing any issues with this matte.r
Attached is a sample with item coloring and ExcelStyle filtering enabled for your reference. Please feel free to contact me with any updates or questions.