Is that possible to show split container inside dialog/modal dialog in dojo?

Question

I was trying to add SplitContainer inside dialog programatically, I am not able to success it.

Could anyone please suggest me that is it possible to add SplitContainer inside Dialog? if yes please share the me the sample if you have anything.

Thanks Murugan

The popover widget is our own widget and derived from dojo dialog.

define("storm/service/serviceErrorDeploy/serviceErrorDeploy", ["dojo/_base/declare",
        "dojo/data/ItemFileWriteStore",
        "xwt/widget/table/Table",
        "dijit/layout/ContentPane",
        "dijit/tree/ForestStoreModel",
        "xwt/widget/layout/Popover",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/i18n!storm/nls/actions",
        "xwt/widget/table/GlobalToolbar",
        "xwt/widget/tree/Tree",
         'dojo/dom-construct',
         'dojo/query',
         "dojo/_base/array"      
        ], function(declare, ItemFileWriteStore, Table,ContentPane, ForestStoreModel, Popover,lang,dom,nls,GlobalToolbar,Tree,domConstruct,query,array){
    return declare("storm.topology.serviceErrorDeploy.widget.serviceErrorDeploy", [Popover], {
        i18n: nls,
        id:"serviceErrorPop",
        pinnable:false,
        baseClass: "serviceErrorDeploy",
        errorProvisioningDetailsTable:null,
        errorProvisioningDetailsCPane:null,
        summaryData : null,
        url : '/webacs/api/v1/data/DeviceConfigDeploymentStatus.json?.full=true&cfsId=',
        tableData:null,
        resizable:true,
        treeArray: [],
        postCreate: function(){
            this.inherited(arguments);
            if(dijit.byId('errorProvisioningDetailsCPaneID')){
                try {                   
                    dijit.byId('errorProvisioningDetailsCPaneID').destroy();                    
                }catch(err) {console.log(err);}
            } 
            var tableTrs = query('.serviceErrorDeployPopup');
            tableTrs.forEach(lang.hitch(this,function(obj){ 
                var node = query('.xwtPopoverClose',obj)[0];
                if(node && node !=undefined)
                    node.click();
            }));
        },
        setValues: function(values, cell){
            this.inherited(arguments);
            this.setAttribute('title',values.name);
            this.url += values["@id"]?values["@id"]:values.version>=0?values.provisionedCfsId:values.discoveredCfsId;
            this.createWidgetStructure();
        },
        createWidgetStructure:function(){
            this.splitterPane = new  xwt.widget.layout.SplitContainer({id:'errorDetailsSplitContainer',useFullViewPort:true}, this.containerNode);
            this.errorProvisioningDetailsCPane = new ContentPane({
                id: "errorProvisioningDetailsCPaneID",
                region: "top",
                style:"height:100%;border: 1px white solid;overflow:hidden;"
            });                 
            this.errorDetailsTreeCPane = new ContentPane({
                id: "errorDetailsTreeCPaneID",
                region: "center",
                style:"height:270px;border: 1px white solid;"
            });
            this.splitterPane.addChild(this.errorProvisioningDetailsCPane);
            this.splitterPane.addChild(this.errorDetailsTreeCPane);
            this.splitterPane.startup();
            this.splitterPane.resize();         
        },
        hide: function(evt) {
            this.inherited(arguments);
            if (this.errorProvisioningDetailsCPane) {
                this.errorProvisioningDetailsCPane.destroyRecursive();
                this.errorProvisioningDetailsCPane = null;
            }
            this.treeArray = [];
        },
        destroy: function(){
            this.inherited(arguments);
            if (this.errorProvisioningDetailsCPane) {
                this.errorProvisioningDetailsCPane.destroyRecursive();
                this.errorProvisioningDetailsCPane = null;
            }
            this.treeArray = [];
        }
    });
});

Answer 1

Note that the SplitContainer is deprecated , so you should use other layout instead , in this case using BorderContainer and use the liveSplitter:true may help you ,

Please see this working Fiddle .

and a working snippet :

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/Dialog","dijit/registry", "dojo/dom","dojo/on","dijit/form/Button","dojo/ready"],
		function(BorderContainer,ContentPane,Dialog,registry,dom,On,Button,ready){
    		ready(function(){
        	myDialog = new Dialog({
              title: "My Dialog",
              content: "Test content.",
              style: "width: 300px"
          },"dialog");
          
          var borderContainer = new BorderContainer({
          	style:"height: 300px; width: 300px",
             gutters:true, 
             liveSplitters:true
          });
          
          var cp1 = new ContentPane({
              region: "center",
              splitter:true,
              style: "width: 100px",
              content: "content 1"
          });
          borderContainer.addChild(cp1);

          var cp2 = new ContentPane({
         			splitter:true,
              region: "right",
              content: "content 2"
          });
          borderContainer.addChild(cp2);
          
          myDialog.addChild(borderContainer);
          
          On(registry.byId("btn"),"click",function(e){
          	myDialog.show();
          })
          
          
        });    
    }
);

<script>
dojoConfig = {
  isDebug: true,
  parseOnLoad: true,
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>

<body class="claro">
<div data-dojo-type="dijit/form/Button" id="btn"> click me </div>
<div id="dialog"></div>
</body>