Jul 21, 2014, 7:51 PM
[CLOSED] GridDragDrop with ContainerScroll
I have a problem trying to get drag and drop scrolling working in our ext.net web application.
Desired behavior: When dragging a gridpanel item around the grid panel, dragging to the top and the bottom should scroll through the items up and down respectively.
Problematic behavior: Dragging an item to the bottom scrolls the panel items down as expected however dragging an item to the top also scrolls the items down.
The panel should scroll up when dragging to the top instead of scrolling down.
ContainerScroll (on line 136) is the attribute I'm wondering about. Without it drag and drop scrolling doesn't work but with it drag and drop scrolling is acting strangely.
I created a test page really quickly to reproduce the issue.
Desired behavior: When dragging a gridpanel item around the grid panel, dragging to the top and the bottom should scroll through the items up and down respectively.
Problematic behavior: Dragging an item to the bottom scrolls the panel items down as expected however dragging an item to the top also scrolls the items down.
The panel should scroll up when dragging to the top instead of scrolling down.
ContainerScroll (on line 136) is the attribute I'm wondering about. Without it drag and drop scrolling doesn't work but with it drag and drop scrolling is acting strangely.
I created a test page really quickly to reproduce the issue.
<%@ 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)
{
this.BindData();
}
}
protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
{
this.BindData();
}
private void BindData()
{
Store store = this.GridPanel1.GetStore();
store.DataSource = this.Data;
store.DataBind();
}
private object[] Data
{
get
{
DateTime now = DateTime.Now;
return new object[]
{
new object[] { "a" },
new object[] { "b" },
new object[] { "c" },
new object[] { "d" },
new object[] { "e" },
new object[] { "f" },
new object[] { "g" },
new object[] { "h" },
new object[] { "i" },
new object[] { "j" },
new object[] { "k" },
new object[] { "l" },
new object[] { "m" },
new object[] { "n" },
new object[] { "o" },
new object[] { "p" },
new object[] { "q" },
new object[] { "r" },
new object[] { "s" },
new object[] { "t" },
new object[] { "u" },
new object[] { "v" },
new object[] { "w" },
new object[] { "x" },
new object[] { "y" },
new object[] { "z" },
new object[] { "aa" },
new object[] { "bb" },
new object[] { "cc" },
new object[] { "dd" },
new object[] { "ee" },
new object[] { "ff" },
new object[] { "gg" },
new object[] { "hh" },
new object[] { "ii" },
new object[] { "jj" },
new object[] { "kk" },
new object[] { "ll" },
new object[] { "mm" },
new object[] { "nn" },
new object[] { "oo" },
new object[] { "pp" },
new object[] { "qq" },
new object[] { "rr" },
new object[] { "ss" },
new object[] { "tt" },
new object[] { "uu" },
new object[] { "vv" },
new object[] { "ww" },
new object[] { "xx" },
new object[] { "yy" },
new object[] { "zz" }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Test page for dnd scrolling issue</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
Ext.dd.ScrollManager.vthresh = 50;
</script>
</head>
<body style="margin: 5px;">
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="700"
Height="500"
AutoScroll="true">
<Store>
<ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="row" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
<ext:Column ID="Column1" runat="server" Text="Row" DataIndex="row" Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView ID="GridView1" runat="server" StripeRows="true">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop1" runat="server" DragText="{0} selected group{1}" DDGroup="ConfigDD" ContainerScroll="true" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Aug 05, 2014 at 12:54 PM.
Reason: [CLOSED]
