Grid Drag and Drop

[Peter]

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()

[Gowri Loganathan]

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.