Hello,
Please see attached file. I would like to change the color of the top left corner of the grid to black. Can anyone please help me achieve this using the properties of the grid? Also, how can I change the font size and color for each row?
Thanks!
Please let me know how these suggestions work for you!
The class applied to the autoGenerated element for this part of the header when using default theme is “ighg_ExpansionColumnHeader”You could use any browser’s WebTools to investigate what css classes and styles are applied to each element of the grid and change the css accordingly.You could take a look at http://ko.infragistics.com/samples/aspnet/hierarchical-data-grid/child-band-styling
And even play with the css used and change the color
.ighg_ExpansionColumnHeader{background-color: transparent; border-color: #777777 #777777 #777777 #888888; border-style: solid; border-width: 1px;}
TO
.ighg_ExpansionColumnHeader{background-color: green; border-color: #777777 #777777 #777777 #888888; border-style: solid; border-width: 1px;}
In general:1) You could rewrite the css class files directly and make your changes there2) You could overwrite the css classes used by creating a class with the same name in your application and this way overwrites the original ones.3) Use the Infragistics Application Styling Configuration Tool and easily create custom style (based on the existing styles Or completely new one)
Regarding the text fonts used, a similar approach could be used as already described.
I suggest you go for Application Styling Configuration Tool and easily create custom style.OnlineSample illustrating many of the available pre-built application styles. http://ko.infragistics.com/samples/aspnet/hierarchical-data-grid/application-styling
Here is a guide regarding the main CSS Styles for the WebDataGrid and detailed description what they are applied to. It is always useful to have this guide at hand when customizing CSS Styles:http://ko.infragistics.com/community/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx
Also in order to apply custom CSS classes without interfering with the Default(or other Theme) Styles used, I suggest this “WebDataGrid change row style” video, as it basically describes how to apply custom css class to a row. What is more it shows how to determine(debug) the styles applied for specific elements and the correct way of using selectors so no conflicts occur. http://www.youtube.com/watch?v=Sw5h61IwQzM&list=PLDAFFE8C757FED32E&index=9
My suggestion is, if you want to use different style (custom style), use NetAdvantage AppStylist for ASP.NET. With this handful tool you can design CSS changes to a class and watch those changes be applied at the same time, and many other things.
Useful reference:Getting to Know NetAdvantage AppStylist for ASP.NET ASP.NET AppStyling Getting Started (video tutorial)
After you are done with your custom style, just use Infragistics Application Styling Configuration Tool to add libraries of consistently themed CSS files and graphic images to your project/web site.
Useful references:CSS File Structure Which are my CSS files?
http://ko.infragistics.com/community/blogs/engineering/archive/2010/08/10/which-are-my-css-files.aspx WebDataGrid CSS styling guide Enabling Application Styling Using the web.config File