PDA

View Full Version : [CLOSED] Drag and Drop MVC Razor examples Grid Cell and Grid Row to Panel



ATLAS
Jul 18, 2013, 8:33 AM
After finding the MVC Razor drag and drop example based on the Hospital/Patient example, I notice that in the non-MVC exapmles there are (amongst others) cell-to-cell, field-to-grid and grid-to-formpanel examples. Is there similar MVC Razor based examples (or has anyone cracked this nut)?

I'm trying to get both gridcell-to-panel and gridrow-to-panel and also the inverse working in my MVC Razor based site. That is, I want to drag a grid row or grid cell to a panel where the row will subsequently be removed or hidden in the grid and an image button will be added to the panel. Also need to be able to to the reverse, drag the image button from the panel back to the grid and have the row added or shown as appropriate.

Daniil
Jul 18, 2013, 12:53 PM
Hi @ATLAS,


exapmles there are (amongst others) cell-to-cell, field-to-grid and grid-to-formpanel examples. Is there similar MVC Razor based examples (or has anyone cracked this nut)?

I just ported WebForms examples to the MVC and committed to SVN trunk (see the DragDrop_Grid Area).

Hope this helps.

ATLAS
Jul 18, 2013, 2:30 PM
Hi @ATLAS,



I just ported WebForms examples to the MVC and committed to SVN trunk (see the DragDrop_Grid Area).

Hope this helps.


Thanks Daniil, I'll drag :-) it down from SVN and have a look. I'll update this thread when I have it working.

ATLAS
Jul 18, 2013, 5:54 PM
Hi @ATLAS,



I just ported WebForms examples to the MVC and committed to SVN trunk (see the DragDrop_Grid Area).

Hope this helps.


OK, I've hit the first issue. I've taken my working GridPanel and added the drag group, as per the examples. Code added below.






@(Html.X().GridPanel()
.ID("PERFORMANCE_CRITERIA_GRID_PANEL_ID")
.Region(Region.West)
.Layout(LayoutType.HBox)
.LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Stretch })
.Split(false)
.AutoScroll(true)
.Border(true)
.Flex(3)
.Width(1000)
.MaxHeight(750)
.Padding(2)
.Cls("custom-grid")
.ColumnLines(true)

.TopBar(
Html.X().Toolbar()
.Flat(true)
.Items(
Html.X().ToolbarFill(),

Html.X().Button()
.Icon(Icon.BulletPlus)
.Text(GlobalResources.ExpandAll)
.Handler("this.up('gridpanel').getView().getFeature('UserCom pElementsGrouping').expandAll();"),

Html.X().Button()
.Icon(Icon.BulletMinus)
.Text(GlobalResources.CollapseAll)
.Handler("this.up('gridpanel').getView().getFeature('UserCom pElementsGrouping').collapseAll();"),

Html.X().ToolbarSpacer().Width(30)
)
) /* -- end of top bar items -- */

.StoreID("SUBMIT_EVIDENCE_STORE_ID")

.ColumnModel(
Html.X().Column()
.ID("CU-ID")
.Hidden(true)
.DataIndex("CUId"),

Html.X().Column()
.ID("CE-ID")
.Hidden(true)
.DataIndex("CEId"),

Html.X().Column()
.ID("PerfCrit-ID")
.Hidden(true)
.DataIndex("PerfCritId"),

Html.X().SummaryColumn()
.Text(GlobalResources.CompetencyUnits)
.DataIndex("CUDescription")
.Hideable(false),

Html.X().Column()
.Text(GlobalResources.Unit)
.Width(100)
.Sortable(false)
.MenuDisabled(true)
.DataIndex("CUTitle"),

Html.X().SummaryColumn()
.Text(GlobalResources.Element)
.Width(100)
.Sortable(false)
.MenuDisabled(true)
.DataIndex("CEDescription"),

Html.X().SummaryColumn()
.Text(GlobalResources.PerformanceKnowledgeCriteria Assessment)
.DataIndex("PerfCriteria")
.Sortable(false)
.MenuDisabled(true)
.Flex(1),


Html.X().CheckColumn()
.Text(GlobalResources.Select)
.DataIndex("IsSelected")
.Editable(true)
.MenuDisabled(true)
.Renderer(new Renderer() { Fn = "fnRenderElementSelectedCheckbox" })
.Sortable(false)
.Width(60)
.ToolTip(GlobalResources.TooltipSelectToAssociateI temWithEvidence)
.Align(Alignment.Center)
.Listeners(l =>
{
l.CheckChange.Fn = "fnCheckboxChange";
l.AfterRender.Fn = "fnPostRenderElementSelectedCheckbox";
})
)

.SelectionModel(Html.X().RowSelectionModel().Mode( SelectionMode.Single))
.View(Html.X().GridView()
.Plugins(Html.X().GridDragDrop().EnableDrop(false) .DDGroup("gridDDGroup"))
)

.Features(
Html.X().Grouping()
.ID("UserCompElementsGrouping")
.GroupHeaderTplString("{name} ({rows.length} Element{[values.rows.length > 1 ? 's' : '']})")
.HideGroupedHeader(true)
.EnableGroupingMenu(false)
.StartCollapsed(true)
)

.BottomBar(bar => bar.Add(Html.X().PagingToolbar()
.Flat(true)
.DisplayInfo(true)
.DisplayMsg(GlobalResources.ToolbarDisplayElements )))
.View(Html.X().GridView()
.StripeRows(true)
.TrackOver(true))

)





As soon as I add ......



.SelectionModel(Html.X().RowSelectionModel().Mode( SelectionMode.Single))
.View(Html.X().GridView()
.Plugins(Html.X().GridDragDrop().EnableDrop(false) .DDGroup("gridDDGroup"))
)




..... I get an exception on page load.



Only one item can be added to this Items Collection.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: Ext.Net.ExcessItemsException: Only one item can be added to this Items Collection.

Source Error:

Line 103: if (Count > 0)
Line 104: {
Line 105: throw new ExcessItemsException(ExcessItemsMessage);
Line 106: }
Line 107: }

Source File: c:\Users\mckelvied\Projects\VS2012 Projects\Ext.Net SVN v2.2.1\Ext.Net\Utility\SingleItemCollection.cs Line: 105



Any thoughts?

Baidaly
Jul 19, 2013, 2:16 AM
Hello!

The problem is that you have two Views. One at the bottom and another one before Features. You should leave only one of them.