[CLOSED] [MVC] Swap_Dropable with itemsFromPartial

[Tactem]

Hi guys,

I have a view with a viewPort with a itemsFromPartial function.
In my second view i have this code : http://mvc.ext.net/#/DragDrop_Panel/...ropable_Panel/.

When i launch direct partial view, it works, but when i launch index, dropzone item doesn't work. It's possible to define panel var as drop panel.

Index.cshtml

@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)
@(
 Html.X().Viewport()
    .Layout(LayoutType.Fit)
    .ItemsFromPartial("ManagementView")
)

PartialView.cshtml

@using Ext.Net;
@using Ext.Net.MVC;

@*@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)*@
    <style>
        .invite {
            background-color : #99bbe8 !important;
        }
        
        .x-drop-marker {
            background-color : silver;
        }
    </style>
    <script>
        var notifyDrop = function (source, e, data) {
            var targetCt = Ext.getCmp(this.el.dom.id),
                targetPanel = targetCt.items.get(0),
                sourceCt = data.panel.ownerCt;

            sourceCt.add(targetPanel);
            targetCt.add(data.panel);

            Ext.defer(function () {
                targetPanel.doLayout();
                data.panel.doLayout();
            }, 1);
        };

        var startDrag = function () {
            Ext.select(".dropable").addCls("x-drop-marker");
            Ext.select(".draggable").hide();
            this.panelProxy.moveOnDrag = false;
        };

        var endDrag = function () {
            Ext.select(".dropable").removeCls("x-drop-marker");
            Ext.select(".draggable").show();
            Ext.panel.DD.prototype.endDrag.apply(this, arguments);
        };
    </script>
    @{var panel = Html.X().Panel()
        .Layout(LayoutType.VBox)
        .LayoutConfig(new VBoxLayoutConfig{Align= VBoxAlign.Stretch})
        .Height(700)
        .Width(1000)
        .Items(
            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("North")
                ),
                     
            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("East")
                    ),
                                 
            Html.X().Container()
                .Cls("dropable")
                .Height(100)
                .Layout(LayoutType.Fit)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("Center")
                        .Html("Drag/Drop Panel Headers to a different Viewport Region")
                        .BodyPadding(5)
                ),
 
            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("South")
                    ),
 
            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("West")
                    )
        );
    }
 
    @{panel.ToComponent().Items.ForEach(item =>
        {
            var region = item as Container;
 
            Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
 
            p.DraggablePanelConfig = new DragSource
            {
                Group = "panelDD",
                StartDrag =
                {
                    Fn = "startDrag"
                },
 
                EndDrag =
                {
                    Fn = "endDrag"
                }
            };
        });
    }
 
    @panel
     
 
    @(Html.X().DropZone()
        .Target("${.dropable}")
        .Group("panelDD")
        .OverClass("invite")
        .NotifyDrop(nd => nd.Fn = "notifyDrop")
        .NotifyOut(nout => nout.Handler = "this.el.removeCls('invite');")
        .NotifyOver(nover => nover.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');")
  
    )

Regards

[Daniil]

Hi @Tactem,

ItemsFromPartial puts the DropZone into the Viewport's Items. It is not correct.

Another thing is the fact that a DropZone should be created after rendering all the related stuff.

I can suggest the following solution.

@{
    panel.Bin(
        Html.X().DropZone()
            .ID("DropZone1")
            .TemplateWidget(true)
            .Target("${.dropable}")
            .Group("panelDD")
            .OverClass("invite")
            .NotifyDrop(nd => nd.Fn = "notifyDrop")
            .NotifyOut(nout => nout.Handler = "this.el.removeCls('invite');")
            .NotifyOver(nover => nover.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');")
    );
        
    panel.Listeners(events => events.AfterRender.Handler = "App.getDropZone1();");
}

[Tactem]

Hi daniil,

I tried this, but i had this error when listener is added :

TypeError: this.el is null

Regards

[Daniil]

What is Ext.NET version are you testing with?

[Tactem]

I have EXT.Net 2.2.0.23985

[Daniil]

Is it the official v2.2 release or some specific build from the trunk?

Could you update from the trunk and retest?

[Tactem]

I have the same problem with the last version of svn 2.3.1.1542

[Daniil]

Please provide a test case after applied modifications.

[Tactem]

this is the code after applied modification

@using Ext.Net;
@using Ext.Net.MVC;

@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)
    <style>
        .invite {
            background-color : #99bbe8 !important;
        }
        
        .x-drop-marker {
            background-color : silver;
        }
    </style>
    <script>
        var notifyDrop = function (source, e, data) {
            var targetCt = Ext.getCmp(this.el.dom.id),
                targetPanel = targetCt.items.get(0),
                sourceCt = data.panel.ownerCt;

            sourceCt.add(targetPanel);
            targetCt.add(data.panel);

            Ext.defer(function () {
                targetPanel.doLayout();
                data.panel.doLayout();
            }, 1);
        };

        var startDrag = function () {
            Ext.select(".dropable").addCls("x-drop-marker");
            Ext.select(".draggable").hide();
            this.panelProxy.moveOnDrag = false;
        };

        var endDrag = function () {
            Ext.select(".dropable").removeCls("x-drop-marker");
            Ext.select(".draggable").show();
            Ext.panel.DD.prototype.endDrag.apply(this, arguments);
        };
    </script>
    @{var panel = Html.X().Panel()
        .Layout(LayoutType.VBox)
        .LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
        .Height(700)
        .Width(1000)
        .Items(
            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("North")
                ),

            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("East")
                    ),

            Html.X().Container()
                .Cls("dropable")
                .Height(100)
                .Layout(LayoutType.Fit)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("Center")
                        .Html("Drag/Drop Panel Headers to a different Viewport Region")
                        .BodyPadding(5)
                ),

            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("South")
                    ),

            Html.X().Container()
                .Cls("dropable")
                .Layout(LayoutType.Fit)
                .Height(100)
                .Margins("10 10 10 10")
                .Items(
                    Html.X().Panel()
                        .Cls("draggable")
                        .Title("West")
                    )
        )
        .Listeners(events => events.AfterRender.Handler = "App.getDropZone1();");
          panel.Bin(
              Html.X().DropZone()
                  .ID("DropZone1")
                  .TemplateWidget(true)
                  .Target("${.dropable}")
                  .Group("panelDD")
                  .OverClass("invite")
                  .NotifyDrop(nd => nd.Fn = "notifyDrop")
                  .NotifyOut(nout => nout.Handler = "this.el.removeCls('invite');")
                  .NotifyOver(nover => nover.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');")
          );
    }
 
    @{panel.ToComponent().Items.ForEach(item =>
        {
            var region = item as Container;
 
            Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
 
            p.DraggablePanelConfig = new DragSource
            {
                Group = "panelDD",
                StartDrag =
                {
                    Fn = "startDrag"
                },
 
                EndDrag =
                {
                    Fn = "endDrag"
                }
            };
        });
    }
 
    @panel
     
 
    @*@(Html.X().DropZone()
        .Target("${.dropable}")
        .Group("panelDD")
        .OverClass("invite")
        .NotifyDrop(nd => nd.Fn = "notifyDrop")
        .NotifyOut(nout => nout.Handler = "this.el.removeCls('invite');")
        .NotifyOver(nover => nover.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');")
  
    )*@

[Daniil]

Please add this for the DropZone:

.LazyMode(LazyMode.Config)