Jan 20, 2020, 10:14 AM
How to perform drag and drop of a subset of records from one grid to another while maintaining row selection
Hi Team,
Can you please help me and suggest me?
While records 0, 1, 3, 4, 5, 6 are selected in the left grid, how can I drag and drop records 1, 4, 8, 9 to the right grid without affecting the selection in the left grid?
We are already using the
Can you please help me and suggest me?
While records 0, 1, 3, 4, 5, 6 are selected in the left grid, how can I drag and drop records 1, 4, 8, 9 to the right grid without affecting the selection in the left grid?
We are already using the
<SelectionModel>
property to achieve selection in the left grid and do not want to change that.<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>();
for (int i = 0; i < 10; i++)
{
data.Add(new
{
Name = "Rec " + i,
Qty = i.ToString(),
Column2 = i.ToString()
});
}
this.Store1.DataSource = data;
this.Store1.DataBind();
RowSelectionModel sm = this.GridPanel1.GetSelectionModel() as RowSelectionModel;
for (int i = 0; i < 10; i++)
{
if (i != 2 && i != 7 && i != 8 && i != 9)
sm.SelectedRows.Add(new SelectedRow(i));
}
sm.UpdateSelection();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Drag and Drop from GridPanel to GridPanel - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var onLeftDeSelect = function (editor, e)
{
var GroupLeftQty = parseFloat(#{txtGroupLeftQty}.getValue()) - parseFloat(e.data.Qty);
GroupLeftQty = (parseFloat(GroupLeftQty).toFixed(2) <= 0.00) ? 0 : GroupLeftQty;
#{txtGroupLeftQty}.setValue(GroupLeftQty);
};
var onLeftSelect = function (editor, e)
{
var GroupLeftQty = parseFloat(#{txtGroupLeftQty}.getValue()) + parseFloat(e.data.Qty);
#{txtGroupLeftQty}.setValue(GroupLeftQty);
};
var onRightDeSelect = function (editor, e)
{
var GroupRightQty = parseFloat(#{txtGroupRightQty}.getValue()) - parseFloat(e.data.Qty);
GroupRightQty = (parseFloat(GroupRightQty).toFixed(2) <= 0.00) ? 0 : GroupRightQty;
#{txtGroupRightQty}.setValue(GroupRightQty);
};
var onRightSelect = function (editor, e)
{
var GroupRightQty = parseFloat(#{txtGroupRightQty}.getValue()) + parseFloat(e.data.Qty);
#{txtGroupRightQty}.setValue(GroupRightQty);
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Drag and Drop from GridPanel to GridPanel</h1>
<p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
<ext:Panel runat="server" Width="650" Height="300">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" Padding="5" />
</LayoutConfig>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server"
MultiSelect="true"
Flex="1"
Title="Left"
MarginSpec="0 2 0 0">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Qty" />
<ext:ModelField Name="Column2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
<ext:Column runat="server" Text="Qty" Width="60" DataIndex="Qty" />
<ext:Column runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true">
<Listeners>
<Deselect Fn="onLeftDeSelect" />
<Select Fn="onLeftSelect" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:GridDragDrop runat="server" DragGroup="firstGridDDGroup" DropGroup="secondGridDDGroup" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:GridPanel
ID="GridPanel2"
runat="server"
MultiSelect="true"
Title="Right"
Flex="1"
MarginSpec="0 0 0 3">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Qty" />
<ext:ModelField Name="Column2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Record Name" Width="160" DataIndex="Name" Flex="1" />
<ext:Column runat="server" Text="Qty" Width="60" DataIndex="Qty" />
<ext:Column runat="server" Text="Column 2" Width="60" DataIndex="Column2" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi" CheckOnly="true">
<Listeners>
<Deselect Fn="onRightDeSelect" />
<Select Fn="onRightSelect" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
<View>
<ext:GridView runat="server">
<Plugins>
<ext:GridDragDrop runat="server" DragGroup="secondGridDDGroup" DropGroup="firstGridDDGroup" />
</Plugins>
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill runat="server" />
<ext:Label ID="left" runat="server" Text="Left Qty" />
<ext:TextField ID="txtGroupLeftQty" runat="server" Width="175px" Text="0" ReadOnly="true" />
<ext:Label ID="right" runat="server" Text="Right Qty" />
<ext:TextField ID="txtGroupRightQty" runat="server" Width="175px" Text="0" ReadOnly="true" />
<ext:Button runat="server" Text="Reset both grids">
<Listeners>
<Click Handler="#{Store1}.loadData(#{Store1}.proxy.data); #{Store2}.removeAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</form>
</body>
</html>
Last edited by geoffrey.mcgill; Jan 20, 2020 at 11:51 PM.