Nov 07, 2012, 8:16 PM
[CLOSED] Drag and Drop from GridPanel to GridPanel performance issue
Hi,
I'm working on implementing a pattern allowing the user to drag and drop one or more items from one GridPanel to another. It's similar to the paradigm discussed in http://forums.ext.net/showthread.php...ogrammatically except that this time around I require a multi-column list view. MultiSelect doesn't provide that.
I started with the example at https://examples1.ext.net/#/DragDrop...Grid_to_Grid1/.
Data Stores have 7 String fields for both grids having 6 columns + 1 image column. The left Store data source fetches slightly over a thousand records, while the right one only a few dozens. Drag and drop works relatively fast from the right to the left. However, left to the right hangs if I grab hundreds of records. It works with a few rows but noticeably slow. I'm curious if performance optimization can be done for my code that does records addition/removal to the stores. It seems like the call to getSelectionModel().getSelections() is the bottleneck. Another point of concern is that Store listeners don't get suppressed for some reason. Please take a look at the code fragments below. I will try to provide a fulsome sample if you need more information.
I'm working on implementing a pattern allowing the user to drag and drop one or more items from one GridPanel to another. It's similar to the paradigm discussed in http://forums.ext.net/showthread.php...ogrammatically except that this time around I require a multi-column list view. MultiSelect doesn't provide that.
I started with the example at https://examples1.ext.net/#/DragDrop...Grid_to_Grid1/.
Data Stores have 7 String fields for both grids having 6 columns + 1 image column. The left Store data source fetches slightly over a thousand records, while the right one only a few dozens. Drag and drop works relatively fast from the right to the left. However, left to the right hangs if I grab hundreds of records. It works with a few rows but noticeably slow. I'm curious if performance optimization can be done for my code that does records addition/removal to the stores. It seems like the call to getSelectionModel().getSelections() is the bottleneck. Another point of concern is that Store listeners don't get suppressed for some reason. Please take a look at the code fragments below. I will try to provide a fulsome sample if you need more information.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
DataTable leftAddress = GetAddress(); // Returns over 1,000 records
DataTable rightAddress = GetAddress(); // Returns a few dozens of records
this.StoreLeft.DataSource = leftAddress;
this.StoreRight.DataSource = rightAddress;
this.StoreLeft.DataBind();
this.StoreRight.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Overview of MultiSelect - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript" language="javascript">
var recordIconRenderer = function (value, metadata, record) {
var iconSrc = Ext.net.ResourceMgr.getIconUrl("Note");
return String.format("<img src='{0}' />", iconSrc);
};
var notifyDropToLeft = function (ddSource, e, data) {
var records=GridPanelRight.getSelectionModel().getSelections();
ddSource.grid.store.suspendEvents(true);
#{StoreLeft}.suspendEvents(true);
ddSource.grid.store.remove(records);
#{StoreLeft}.add(records);
ddSource.grid.store.resumeEvents();
#{StoreLeft}.resumeEvents();
return true;
};
var notifyDropToRight = function (ddSource, e, data) {
var records=GridPanelLeft.getSelectionModel().getSelections();
ddSource.grid.store.suspendEvents(true);
#{StoreRight}.suspendEvents(true);
ddSource.grid.store.remove(records);
#{StoreRight}.add(records);
ddSource.grid.store.resumeEvents();
#{StoreRight}.resumeEvents();
return true;
};
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="StoreLeft" runat="server">
<Reader>
<ext:JsonReader IDProperty="AddressID">
<Fields>
<ext:RecordField Name="AddressID" SortDir="ASC" />
<ext:RecordField Name="Line1" />
<ext:RecordField Name="Line2" />
<ext:RecordField Name="City" />
<ext:RecordField Name="ZIP" />
<ext:RecordField Name="Province" />
<ext:RecordField Name="Country" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Remove Handler="alert('Left');" />
</Listeners>
</ext:Store>
<ext:Store ID="StoreRight" runat="server">
<Reader>
<ext:JsonReader IDProperty="AddressID">
<Fields>
<ext:RecordField Name="AddressID" SortDir="ASC" />
<ext:RecordField Name="Line1" />
<ext:RecordField Name="Line2" />
<ext:RecordField Name="City" />
<ext:RecordField Name="ZIP" />
<ext:RecordField Name="Province" />
<ext:RecordField Name="Country" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Remove Handler="alert('Right');" />
</Listeners>
</ext:Store>
<ext:GridPanel ID="GridPanelLeft" runat="server" EnableDragDrop="true" DDGroup="GridPanelRightDDGroup"
Width="560" Height="250" StoreID="StoreLeft" Frame="false" Border="true" StripeRows="true"
TrackMouseOver="true" ActiveIndex="0"
SelectionMemory="Enabled" Split="true" AutoScroll="true">
<ColumnModel runat="server" ID="ColumnModel1">
<Columns>
<ext:Column ColumnID="IconColumn" MenuDisabled="true" Sortable="false" Resizable="false"
Hideable="false" Width="26">
<Renderer Fn="recordIconRenderer" />
</ext:Column>
<ext:Column ColumnID="AddressID" Header="AddressID" DataIndex="AddressID" Hidden="true"/>
<ext:Column ColumnID="Line1" Header="Line1" DataIndex="Line1"
Width="140" />
<ext:Column ColumnID="Line2" Header="Line2" DataIndex="Line2"
Width="130" />
<ext:Column ColumnID="City" Header="City" DataIndex="City" Width="80" />
<ext:Column ColumnID="ZIP" Header="ZIP" DataIndex="ZIP" Width="80">
</ext:Column>
<ext:Column ColumnID="Province" Header="Province" DataIndex="Province"
Width="80" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="false" ID="RowSelectionModel1">
</ext:RowSelectionModel>
</SelectionModel>
<LoadMask ShowMask="true" />
</ext:GridPanel>
<ext:GridPanel ID="GridPanelRight" runat="server" EnableDragDrop="true" DDGroup="GridPanelLeftDDGroup"
Width="560" Height="250" StoreID="StoreRight" Frame="false" Border="true" StripeRows="true"
TrackMouseOver="true" ActiveIndex="0"
SelectionMemory="Enabled" Split="true" AutoScroll="true">
<ColumnModel runat="server" ID="ColumnModel1">
<Columns>
<ext:Column ColumnID="IconColumn" MenuDisabled="true" Sortable="false" Resizable="false"
Hideable="false" Width="26">
<Renderer Fn="recordIconRenderer" />
</ext:Column>
<ext:Column ColumnID="AddressID" Header="AddressID" DataIndex="AddressID" Hidden="true"/>
<ext:Column ColumnID="Line1" Header="Line1" DataIndex="Line1"
Width="140" />
<ext:Column ColumnID="Line2" Header="Line2" DataIndex="Line2"
Width="130" />
<ext:Column ColumnID="City" Header="City" DataIndex="City" Width="80" />
<ext:Column ColumnID="ZIP" Header="ZIP" DataIndex="ZIP" Width="80">
</ext:Column>
<ext:Column ColumnID="Province" Header="Province" DataIndex="Province"
Width="80" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="false" ID="RowSelectionModel1"></ext:RowSelectionModel>
</SelectionModel>
<LoadMask ShowMask="true" />
</ext:GridPanel>
<ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanelLeft.view.scroller.dom}"
Group="GridPanelLeftDDGroup">
<NotifyDrop Fn="notifyDropToLeft" />
</ext:DropTarget>
<ext:DropTarget ID="DropTarget2" runat="server" Target="={GridPanelRight.view.scroller.dom}"
Group="GridPanelRightDDGroup">
<NotifyDrop Fn="notifyDropToRight" />
</ext:DropTarget>
</form>
</body>
</html>
Last edited by Daniil; Nov 09, 2012 at 3:32 PM.
Reason: [CLOSED]
Originally Posted by Daniil
