Products

Solutions

Resources

Partners

Community

Blog

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeGetting StartedGetting StartedNew to DNN Plat...New to DNN Plat...Drag and Drop a Module into another ModuleDrag and Drop a Module into another Module
Previous
 
Next
New Post
6/22/2017 12:51 PM
 
Hi,

This is my first post as I have only been testing DNN now for a few days and after a painful manual setup experience (WebMatrix sucks, let's not go there!!), I have managed to create a nice web layout using the DNN platform and several free modules. One of those modules is a Tab module, however this only works with entering text for the header and tab body.

So I set about tweaking this by adding the classes "row dnnpane", however when the Tab module is shown on screen even after a refresh, this is missing the extra divs with SyncPanel etc. So this code below didn't work.

<div class="tab-content">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div id='di-tab-body<%# "Id") %>' class='row dnnpane tab-pane fade'>
                <div id='dnn_tab_<%# "Id") %>'>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Adding the extra divs/elements, classes etc manually (I got these from inspecting a page at design time using FireFox & FireBug) I managed to get it to allow the tab body to work as a drag & drop area, however when I drop a control I get an error within the ModuleDialog.js file, specifically within the refreshPane function. The 5th line of code "paneId = this.getPaneById(paneName).attr('id');" fails to get an ID, however if I move this into other panes first then into the Tab module it fails at "var moduleId = handler._moduleManager._findModuleId($(this));" with _moduleManager is undefined again within the refreshPane function.

<div id='di-tab-body<%# "Id") %>' class='row dnnpane tab-pane fade'>
    <div id='dnn_tab_<%# "Id") %>_SyncPanel' class="DnnAjaxPanel col-md-12 spacingTop">
        <div id='dnn_tab_<%# "Id") %>' class="DNNEmptyPane dnnSortable EditBarEmptyPane dnnModuleManager ui-sortable sc-cb-pane-glow">
            <a class="addModuleHandler" href="#" aria-label="Add Module" style="">
                <span></span>
            </a>
            <a class="addExistingModuleHandler" href="#" aria-label="Add Existing Module">
                <span></span>
            </a>
        </div>
    </div>
</div>

Therefore my question is this, does anyone know how I can add drag and drop functionality at design time to allow the Tab control to accept controls within each tab body area? I suspect I am missing a call to a JavaScript function that will create the missing elements and correctly register them but I am not sure where to look! I am amazed I even got this far lol

Regards,

Xander

 
 
New Post
11/30/2017 12:59 PM
 

FWIW...

I would NOT nest controls/modules at all if it can be avoided in any way.

I would NOT next because once nesting is allowed there is the case of over-nesting.

For example, one could have "a module in a module in a module in a module in a module,.... N, etc) and that is tough to manage, probably very fragile.

So, I would...

1. Split out the functionality/responsibility of the module. Maybe in your case there is a "Tab Module" that switches from Tab to Tab and provides a public "current selection" property. Then, have another Module that loads/displays content based on some external property (such as the "current selection" in the Tab Module. Sure, they "work together" and they necessarily depend on each other, but they are not "in the self-same space" and the code is only coupled by a property. That way, there would be zero nesting and your could "make it look like it is nested" or something like that.

2. Build a custom ASCX-based Module with C#, which could definitely be done, dynamic editing, dynamic drag-and-drop type stuff, but contained and managed in a single container.

3. Use something like... http://createjs.org/ ...for a pure JS solution.

HTH.

Thanks.

-- Mark Kamoski
 
Previous
 
Next
HomeHomeGetting StartedGetting StartedNew to DNN Plat...New to DNN Plat...Drag and Drop a Module into another ModuleDrag and Drop a Module into another Module


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out