Description:
This KB Article addresses the following situation:
You are using our components with the applied default or custom theme (see Appearance Customization - Theming). You decided to change the background color of components or their parts and got unexpected results. For example:
ASPx<dx:ASPxMenu ID="ASPxMenu1" runat="server" BackColor="Red" Font-Size="Large">
...
results into:
ASPx<dx:ASPxGridView ID="ASPxGridView1" runat="server">
<SettingsBehavior AllowFocusedRow="True" />
<Styles>
<FocusedRow BackColor="Red" />
</Styles>
results into:
Answer:
This behavior occurs because elements of our component can be rendered with help of CSS Image Sprites defined at the theme level. As a result, both the background color and background image are applied to the same element. You can use the approach illustrated in the How to inspect CSS rules KB article to examine the generated HTML in order to check this behavior. For example:
The solution to this issue is to avoid/customize the "background" CSS rule generation. All our components have the corresponding BackgroundImage setting in their style section. You can use it to override the background image. For example, we can rewrite the previous samples as follows:
ASPx<dx:ASPxMenu ID="ASPxMenu1" runat="server" BackColor="Red" Font-Size="Large">
<BackgroundImage ImageUrl="empty.png" />
...
ASPx<dx:ASPxGridView ID="ASPxGridView1" runat="server">
<SettingsBehavior AllowFocusedRow="True" />
<Styles>
<FocusedRow BackColor="Red">
<BackgroundImage ImageUrl="empty.png" />
</FocusedRow>
</Styles>
<Columns>
...
Of course, you need to put the empty.png image file to your website's root directory. The rendering result should be as follows:
Finally, please note that we demonstrated only one possible approach. You can use many different approaches to achieve the same result. For example, you can declare separate CSS rules (see ASPxGridView - Modify Focused Row color and CSS background-image property):
CSS.dxmLite_DevEx .dxm-main {
background: red;
}
CSS.dxgvFocusedRow_DevEx {
background: red;
}
Note that in this scenario, you do not even need to specify the color at the markup level because these CSS rules define the color and empty background image simultaneously. This solution is targeting the DevEx theme. In case of other themes, you need to modify the CSS rule postfix based on a specific theme.
Alternatively, you can implement specific server-side logic (see ASPxGridView - Only a part of a row is painted with the correct color assigned to the e.Row.BackColor property in HtmlRowPrepared event if text wraps with column) to avoid undesired side-effects of the default sprite images. Or, you can create a custom theme that is the most flexible solution.