PDA

View Full Version : [CLOSED] Grid row startDrag on time consuming select handler



bayoglu
Mar 19, 2013, 11:19 AM
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.



<%@ 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().getSe lection(), function (record) {
buf.push("<li>ID:&nbsp" + record.data.ID + "</li>");
buf.push("<li>Name:&nbsp" + 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>


Thanks.

Daniil
Mar 19, 2013, 11:33 AM
Hi @bayoglu,

An interesting issue.

I would try:

<Select Handler="MyHandler(item, record, index)" Delay="1" />

It should allow the drag&drop logic to be executed before the Select event.

Does it help?

bayoglu
Mar 19, 2013, 11:49 AM
Hello @Daniil,

Thanks for quick response. I tried up to Delay="5" but I still see flying drag text.
In the original scenario, I do not have thousands of rows, it is max 350.

Daniil
Mar 19, 2013, 1:17 PM
For me Delay="1" helps to eliminate the issue in Chrome. But, yes, the issue is still reproducible in IE9.

Please try to increase the Delay.

Delay="100"

bayoglu
Mar 19, 2013, 1:31 PM
For me Delay="1" helps to eliminate the issue in Chrome. But, yes, the issue is still reproducible in IE9.

Please try to increase the Delay.

Delay="100"

Even with Delay="100" I face the issue in IE9. In fact, I am not moving the mouse out, just clicking. Why does it start drag anyway? If it waited for mouse move/out for starting drag, I gues issue would not happen.

Daniil
Mar 19, 2013, 3:30 PM
I agree it looks buggy. I reported to Sencha.
http://www.sencha.com/forum/showthread.php?259199

So, we can continue to find a workaround for now. Are you trying Delay="100" for the posted sample or another one (maybe, your real page)?

bayoglu
Mar 19, 2013, 4:58 PM
Hello @Daniil,

You are right, I tried it with the original code. Let me share a detail, it was happening @each row select initially. Setting Delay="100" it has almost been solved but issue appears approx. once in 20/30 row select. Better than flying drag texts all around (; What affect does Delay="100" has on the application exactly? Does it cause slowing things other than loosing 100ms in user interface?

Thanks.

Daniil
Mar 20, 2013, 5:33 AM
There is some discussion in the Sencha's thread, please read.


What affect does Delay="100" has on the application exactly? Does it cause slowing things other than loosing 100ms in user interface?

Well, it means that the Select listener will be executed later for the specified delay.

Daniil
Mar 22, 2013, 12:30 PM
There is some discussion in the Sencha's thread, please read.

Has any suggestion helped you?