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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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. 

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; 
……………….. 
 



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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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.Close Icon

Live Chat Icon For mobile
Live Chat Icon