Printable View
Hai everyone,
I have little problem with drag and drop. I want to use drag and drop plugin in grid but i want to drag from Cell on Grid 1 to other cell in Grid 2. I have check a demo page in drag n drop section and i still confused. I attach some image to describe my question.
Thanks for u'r help :)
Hi @redi,
Something like that?
Example
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
store = this.GridPanel2.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "1" },
new object[] { "1", "1" },
new object[] { "1", "1" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var on = function () {
};
</script>
<style>
.myСlass {
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:CellDragDrop runat="server" EnableDrop="false" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:GridPanel ID="GridPanel2" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:CellDragDrop runat="server" EnableDrag="false" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>
Awsome!!!!!!!
Thanks Daniil for the Example, i really thanksfull for that.
one question again :)
If i want to one column can't be dropped value what should i do ? and if some column can't be dragged ?
should i used this tag ?
like demo that i have from demo page, or can i have documentation about drag and drop plugins in grid ?Code:<ext:DropZone ID="DropZone1" runat="server" Target="{#(actOprGrid).view.el)">
<GetTargetFromEvent Fn="getTargetFromEvent" />
<OnNodeOver Fn="onNodeOver" />
<OnNodeEnter Fn="onNodeEnter" />
<OnNodeOut Fn="onNodeOut" />
<OnNodeDrop Fn="" />
</ext:DropZone>
Thanks for u'r support. :)
I recommend you to investigate the plugin's sources.
http://docs.sencha.com/extjs/4.2.1/s...x-CellDragDrop
You could override the onViewRender function as needed. It looks the best way to achieve your requirement.
Ok i will read it... :)
Thanks for your support Daniil.. :)
Hai Daniil,
I'm still confused here.. :p
i used your example to learn drag n drop concept. If i want to build a function to check if in gridview2 have a value then i can drop it, but if not have it can't dropped. How to do that ? I used Dragdrop Zone plugin like i post above, but isn't work.
This is my source from your example :
in that code i want to check if the javascript function has fire when i drag on grid1 and pass to grid 2. then if the function event fire then i want to build a function to check if that drop zone cell has value or not.Code:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragdropgrid.aspx.cs" Inherits="belajarExt.dragdropgrid" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }
};
store = this.GridPanel2.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "1" },
new object[] { "1", "1" },
new object[] { "1", "1" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
<script type="text/javascript">
var onNodeEnter = function (target, dd, e, dragData) {
delete this.dropOK;
if (!target) {
return;
}
alert(this.dropOK);
// var f = dragData.field;
// if (!f) {
// return;
// }
// var type = target.record.fields.get(target.fieldName).type;
// switch (type) {
// case Ext.data.Types.FLOAT:
// case Ext.data.Types.INT:
// if (!f.isXType("numberfield")) {
// return;
// }
// break;
// case Ext.data.Types.DATE:
// if (!f.isXType("datefield")) {
// return;
// }
// break;
// case Ext.data.Types.BOOL:
// if (!f.isXType("checkbox")) {
// return;
// }
// }
this.dropOK = true;
Ext.fly(target.node).addCls("x-drop-target-active");
};
var onNodeOver = function (target, dd, e, dragData) {
alert("here");
return this.dropOK ? this.dropAllowed : this.dropNotAllowed;
};
</script>
<style>
.myСlass {
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Test 1" DataIndex="test1" />
<ext:Column ID="Column2" runat="server" Text="Test 2" DataIndex="test2" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server">
<Plugins>
<ext:CellDragDrop ID="CellDragDrop1" runat="server" EnableDrop="false" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:GridPanel ID="GridPanel2" runat="server">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="test3" />
<ext:ModelField Name="test4" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column ID="Column3" runat="server" Text="Test 1" DataIndex="test3" />
<ext:Column ID="Column4" runat="server" Text="Test 2" DataIndex="test4" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView2" runat="server">
<Plugins>
<ext:CellDragDrop ID="CellDragDrop2" runat="server" EnableDrag="false" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:DropZone ID="DropZone1" runat="server" Target="{#(GridView2).view.el)">
<OnNodeOver Fn="onNodeOver" />
<OnNodeEnter Fn="onNodeEnter" />
<%--<OnNodeOut Fn="onNodeOut" />
<OnNodeDrop Fn="" />--%>
</ext:DropZone>
</form>
</body>
</html>
Thanks :)
I don't think you can use an <ext:DropZone> here.
Please follow this approach:
ExampleQuote:
Originally Posted by Daniil
Code:<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
Ext.ux.CellDragDrop.override({
onViewRender: function () {
/* the overridden code */
}
});
</script>
</head>
Hai Daniil,
I had used that script to my example, this is my code :
first i want to test function getDrag data, but i getting error when i try to drag cell to other cell. I was debug that code, and problem is in the return {} tag call. i attach the error from my code.Code:Ext.ux.CellDragDrop.override({
onViewRender: function (view) {
/* the overridden code */
var me = this,
scrollEl;
if (me.enableDrag) {
me.dragZone = new Ext.view.DragZone({
view: view,
ddGroup: me.dragGroup || me.ddGroup,
dragText: me.dragText,
containerScroll: me.containerScroll,
scrollEl: scrollEl,
getDragData: function (e) {
var view = this.view,
item = e.getTarget(view.getItemSelector()),
record = view.getRecord(item),
clickedEl = e.getTarget(view.getCellSelector()),
dragEl;
if (item) {
dragEl = document.createElement('div');
dragEl.className = 'x-form-text';
dragEl.appendChild(document.createTextNode(clickedEl.textContent || clickedEl.innerText));
return {
event: new Ext.EventObjectImpl(e),
ddel: dragEl,
item: e.target,
columnName: view.getGridColumns()[clickedEl.cellIndex].dataIndex,
record: record
};
}
//alert(clickedEl.innerText);
}
});
}
}
});
sorry if i have a lot question, because i'm new in ext.net and ext.js :)
Thanks.
The onInitDrag function is an essential part. You should not get rid of it.
Ah my fault, yes your right. I think its separate function :p
And now that alert can show :D. SS on attachment.
Thanks for your support Daniil. :)