We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid Drag and Drop

Thread ID:	Created:	Updated:	Platform:	Replies:
151080	Jan 30,2020 11:12 AM UTC	Feb 3,2020 01:44 PM UTC	ASP.NET Web Forms	1

Subscribe to this post

Tags: Grid

Peter

Asked On January 30, 2020 11:12 AM UTC

Dear,

I use ASP.NET Web Forms with vb.net code.

First question:

I have a grid dgInventory bound to a JSON datasource. Customer can select items from the inventory grid en drag them to the dgOrderItems grid. I've enabled the DropTargetID on both grids, but dropping on the dgOrderItems grid is not working, the records are not added to the grid.

Second question:

Is it possible to make a custom ContextMenu to move the selected items from the dgInventory to the dgOrderItems grid?

Peter

ASPX page

<ej:Grid ID="dgInventory" runat="server" AllowSorting="True" AllowRowDragAndDrop="true"

Locale="nl-BE" MinWidth="0" AllowSearching="True" EnableToolbarItems="True" AllowResizeToFit="True" AllowResizing="true" AllowPaging="True" GridLines="Horizontal" AllowFiltering="true" AllowGrouping="True" Selectiontype="Multiple" ShowColumnChooser="True">

<RowDropSettings DropTargetID="dgOrderItems" />

<Columns>

<ej:Column Field="StockId" IsIdentity="True" IsPrimaryKey="True" Visible="False"></ej:Column>

<ej:Column Field="ProductCode" HeaderText="Code"></ej:Column>

<ej:Column Field="ProductName" HeaderText="Name"></ej:Column>

<ej:Column Field="DateIn" HeaderText="Date In" DataType="date" Format="{0:dd/MM/yyyy}"></ej:Column>

<ej:Column Field="BaseUnitQuantity" HeaderText="#"></ej:Column>

<ej:Column Field="BaseUnitDesc" HeaderText="Base Unit"></ej:Column>

<ej:Column Field="StorageUnitQuantity" HeaderText="#"></ej:Column>

<ej:Column Field="StorageUnitDesc" HeaderText="Storage Unit"></ej:Column>

<ej:Column Field="TrackingNumber" HeaderText="Tracking Nr"></ej:Column>

<ej:Column Field="InventoryNumber" HeaderText="Inventory Nr"></ej:Column>

<ej:Column Field="ItemNumber" HeaderText="Item Nr"></ej:Column>

<ej:Column Field="Lot" HeaderText="Lot Nr"></ej:Column>

<ej:Column Field="Status" HeaderText="Status"></ej:Column>

</Columns>

<FilterSettings FilterType="Excel">

<FilteredColumn>

<ej:FilteredColumn Field="Status" Value="Available" Operator="Equals" />

</FilteredColumn>

</FilterSettings>

<ToolbarSettings ShowToolbar="True" ToolbarItems="search,printGrid,excelExport,pdfExport">

</ToolbarSettings>

<PageSettings PageSize="5" Locale="nl-BE" />

<GroupSettings GroupedColumns="ProductCode" ShowDropArea="false" ShowUngroupButton="true" />

<SortedColumns>

<ej:SortedColumn Field="ProductCode" Direction="Ascending" />

<ej:SortedColumn Field="InventoryNumber" Direction="Descending" />

</SortedColumns>

<SummaryRows>

<ej:SummaryRow Title="Sum">

<SummaryColumn>

<ej:SummaryColumn SummaryType="Sum" Format="{0:n0}" DisplayColumn="BaseUnitQuantity" DataMember="BaseUnitQuantity" Prefix="# " />

<ej:SummaryColumn SummaryType="Sum" Format="{0:n0}" DisplayColumn="StorageUnitQuantity" DataMember="StorageUnitQuantity" Prefix="# " />

</SummaryColumn>

</ej:SummaryRow>

</SummaryRows>

</ej:Grid>

<h2>2. Drop Here</h2>

<ej:Grid ID="dgOrderItems" runat="server" AllowRowDragAndDrop="true">

<RowDropSettings DropTargetID="dgInventory" />

<Columns>

<ej:Column Field="StockId" IsIdentity="True" IsPrimaryKey="True" Visible="False"></ej:Column>

<ej:Column Field="ProductCode" HeaderText="Code"></ej:Column>

<ej:Column Field="ProductName" HeaderText="Name"></ej:Column>

<ej:Column Field="DateIn" HeaderText="Date In" DataType="date" Format="{0:dd/MM/yyyy}"></ej:Column>

<ej:Column Field="BaseUnitQuantity" HeaderText="#"></ej:Column>

<ej:Column Field="BaseUnitDesc" HeaderText="Base Unit"></ej:Column>

<ej:Column Field="StorageUnitQuantity" HeaderText="#"></ej:Column>

<ej:Column Field="StorageUnitDesc" HeaderText="Storage Unit"></ej:Column>

<ej:Column Field="TrackingNumber" HeaderText="Tracking Nr"></ej:Column>

<ej:Column Field="InventoryNumber" HeaderText="Inventory Nr"></ej:Column>

<ej:Column Field="ItemNumber" HeaderText="Item Nr"></ej:Column>

<ej:Column Field="Lot" HeaderText="Lot Nr"></ej:Column>

<ej:Column Field="Status" HeaderText="Status"></ej:Column>

</Columns>

</ej:Grid>

Code Behind:

Dim lstInventory As List(Of iTOS.Inventory) = GetJSON(Of List(Of iTOS.Inventory))("https://xxx/api/InventoryStock")

dgInventory.DataSource = lstInventory

dgInventory.DataBind()

Dim lstOrderItems As New List(Of iTOS.Inventory)

dgOrderItems.DataSource = lstOrderItems

dgOrderItems.DataBind()

Reply | Reply with quote

Gowri Loganathan [Syncfusion]

Replied On February 3, 2020 01:44 PM UTC

Hi Peter,

Thanks for using Syncfusion Products.

Query#: Dropping of data from one grid to another grid not working

We have analysed your query at our end and the reported issue may occur due to the DropTargetID definition in the aspx page. We suggest you to define the DropTargetID as shown in the below code snippet.

Aspx page

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent" ClientIDMode="Static">

<div>

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" AllowRowDragAndDrop="true" >

<EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="Normal"></EditSettings>

<ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

<RowDropSettings DropTargetID="#DestGrid" />

<PageSettings PageSize="12" />

<Columns>

<ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

<ej:Column Field="CustomerID" HeaderText="CustomerID" Width="80" />

<ej:Column Field="ShipCity" HeaderText="ShipCity" Width="80" EditType="DropdownEdit" />

<ej:Column Field="ShipCountry" EditType="DropdownEdit" HeaderText="ShipCountry" Width="80" />

<ej:Column Field="ShipName" HeaderText="ShipName" Width="80" />

</Columns>

</ej:Grid>

<ej:Grid ID="DestGrid" runat="server" AllowPaging="true" AllowRowDragAndDrop="true" >

<EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" EditMode="Normal"></EditSettings>

<ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

<RowDropSettings DropTargetID="#OrdersGrid" />

<PageSettings PageSize="12" />

<Columns>

<ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

<ej:Column Field="CustomerID" HeaderText="CustomerID" Width="80" />

<ej:Column Field="ShipCity" HeaderText="ShipCity" Width="80" EditType="DropdownEdit" />

<ej:Column Field="ShipCountry" EditType="DropdownEdit" HeaderText="ShipCountry" Width="80" />

<ej:Column Field="ShipName" HeaderText="ShipName" Width="80" />

</Columns>

</ej:Grid>

</div>

</asp:Content>

For your reference we have uploaded the cs sample. Kindly refer it.

https://www.syncfusion.com/downloads/support/forum/151080/ze/peter-cs110341740

This can also be achieved by defining dropTargetID in the server side as shown in the below code snippet and demo. Kindly refer it.

…………..

this.OrdersGrid.RowDropSettings.DropTargetID = "#" + this.DestGrid.ClientID;

this.DestGrid.RowDropSettings.DropTargetID = "#" + this.OrdersGrid.ClientID;

………………..

Demo: https://asp.syncfusion.com/demos/web/grid/draganddrop.aspx

Query#: Is it possible to make a custom ContextMenu to move the selected items from the dgInventory to the dgOrderItems grid?

We will check it at our end and update you the response soon.

Please revert us if you need more assistance on this.

Regards,

Gowri V L.

Reply | Reply with quote

| |

CONTACT US

| |

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.