PDA

View Full Version : [CLOSED] Drag to Select gridpanel rows Razor



matrixwebtech
Aug 12, 2014, 9:47 AM
with ref http://examples2.ext.net/#/DragDrop/Advanced/Checkbox_Selector/ example I try to do this with Razor but not able to configure DragTracker with gridpanel properly please help.

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>

CONTROLLER



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",


},


};
}
}
}

Daniil
Aug 12, 2014, 2:18 PM
Hi @matrixwebtech,

At least, there is a problem here.

for (var i = 0, l = this.checkboxes.length; i &lt; l; i++) {

Please replace "&lt;" with "<".

More important that a CheckboxSelectionModel Column doesn't use real checkboxes. There are just divs with a background-image. So, you need to redo the JavaScript part.

Generally speaking, it might be quite a challenging task.

I would recommend you to read this thread. It looks there was a similar request.
http://forums.ext.net/showthread.php?23223

matrixwebtech
Aug 17, 2014, 7:22 PM
Hi dannil,from http://forums.ext.net/showthread.php?22673&p=99139&viewfull=1#post99139 I copy


dragTrack = function () {
var tracker = this,
grid = App.GridPanel1,
view = grid.getView(),
row,
sel;

grid.getStore().each(function (record, i) {
row = Ext.fly(view.getNode(i));
sel = tracker.dragRegion.intersect(row.getRegion());
if (sel) {
grid.getSelectionModel().select(record, true, true);
}
else {
grid.getSelectionModel().deselect(record, true);
}
});
};
and add with my code.and good news is selection of rows working ,but unfortunately there are some thing which not working.

Problems

1: Selection lost if page changed.(I am on 1st page and select 2 items then go to 2nd page and return back to 1st page ,previously selected 2item's selection is lost.)

2: I have a button after the grid panel .with DragTrack i select some rows and click on save but I am not getting selected rows value from code behind.
but if I select by click in that case I get the values.

I am trying to post a simplified test case ,please check.

View


@{
var X = Html.X();
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
dragTrack = function () {
var tracker = this,
grid = App.GridPanel1,
view = grid.getView(),
row,
sel;

grid.getStore().each(function (record, i) {
row = Ext.fly(view.getNode(i));
sel = tracker.dragRegion.intersect(row.getRegion());
if (sel) {
grid.getSelectionModel().select(record, true, true);

}
else {
grid.getSelectionModel().deselect(record, true);
}
});
};

</script>


</head>
<body>
<div>
@X.ResourceManager()

@(
X.FormPanel().Items
(
Html.X().GridPanel()
.ID("GridPanel1")
.Title("Plants")
.Frame(true)
.Height(300)

.Store(
Html.X().Store()
.DataSource(ViewBag.loadgrid)

.PageSize(2)
.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)

)

.BottomBar(
Html.X().PagingToolbar()
.HideRefresh(true)
)
)
)

@(
X.Button()
.Text("Save")
.ID("btnSave")


.DirectEvents(de =>
{
de.Click.FormID = "f";
de.Click.Action = "save";
de.Click.ExtraParams.Add(new Parameter
{
Name = "values",
Value = "App.GridPanel1.getSelectionSubmit().getSelectionMo delField().getValue()",
Mode = ParameterMode.Raw
});

})
)

@(Html.X().DragTracker()
.ID("DragTracker1")
.ConstrainTo("={#{GridPanel1}.body}")
.Target("={#{GridPanel1}.body}")
.Listeners(l=>
{

l.Drag.Fn = "dragTrack";

})

)
</div>
</body>
</html>


Controller and Sample Data


public ActionResult Index()
{
ViewBag.loadgrid = dragtrack.Plant.GetPlants();
return View();
}

public ActionResult Read(StoreRequestParameters parameters, string filterheader)
{
return this.Store(dragtrack.Plant.GetPlants());
}

public void save(string values)
{

}

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",


},


};
}
}
}

Daniil
Aug 18, 2014, 2:09 PM
I would try

grid.getSelectionModel().select(record, true);
instead of

grid.getSelectionModel().select(record, true, true);
and

grid.getSelectionModel().deselect(record);
instead of

grid.getSelectionModel().deselect(record, true);

Also you might need to set some IDProperty for the Model to get working maintaining of selection across pages.

matrixwebtech
Aug 18, 2014, 3:32 PM
Hi daniil.I try this and also set ID to model,but selection lost after page change.


dragTrack = function () {
var tracker = this,
grid = App.GridPanel1,
view = grid.getView(),
row,
sel;

grid.getStore().each(function (record, i) {
row = Ext.fly(view.getNode(i));
sel = tracker.dragRegion.intersect(row.getRegion());
if (sel) {

grid.getSelectionModel().select(record, true);

}
else {

grid.getSelectionModel().deselect(record);
}
});
};

Daniil
Aug 18, 2014, 3:40 PM
also set ID to model,

IDProperty, not ID.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Model-cfg-idProperty

matrixwebtech
Aug 18, 2014, 3:50 PM
Sorry daniil,my mistake ,I rectify my code and post
here working example of Drag select gridrows.may be it will help someone.

VIEW


@{
var X = Html.X();
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script>
dragTrack = function () {
var tracker = this,
grid = App.GridPanel1,
view = grid.getView(),
row,
sel;

grid.getStore().each(function (record, i) {
row = Ext.fly(view.getNode(i));
sel = tracker.dragRegion.intersect(row.getRegion());
if (sel) {

grid.getSelectionModel().select(record, true);

}
else {

grid.getSelectionModel().deselect(record);
}
});
};

</script>


</head>
<body>
<div>
@X.ResourceManager()

@(
X.FormPanel().Items
(
Html.X().GridPanel()
.ID("GridPanel1")
.Title("Plants")
.Frame(true)
.Height(300)

.Store(
Html.X().Store()
.DataSource(ViewBag.loadgrid)

.PageSize(2)
.Model
(
X.Model()
.ID("mid")
.IDProperty("Common")
.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()
.HideRefresh(true)

)
)
)

@(
X.Button()
.Text("Save")
.ID("btnSave")


.DirectEvents(de =>
{
de.Click.FormID = "f";
de.Click.Action = "save";
de.Click.ExtraParams.Add(new Parameter
{
Name = "values",
Value = "App.GridPanel1.getSelectionSubmit().getSelectionMo delField().getValue()",
Mode = ParameterMode.Raw
});

})
)

@(Html.X().DragTracker()
.ID("DragTracker1")
.ConstrainTo("={#{GridPanel1}.body}")
.Target("={#{GridPanel1}.body}")

.Listeners(l =>
{

l.Drag.Fn = "dragTrack";

})

)
</div>
</body>
</html>


CONTROLLER AND SAMPLE DATA


public ActionResult Index()
{
ViewBag.loadgrid = dragtrack.Plant.GetPlants();
return View();
}

public ActionResult Read(StoreRequestParameters parameters, string filterheader)
{
return this.Store(dragtrack.Plant.GetPlants());
}

public void save(string values)
{

}

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",


},


};
}
}
}