Custom module with possibility to add modules into module to create an expander module in DNN 9.2

Question

I'm using DNN 9.2 and searching for a possibility to create an own module that will work like the Atlassian Confluence's Expander Macro where I could add additional content. In my case I want to add other modules, which will be visible if the parent is expanded and hidden if the parent is collapsed. I thought about to use a Pane control in my module to place several other modules into it. It is an approach that imitates the Evoq's Grid module functionality, but with the additional possibility to collapse and expand its content, because of no such (expander) module already exists.

I already tried to achieve it by adding a Pane control from DotNetNuke.UI.Skins namespace in Page_Load method and calling pane.ProcessPane(). As I can see in database a added module by moving it into our custom (expander) module is related to our pane which is located in our module. Actually I have some problems by loading and rendering the page, because the module is located under and not in our custom module like it is referenced in database.

Following is my actual code:

In *.ascx file:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="View.ascx.cs" Inherits="Prototype.View" %>

<div ID="TestModuleDiv" runat="server"></div>

In *.ascx.cs (code behind file):

using System;
using System.Web.UI.HtmlControls;
using DotNetNuke.Entities.Modules;
using DotNetNuke.UI.Skins;

protected void Page_Load(object sender, EventArgs e)
{
    var paneName = "MyTestPane" + ModuleContext.ModuleId;

    var paneControl = new HtmlGenericControl("div");
    paneControl.ID = paneName;

    TestModuleDiv.Controls.Add(paneControl);

    var paneId = paneControl.ClientID.Replace("dnn_", "");

    PortalSettings.ActiveTab.Panes.Add(paneId);

    var pane = new Pane(paneId, paneControl);
    pane.ProcessPane();
}

Does somebody have some more information how I could achieve my wanted behavior?

The aim is to create an expander module that could contain several other modules, but we are not sure how we could build it in a best practice way.

Edit
Sorry, I missed the fact that I'm searching for an approach with minimized JS magic. Therefore I think it has to happen in code behind.
Furthermore the page must remember which "expander" module was collapsed and which expanded.

Not sure what are you asking for but what about using Bootstrap collapse? — Erick Lanford Xenes
Okay, which questions are open that I can clarify them. The aim is to have one module that could contain several other modules. something like a container in a skin that could contain several modules too, but I want it in a module to collapse and expand it. — ChW
No, it should be possible to add every in DNN installed module to our custom module. — ChW
How do you plan to add these modules? Also do you know the max number of mudules you could add? — Erick Lanford Xenes

Joe Craig Joe Craig · Accepted Answer · 2018-07-19T15:08:57

You might want to take a look at this open source project:

   https://github.com/redtempo/dnnstuff.aggregator

The work already has been done.

Custom module with possibility to add modules into module to create an expander module in DNN 9.2

2 Answers