Please look at the attached project. There are a couple of ConditionalAppearance rules defined for MyDomainObject. The rules modify the BackColor of the layout groups to pink. The layout for MyDomainObject in the model defines a LayoutGroup and a separate TabbedGroup.
The actual output looks like this this.
However the output I would like (in both cases) is where the whole layout group is pink this.
Conditional Appearance BackColor not working as expected for LayoutGroups and TabbedGroups
Show previous comments
(0)
Comments
(0)
Sign in to comment on this post
Answers
created 13 years ago
(modified 8 years ago)
Hello Robert,
This is by design. We have not implemented the full layout group painting. If you wish to change the appearance of the entire application, it is better to customize the web theme (see Customizing Theme Source Files). Otherwise, you can use the WebLayoutManager.ItemCreated event to change the particular control's appearance. Here is the simplified example:
C#using System;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Model;
using DevExpress.ExpressApp.Web.Layout;
using DevExpress.Web;
namespace MainDemo.Module.Web {
public class ViewController1 : ViewController<DetailView> {
protected override void OnActivated() {
base.OnActivated();
((WebLayoutManager)View.LayoutManager).ItemCreated += ViewController1_ItemCreated;
}
void ViewController1_ItemCreated(object sender, ItemCreatedEventArgs e) {
if (e.ModelLayoutElement is IModelLayoutGroup && ((IModelLayoutGroup)e.ModelLayoutElement).ShowCaption == true) {
e.TemplateContainer.Init += TemplateContainer_Init;
}
}
void TemplateContainer_Init(object sender, EventArgs e) {
LayoutItemTemplateContainerBase templateContainer = (LayoutItemTemplateContainerBase)sender;
templateContainer.Init -= TemplateContainer_Init;
PaintRecursive(templateContainer);
}
private void PaintRecursive(Control control) {
foreach (Control childControl in control.Controls) {
if (childControl is ASPxEdit) return;
if (childControl is WebControl) {
((WebControl)childControl).BackColor = Color.Yellow;
}
PaintRecursive(childControl);
}
}
protected override void OnDeactivated() {
base.OnDeactivated();
((WebLayoutManager)View.LayoutManager).ItemCreated -= ViewController1_ItemCreated;
}
}
}
Please let me know if you need any further assistance.
Show previous comments
(6)
Hello,
Thank you for the clarification. Indeed, when the new web UI is used, we apply CSS rules to tabs. That is why the code you showed doesn't work anymore.
The easiest way to accomplish this task is to override the CSS rules we are using. For this, add the following style to the Default.aspx page:
CSS <style media="screen" type="text/css">
.LayoutTabbedGroupContainer .dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-activeTab,
.LayoutTabbedGroupContainer .dxtcLite_XafTheme.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab.dxtc-lead,
.LayoutTabbedGroupContainer .dxtcLite_XafTheme.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab
{
background-color: green !important;
}
</style>
I modified the E372: How to access a tab control in a Detail View layout example accordingly. Try it and let me know whether it helps.
I suggest that you also review the K18570: How to inspect CSS rules article to learn how to find and change the appearance of HTML elements.
Let us know if you have any further questions.
Thanks,
Andrey
I need conditional applied style not permanent , how to achieve this
C#....
if (!string.IsNullOrEmpty(((Customer)View.CurrentObject).SpecialAgreement))
{
e.PageControl.ClientSideEvents.Init = "function(s,e){s.SetActiveTabIndex(3);}";
e.PageControl.ActiveTabStyle.BackColor = System.Drawing.Color.Yellow; // doesnt work
}
...
You can declare a custom CSS class with the required background color and assign the page control's CssClass property conditionally. Here is a MainDemo-based example:
C#using System;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Web.Layout;
using DevExpress.Web;
using MainDemo.Module.BusinessObjects;
namespace MainDemo.Module.Web {
public class ContactTabsColorController : ObjectViewController<DetailView, Contact> {
ASPxPageControl pageControl;
protected override void OnActivated() {
base.OnActivated();
((WebLayoutManager)View.LayoutManager).PageControlCreated += LayoutManager_PageControlCreated;
View.CurrentObjectChanged += View_CurrentObjectChanged;
}
void View_CurrentObjectChanged(object sender, EventArgs e) {
UpdatePageControlStyle();
}
void LayoutManager_PageControlCreated(object sender, PageControlCreatedEventArgs e) {
pageControl = e.PageControl;
UpdatePageControlStyle();
}
private void UpdatePageControlStyle() {
if (pageControl != null) {
pageControl.CssClass = ViewCurrentObject != null && ViewCurrentObject.Manager != null ? "yellowBackColor" : "";
}
}
protected override void OnDeactivated() {
base.OnDeactivated();
((WebLayoutManager)View.LayoutManager).PageControlCreated -= LayoutManager_PageControlCreated;
View.CurrentObjectChanged -= View_CurrentObjectChanged;
}
}
}
Note that since built-in CSS settings also declare the background-color style with the important modifier, it is necessary to create a selector that overrides these styles. Use the browser's Development Tools to determine which selectors should be overridden and embed the yellowBackColor class there. Here is an example:
ASPx.LayoutTabbedGroupContainer .yellowBackColor.dxtcLite_XafTheme.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab { background-color: yellow !important; } .yellowBackColor.dxtcLite_XafTheme.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab { background-color: yellow !important; } .yellowBackColor .dxtc-content { background-color: yellow !important; }