Collapsible Panel in XAF Web Application

Hi Dennis
Thank you for the response. I downloaded example E1499 but it doesn't compile on version 12.2.6. My idea is to collapse the contents that are inside a layout group. If you could kindly point me to an example that runs on 12.2.6/7 that would really help.
The second option of using the ASPxRound Panel sounds like a good option but how can that be implemented in a XAF Web App? The example on this is based on a normal Web Application.

The best way to accomplish this task is to implement a custom layout template as per my first link. Please refer to it as it contains additional details and points to examples. Let me know if you experience any difficulties with this solution.
The XAF Web application is a "normal" Web application. While implementing a custom template, you just need to create controls in code, that is it.
As for the E1499 example, basically, you just need the following code that shows how to create the ASPxNavBar in code and add a new group into it:

C#
ASPxNavBar navbar = new ASPxNavBar();  
int index = parent.Controls.IndexOf(control);  
parent.Controls.RemoveAt(index);  
parent.Controls.AddAt(index, navbar);  
NavBarGroup group = new NavBarGroup(string.Empty);  
group.ExpandButtonPosition = ExpandButtonPosition.Left;  
group.ContentTemplate = new NavBarGroupContentTemplate(control);  
navbar.Groups.Add(group);  

This basic code will work for any version (also, you likely need to rework it per your exact needs), and you do not need the other parts of this example.
I mentioned this example just to let you know of all the options that can be used for this task.
Let me know in case of any further difficulties.

custom layout template works perfectly.
Thanks Dennis

I am glad to hear of your progress. Please do not hesitate to share your code here with other XAF users or contribute it to the eXpand Framework: http://www.expandframework.com/

Hi Dennis,

I implemented the LayoutGroupTemplate for Web as follow and it works great.

C#
protected override void LayoutContentControls(LayoutGroupTemplateContainer templateContainer, IList<Control> controlsToLayout)  
{  
    //base.LayoutContentControls(templateContainer, controlsToLayout);  
    //LayoutGroupTemplateContainer layoutGroupTemplateContainer = (LayoutGroupTemplateContainer)templateContainer;  
    if (templateContainer.ShowCaption & !templateContainer.IsOnTabPage)  
    {  
        Panel panel = new Panel();  
        //panel.Style.Add(HtmlTextWriterStyle.Padding, "5px 5px 5px 5px");  
        ASPxRoundPanel roundPanel = new ASPxRoundPanel();  
        //roundPanel.ID = templateContainer.ViewItem.Id;  
        roundPanel.Collapsed = false;  
        roundPanel.AllowCollapsingByHeaderClick = true;  
        roundPanel.Height = Unit.Pixel(50);  
        roundPanel.Width = Unit.Percentage(100);  
        roundPanel.ContentPaddings.Padding = Unit.Pixel(20);  
        roundPanel.ShowHeader = templateContainer.ShowCaption;  
        roundPanel.BackColor = System.Drawing.Color.White;  
        roundPanel.View = DevExpress.Web.View.Standard;  
        //roundPanel.CssClass = layoutGroupTemplateContainer.css  
        if (templateContainer.HasHeaderImage)  
        {  
            ASPxImageHelper.SetImageProperties(roundPanel.HeaderImage, templateContainer.HeaderImageInfo);  
        }  
        else  
        {  
            roundPanel.Border.BorderWidth = 1;  
            roundPanel.Border.BorderStyle = BorderStyle.Solid;  
            roundPanel.Border.BorderColor = System.Drawing.Color.LightGray;  
        }  
        roundPanel.HeaderText = templateContainer.Caption.ToUpper();  
        roundPanel.HeaderStyle.BorderBottom.BorderWidth = 0;  
        panel.Controls.Add(roundPanel);  
        templateContainer.Controls.Add(panel);  
        foreach (Control control in controlsToLayout)  
        {  
            roundPanel.Controls.Add(control);  
        }  
    }  
    else {  
        foreach (Control control in controlsToLayout)  
        {  
            templateContainer.Controls.Add(control);  
        }  
    }  
}  

From now on, I'd like to extend the Model to customize the possibility to make a group expandable or not, just like in Q582278, which is for Winform. The extension works no pb, but to use it I have trouble to match created items IDs / Name and actual webControl's IDs/Names.

Here below is my code,

C#
public partial class CustomizeDetailViewController : ViewController  
{  
    WebLayoutManager layoutManager;  
    Dictionary<string, IModelLayoutGroupExtender> layoutGroups;  
    public CustomizeDetailViewController()  
    {  
        InitializeComponent();  
        // Target required Views (via the TargetXXX properties) and create their Actions.  
    }  
    protected override void OnActivated()  
    {  
        base.OnActivated();  
        // Perform various tasks depending on the target View.  
        layoutGroups = new Dictionary<string, IModelLayoutGroupExtender>();  

        layoutManager = (View as DetailView).LayoutManager as WebLayoutManager;  
        layoutManager.ItemCreated += LayoutManager_ItemCreated; ;  

        //View.ModelSaved += View_ModelSaved;  
        View.ControlsCreating += new EventHandler(View_ControlsCreating);  
    }  
    protected override void OnViewControlsCreated()  
    {  
        base.OnViewControlsCreated();  
        // Access and customize the target View control.  
        CustomizeLayoutGroup((CustomPanel)View.Control);  
    }  
    protected override void OnDeactivated()  
    {  
        // Unsubscribe from previously subscribed events and release other references and resources.  
        View.ControlsCreating -= new EventHandler(View_ControlsCreating);  
        layoutManager.ItemCreated -= LayoutManager_ItemCreated;  
        base.OnDeactivated();  
    }  
    private void View_ControlsCreating(object sender, EventArgs e)  
    {  
        UpdateLayoutManagerTemplates();  
    }  
    private void LayoutManager_ItemCreated(object sender, ItemCreatedEventArgs e)  
    {  
        if (e.ModelLayoutElement is IModelLayoutGroup)  
        {  
            IModelLayoutGroup lg = e.ModelLayoutElement as IModelLayoutGroup;  
            if ((lg as IModelLayoutGroupExtender).Expandable &&  
                !layoutGroups.ContainsKey(lg.Id))  
                layoutGroups.Add(lg.Id, (IModelLayoutGroupExtender)e.ModelLayoutElement);  
        }  
    }  
    void CustomizeLayoutGroup(Control control)  
    {  
        if (control is DevExpress.Web.ASPxRoundPanel)  
        {  
            var roundPanel = control as DevExpress.Web.ASPxRoundPanel;  
            if (layoutGroups.ContainsKey(roundPanel.UniqueID))  
            {  
                roundPanel.Collapsed = !layoutGroups[roundPanel.ID].Expanded;  
                roundPanel.AllowCollapsingByHeaderClick = true;  
            }  
        }  
        else  
        {  
            foreach (Control ctrl in control.Controls)  
            {  
                CustomizeLayoutGroup(ctrl);  
            }  
        }  
    }  

    void UpdateLayoutManagerTemplates()  
    {  
        var groupTemplate = new CustomLayoutGroupTemplate();  
        layoutManager.LayoutGroupTemplate = groupTemplate;  
    }  
}  

The only way to populate the dictionary is to use lg.Id but the only Id I've got when I want to retrieve info from the dictionary is AspxRoundPanel.UniqueId which is not the same as the modelEditorItem Id…

Br, Anthony

We need additional time to research your scenario and find a solution. We will update this ticket once we have any result.

Hello Anthony,

I have modified your sample code. I suggest you apply these settings to the panel when it is created and the Controller used to save the settings to the Application Model.

C#
public interface IModelLayoutGroupExtender {  
        [DefaultValue(true)]  
        bool Expanded { get; set; }  
}  

protected override void LayoutContentControls(LayoutGroupTemplateContainer templateContainer, IList<Control> controlsToLayout) {  
                ...  
                ASPxRoundPanel roundPanel = new ASPxRoundPanel();  
                roundPanel.Collapsed = !((IModelLayoutGroupExtender)templateContainer.Model).Expanded;  
                roundPanel.ID = RenderHelper.QuoteJScriptString(templateContainer.Model.Id);  
                ...  
}  

C#
public class CustomizeDetailViewController : ViewController<DetailView> {  
    protected override void OnActivated() {  
        base.OnActivated();  
        View.ModelSaving += new EventHandler<CancelEventArgs>(View_ModelSaving);  
    }  
    protected override void OnDeactivated() {  
        View.ModelSaving -= new EventHandler<CancelEventArgs>(View_ModelSaving);  
        base.OnDeactivated();  
    }  

    private void View_ModelSaving(object sender, CancelEventArgs e) {  
        ModelSaving((Control)View.Control);  
    }  
    private void ModelSaving(Control control) {  
        if(control is DevExpress.Web.ASPxRoundPanel) {  
            var roundPanel = (DevExpress.Web.ASPxRoundPanel)control;  
            IModelLayoutGroupExtender panelModel = FindModeLayoutGroup(control.ID);  

            panelModel.Expanded = !roundPanel.Collapsed;  
        }  
        else {  
            foreach(Control ctrl in control.Controls) {  
                ModelSaving(ctrl);  
            }  
        }  
    }  
    private IModelLayoutGroupExtender FindModeLayoutGroup(string id) {  
        return FindModeLayoutGroup(id, View.Model.Layout);  
    }  
    private IModelLayoutGroupExtender FindModeLayoutGroup(string id, IEnumerable parent) {  
        IModelLayoutGroupExtender result = null;  
        foreach(IModelNode node in parent) {  
            if(node is IModelLayoutGroupExtender && DevExpress.ExpressApp.Web.RenderHelper.QuoteJScriptString(((IModelLayoutGroup)node).Id) == id) {  
                result = (IModelLayoutGroupExtender)node;  
            }  
            else {  
                if(node is IEnumerable) {  
                    result = FindModeLayoutGroup(id, (IEnumerable)node);  
                }  
            }  
            if(result != null) {  
                break;  
            }  
        }  
        return result;  
    }  
}  

The attached video is an example and shows a solution in detail. Let me know if I can assist you further.

Works like a charm