Feb 26, 2016, 12:55 PM
[CLOSED] Help with Drag & Drop in Partial View
Hi
I'm trying to implement Drag & Drop in a Partial View. I've managed to get Drag & Drop working in a 'normal' MVC environment but I'm having difficulty with Partial Views.
This is a simplified example.
My Controller:
Thanks
Jeff
I'm trying to implement Drag & Drop in a Partial View. I've managed to get Drag & Drop working in a 'normal' MVC environment but I'm having difficulty with Partial Views.
This is a simplified example.
My Controller:
using Ext.Net;
using Ext.Net.MVC;
using System.Collections.Generic;
using System.Web.Mvc;
namespace ExtSandpit.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetUsers()
{
List<User> lstUsers = new List<User>();
lstUsers.Add(new User(1000, "Jeff"));
lstUsers.Add(new User(1001, "James"));
return this.Store(lstUsers);
}
public ActionResult GetProjectUsers()
{
List<User> lstUsers = new List<User>();
lstUsers.Add(new User(1000, "Vicky"));
lstUsers.Add(new User(1001, "Sheila"));
return this.Store(lstUsers);
}
public Ext.Net.MVC.PartialViewResult RenderPartialView(string viewName, string containerId)
{
Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
r.ViewName = viewName;
return r;
}
}
public class User
{
public User()
{
}
public User(int id, string name)
{
ID = id;
Name = name;
}
public int ID { get; set; }
public string Name { get; set; }
public string Test { get; set; }
}
}<!DOCTYPE html>
<html>
<head>
<title></title>
@{
Layout = null;
}
<script>
var loadTestView = function (viewName) {
App.PnlCenter.clearContent();
Ext.net.DirectMethod.request({
url: '@(Url.Action("RenderPartialView"))',
params: {
containerid: "PnlCenter",
viewName: viewName
},
})
};
</script>
<link rel='stylesheet' type='text/css' href='~/Content/Site.css' media='screen'>
</head>
<body>
@Html.X().ResourceManager()
@(Html.X().Viewport().AutoScroll(true).Layout(LayoutType.Border).Items(
Html.X().Panel().Region(Region.North).Layout(LayoutType.HBox).Items(
),
Html.X().Panel().Region(Region.West).Width(181).Items(
Html.X().Panel().ID("MenuPanel").Layout(LayoutType.VBox).Items(
Html.X().Button().Text("Test View 1").ComponentCls("menu-button").CtCls("menu-button-small").Listeners(lst => { lst.Click.Handler = "loadTestView('DragDropTest')"; })
)
),
Html.X().Panel().Region(Region.West).ID("PnlCenter").Width(800).Layout(LayoutType.Fit)
.Loader(
Html.X().ComponentLoader().AutoLoad(false).Mode(LoadMode.Script)
),
Html.X().Panel().Region(Region.Center).Layout(LayoutType.Fit)
))
</body>
</html><script>
var notifyEnter = function (ddSource, e, data) {
App.ProjectUsers.body.stopAnimation();
App.ProjectUsers.body.highlight();
};
var notifyDrop = function (ddSource, e, data) {
var selectedRecord = ddSource.dragData.records[0];
App.ProjectUsers.store.insert(0, selectedRecord);
App.ProjectUsers.store.update();
return true;
};
</script>
@(Html.X().Panel().Layout(LayoutType.HBox).Width(800).Items(
Html.X().GridPanel().Title("Users").ID("Users").Width(200).Height(1000)
.Store(Html.X().Store().ID("UsersStore")
.Model(Html.X().Model().IDProperty("ID")
.Fields(
new ModelField("ID", ModelFieldType.Int),
new ModelField("Name")
)
)
.Proxy(Html.X().AjaxProxy().Url(Url.Action("GetUsers")).Reader(Html.X().JsonReader().RootProperty("data")))
)
.ColumnModel(
Html.X().Column().Text("Username").DataIndex("Name").Flex(10)
)
.View(Html.X().GridView()
.Plugins(Html.X().GridDragDrop().EnableDrop(false).DDGroup("gridDDGroup"))
)
.SelectionModel(Html.X().RowSelectionModel().Mode(SelectionMode.Single)),
Html.X().GridPanel().ID("ProjectUsers").Title("Project Users").ID("ProjectUsers").MarginSpec("0 0 0 20").Width(300).Height(1000)
.Store(Html.X().Store().ID("ProjectUsersStore")
.Model(Html.X().Model().IDProperty("ID")
.Fields(
new ModelField("Name")
)
)
.Proxy(Html.X().AjaxProxy().Url(Url.Action("GetProjectUsers")).Reader(Html.X().JsonReader().RootProperty("data")))
)
.ColumnModel(
Html.X().Column().Text("Username").DataIndex("Name").Flex(10)
)
.SelectionModel(Html.X().RowSelectionModel().Mode(SelectionMode.Single))
)
)
@( Html.X().DropTarget()
.Target("={#{ProjectUsers}.body}")
.Group("gridDDGroup")
.NotifyEnter(h => h.Fn = "notifyEnter")
.NotifyDrop(h => h.Fn = "notifyDrop")
)Thanks
Jeff
Last edited by fabricio.murta; Mar 22, 2016 at 11:23 PM.
Reason: no user feedback for 7+ days
