Mar 19, 2013, 11:19 AM
[CLOSED] Grid row startDrag on time consuming select handler
Hello,
I am facing the following issue:
If a grid's row select handler performs a time consuming task and GridDragDrop plugin is used, drag text flyes through after row select handler returns. It looks like you started drag and canceled it by relasing the mouse. There must be something initiating startDrag after selection over a timeout value. How can I prevent that un-intentional startDrag?
Sample code is below. Feel free to increase number of store items in for loops if you can not reproduce the issue.
Note: Tested and confirmed for IE9 and Chrome.
I am facing the following issue:
If a grid's row select handler performs a time consuming task and GridDragDrop plugin is used, drag text flyes through after row select handler returns. It looks like you started drag and canceled it by relasing the mouse. There must be something initiating startDrag after selection over a timeout value. How can I prevent that un-intentional startDrag?
Sample code is below. Feel free to increase number of store items in for loops if you can not reproduce the issue.
Note: Tested and confirmed for IE9 and Chrome.
<%@ 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)
{
List<object> MyList = new List<object>();
for (short i = 0; i < 100; i++)
{
MyList.Add(new
{
ID = i,
Name = "Item " + i
});
}
this.MyStore.DataSource = MyList;
this.MyStore.DataBind();
List<object> OtherList = new List<object>();
for (short i = 0; i < 5000; i++)
{
OtherList.Add(new
{
ID = i,
Name = "Item " + i
});
}
this.OtherStore.DataSource = OtherList;
this.OtherStore.DataBind();
}
}
</script>
<script type="text/javascript">
var getDragDropText = function () {
var buf = [];
buf.push("<ul>");
Ext.each(this.view.panel.getSelectionModel().getSelection(), function (record) {
buf.push("<li>ID: " + record.data.ID + "</li>");
buf.push("<li>Name: " + record.data.Name + "</li>");
});
buf.push("</ul>");
return buf.join("");
};
function MyHandler(item, record, index) {
var filterFn;
App.OtherStore.clearFilter();
filterFn = function (MyItem) {
return MyItem.data.ID == record.data.ID;
};
App.OtherStore.filterBy(filterFn);
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Store ID="MyStore" runat="server">
<Model>
<ext:Model ID="MyStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Store ID="OtherStore" runat="server">
<Model>
<ext:Model ID="OtherStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="MyGrid" runat="server" StoreID="MyStore" MaxHeight="300" Collapsible="false" Flex="1" Title="My Grid" SelectionMemory="false">
<ColumnModel runat="server" ID="MyColumnModel">
<Columns>
<ext:Column ID="ID" runat="server" Text="ID" DataIndex="ID" Align="Left" Flex="1">
</ext:Column>
<ext:Column ID="Name" runat="server" Text="Name" DataIndex="Name" Align="Left" Flex="1">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:GridDragDrop runat="server" DragGroup="RankedDDGroup" DropGroup="RankedDDGroup"></ext:GridDragDrop>
</Plugins>
<Listeners>
<AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
<Listeners>
<Select Handler="MyHandler(item, record, index)"></Select>
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
<ext:GridPanel ID="OtherGrid" runat="server" StoreID="OtherStore" MaxHeight="300" Collapsible="false" Flex="1" Title="Other Grid" SelectionMemory="false">
<ColumnModel runat="server" ID="ColumnModel1">
<Columns>
<ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Align="Left" Flex="1">
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Name" DataIndex="Name" Align="Left" Flex="1">
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:GridDragDrop ID="GridDragDrop1" runat="server" DragGroup="UnrankedDDGroup" DropGroup="RankedDDGroup"></ext:GridDragDrop>
</Plugins>
<Listeners>
<AfterRender Handler="this.plugins[0].dragZone.getDragText = getDragDropText;" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" Mode="Single">
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Mar 28, 2013 at 4:19 AM.
Reason: [CLOSED]
Originally Posted by Daniil
