Aug 12, 2014, 9:47 AM
[CLOSED] Drag to Select gridpanel rows Razor
with ref https://examples2.ext.net/#/DragDrop...kbox_Selector/ example I try to do this with Razor but not able to configure DragTracker with gridpanel properly please help.
VIEW
VIEW
@{
var X = Html.X();
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
var startTrack = function () {
this.checkboxes = [];
var cb;
Ext.select(".x-form-item", false).each(function (checkEl) {
cb = Ext.getCmp(checkEl.dom.id);
cb.setValue(false);
this.checkboxes.push(cb);
}, this);
};
dragTrack = function () {
var cb, sel;
for (var i = 0, l = this.checkboxes.length; i < l; i++) {
cb = this.checkboxes[i];
sel = this.dragRegion.intersect(cb.el.getRegion());
if (cb.checked && !sel) {
cb.setValue(false);
} else if (!cb.checked && sel) {
cb.setValue(true);
}
}
};
var endTrack = function () {
delete this.checkboxes;
};
</script>
<style>
.cb-cell td{
padding-right : 10px;
padding-bottom : 5px;
}
.black-view-selector {
position : absolute;
left : 0;
top : 0;
width : 0;
background : black;
border : 1px dotted gray;
opacity : .3;
-moz-opacity : .3;
filter : alpha(opacity=30);
zoom : 1;
}
</style>
</head>
<body>
<div>
@X.ResourceManager()
@(
Html.X().GridPanel()
.ID("GridPanel1")
.Title("Plants")
.Frame(true)
.Height(300)
.Store(
Html.X().Store()
.DataSource( ViewBag.loadgrid)
.PageSize(5)
.Model
(
X.Model()
.Fields
(
X.ModelField().Name("Common").Type(ModelFieldType.String)
)
)
)
.ColumnModel(
Html.X().Column().DataIndex("Common").Text("Common Name").Flex(1)
)
.SelectionModel(
X.CheckboxSelectionModel()
.Mode(SelectionMode.Multi)
)
.Plugins
(
Html.X().FilterHeader()
)
.BottomBar(
Html.X().PagingToolbar()
.DisplayInfo(true)
.DisplayMsg("Displaying plants {0} - {1} of {2}")
.EmptyMsg("No plants to display")
)
)
@(Html.X().DragTracker()
.ID("DragTracker1")
.ConstrainTo("={#{GridPanel1}.body}")
.Target("={#{GridPanel1}.body}")
.ProxyCls("black-view-selector")
.Listeners(l=>
{
l.DragStart.Fn = "startTrack";
l.Drag.Fn = "dragTrack";
l.DragEnd.Fn = "endTrack";
})
)
</div>
</body>
</html>public ActionResult Index()
{
ViewBag.loadgrid = dragtrack.Plant.GetPlants();
return View();
}
public ActionResult Read(StoreRequestParameters parameters, string filterheader)
{
return this.Store(dragtrack.Plant.GetPlants());
}
}
}
public class dragtrack
{
public class Plant
{
public string Common
{
get;
set;
}
public static List<Plant> GetPlants()
{
return new List<Plant> {
new Plant
{
Common = "Bloodroot",
},
new Plant
{
Common = "Columbine",
},
new Plant
{
Common = "Marsh Marigold",
},
new Plant
{
Common = "Cowslip",
},
new Plant
{
Common = "Dutchman's-Breeches",
},
};
}
}
}
Last edited by Daniil; Aug 19, 2014 at 5:22 AM.
Reason: [CLOSED]
