RadGrid Drag and Drop Between Grids

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    1 posts
    Member since:
    Oct 2016

    Posted 21 Oct Link to this post

    I am attempting to utilize the following demo to create two RadGrids that allow me to drag and drop elements between them.  When I drag from one grid to the second it fires the onrowdrop function but doesn't actually drop the row item into the second grid.

    Grid - Items Drag-and-drop

    any help would be great

     

    <%@ Page Title="" Language="VB" MasterPageFile="~/Masters/SetupMaintenance.master" AutoEventWireup="false" CodeFile="WebsiteMenuMaintenance.aspx.vb" Inherits="WebsiteMenuMaintenance" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Src="~/UserControls/CampaignSelection.ascx" TagPrefix="uc1" TagName="CampaignSelection" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentHeader" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" runat="Server">
     
        <asp:HiddenField ID="hiddenCampaign_Key" runat="server" />
        <asp:HiddenField ID="CampaignCategoryHeader_Id" runat="server" />
        <asp:HiddenField ID="HiddenCampaignCategoryHeaderDetail_Id" runat="server" />
        <input id="hiddenMenu_Id" type="hidden" name="hiddenMenu_Id" runat="server" />
        <input id="hiddenMenu_Key" type="hidden" name="hiddenMenu_Key" runat="server" />
        <input id="hiddenMenuDetailParent_Key" type="hidden" name="hiddenMenuDetailParent_Key" runat="server" />
        <input id="hiddenMenuDetail_Id" type="hidden" name="hiddenMenuDetail_Id" runat="server" />
        <input id="hiddenMenuDetail_Key" type="hidden" name="hiddenMenuDetail_Key" runat="server" />
     
        <asp:Label runat="server" ID="lblError" />
        <uc1:CampaignSelection runat="server" ID="CampaignSelection" InlcudeAllCampaignsChoice="True" />
        <div class="row">
            <div class="col-md-6">
                <h3>Current Menus</h3>
            </div>
            <div class="col-md-6 text-right">
                <h3>
                    <asp:LinkButton ID="lnkNewMenu" runat="server" ToolTip="Add a New Menu" CssClass="iconAction"><i class="glyphicon glyphicon-plus"></i> Add</asp:LinkButton></h3>
            </div>
     
        </div>
        <%--<div class="row">
            <div class="col-md-2">
                <div id="Templates">
                    <telerik:radgrid ID="radMenuTree" runat="server" ShowLineImages="false" Width="100%" Style="white-space: normal;">
                    </telerik:radgrid>
                </div>
            </div>
            </div>
            <div class="col-md-10">
                <div id="EditMenu">
                    <div class="row">
                        <div class="col-md-6">
                            <h3>Menu Option</h3>
                        </div>
                        <div class="col-md-6 text-right">
                            <h3>
                                <asp:LinkButton ID="lnkSave" runat="server" CssClass="lnkSave" CommandName="SaveHTML" OnClientClick="SaveHTMLCONTENT()"><i class="glyphicon glyphicon-save"></i>Save</asp:LinkButton></h3>
                        </div>
                    </div>--%>
                     
                          
                            <telerik:RadSkinManager runat="server" id="RadSkinManager1" showChooser="false" />
                            <script type="text/javascript">
                                ; (function ($, undefined) {
                                    var grdAvailableMenus;
                                    var grdMainMenus;
     
                                    //var demo = window.demo = {};
                                    
                                    onGridCreated = function (sender, args) {                                                                  
                                        grdAvailableMenus = $telerik.findControl(document, "grdAvailableMenus");
                                        grdAvailableMenus = sender;
                                         
                                    }
                                    onRowDropping = function (sender, args) {
                                        alert("Row Dropping")
                                        alert(sender.get_id)
                                        console.log(sender);
                                        //if (sender.get_id() == grdAvailableMenus.get_id()) {
                                        var node = args.get_destinationHtmlElement();
     
                                            if (!isChildOf(grdMainMenus.get_id(), node) && !isChildOf(grdAvailableMenus.get_id(), node)) {
                                                //args.set_cancel(true);
                                                alert(grdAvailableMenus)
                                               
                                                
     
                                            }
                                       // }
                                        else {
                                            var node = args.get_destinationHtmlElement();
                                            alert(node)
                                            if (!isChildOf('trashCan', node)) {
                                                args.set_cancel(true);
                                            }
                                            else {
                                                if (confirm("Are you sure you want to delete this menu?"))
                                                    args.set_destinationHtmlElement($get('trashCan'));
                                                else
                                                    args.set_cancel(true);
                                            }
                                        }
                                    };
     
                                    function isChildOf(parentId, element) {
                                        while (element) {
                                            if (element.id && element.id.indexOf(parentId) > -1) {
                                                return true;
                                            }
                                            element = element.parentNode;
                                        }
                                        return false;
                                    };
                                })($telerik.$);
                            </script>
                            <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" DecorationZoneID="msgTop" DecoratedControls="CheckBoxes, Label" runat="server" Skin="Silk" EnableRoundeCorners="True" />
                            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
                            <telerik:RadAjaxManager runat="server" id="RadAjax" DefaultLoadingPanelID="RadAjaxLoadingPanek1">
                                <AjaxSettings>
                                    <telerik:AjaxSetting AjaxControlID="grdAvailableMenus">
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="grdAvailableMenus" />
                                            <Telerik:AjaxUpdatedControl ControlID="grdMainMenus" />
                                            <telerik:AjaxUpdatedControl ControlID="msg" />                                                                              
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                    <telerik:AjaxSetting AjaxControlID="grdMainMenus" >
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="grdMainMenus" />
                                            <telerik:AjaxUpdatedControl ControlID="msg" />
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                    <telerik:AjaxSetting AjaxControlID="UseDragColumnCheckBox">
                                        <UpdatedControls>
                                            <telerik:AjaxUpdatedControl ControlID="grdAvailableMenus" />
                                            <telerik:AjaxUpdatedControl ControlID="grdMainMenus" />
                                        </UpdatedControls>
                                    </telerik:AjaxSetting>
                                </AjaxSettings>
                            </telerik:RadAjaxManager>
                    <div class="row">
                        <div class="col-md-12">
                            <telerik:RadGrid Rendermode="Lightweight" runat="server" ID="grdAvailableMenus" Skin="Silk" OnNeedDataSource="grdAvailableMenus_NeedDataSource" AllowPaging="true"
                                 OnRowDrop="grdAvailableMenus_RowDrop" AutoGenerateColumns="false" AllowMultiRowSelection="true" PageSize="15">
                                <MasterTableView AllowMultiColumnSorting="True" DataKeyNames="Menu_Id">
                                        <Columns>
                                            <telerik:GridDragDropColumn HeaderStyle-Width="18px">
                                            </telerik:GridDragDropColumn>
                                            <telerik:GridTemplateColumn SortExpression="" Visible="false" HeaderText="Action" ItemStyle-HorizontalAlign="Left"
                                                ItemStyle-Width="70px" HeaderStyle-Width="70px">
                                                <ItemTemplate>
                                                    <asp:ImageButton ID="btnUpdate" runat="server" Visible="false" CommandName="UpdateMenuStage" ImageUrl="images/pencil.gif"
                                                        CommandArgument='<%# Eval("Menu_Id") %>'
                                                        CausesValidation="false" ToolTip="Update Menu Stage" OnClientClick="SetMenuStageMode();" />  
                                            <asp:ImageButton ID="btnDelete" runat="server" Visible="false" CommandName="DeleteMenuStage" ImageUrl="Images/delete.gif"
                                                CommandArgument='<%# Eval("Menu_Id") %>'
                                                CausesValidation='false' ToolTip="Delete Menu Stage" />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridTemplateColumn Visible="True" SortExpression="MenuName" HeaderText="Menu Name">
                                                <ItemTemplate>
                                                   <asp:Label ID="lblMenu_Stage_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Menu_Name") %>' />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                           
                                                 
                                             
                                        </Columns>
                                    </MasterTableView>
                                 
                                    <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="true" ReorderColumnsOnClient="false">                                   
                                        <ClientEvents OnRowDropping="onRowDropping" />                                 
                                        <Scrolling AllowScroll="True" UseStaticHeaders="false" SaveScrollPosition="True"></Scrolling>
                                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                                    </ClientSettings>
                                </telerik:RadGrid>
                            <div class="demo-container" style="width: 750px;">
            <div class="exWrap">
                <div class="msgTop" id="msgTop">
                    <asp:CheckBox ID="UseDragColumnCheckBox" Checked="true" Visible="false" runat="server" OnCheckedChanged="UseDragColumnCheckBox_CheckedChanged"
                        AutoPostBack="true" Text="Use DragDropColumn"></asp:CheckBox>
                </div>
                           <telerik:RadGrid RenderMode="Lightweight" runat="server" AllowPaging="True"  Skin="Silk"  ID="grdMainMenus" OnNeedDataSource="grdMainMenus_NeedDataSource"
                        Width="350px" AutoGenerateColumns="false"  AllowMultiRowSelection="true" OnRowDrop="grdMainMenus_RowDrop">
                        <MasterTableView DataKeyNames="Menu_Id" Width="100%">
                            <Columns>
                                <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="true">                              
                                </telerik:GridDragDropColumn>
                                <telerik:GridTemplateColumn Visible="True" SortExpression="MenuName" HeaderText="">
                                </telerik:GridTemplateColumn>          
                                <telerik:GridTemplateColumn Visible="True" SortExpression="MenuName" HeaderText="Menu Name">
                                                <ItemTemplate>
                                               <asp:Label ID="lblMenu_Stage_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Menu_Name") %>' />
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>                  
                                  
                            </Columns>
                            <NoRecordsTemplate>
                                <div style="height: 30px; cursor: pointer;">
                                    No items to view
                                </div>
                            </NoRecordsTemplate>
                            <PagerStyle Mode="NumericPages" PageButtonCount="4"></PagerStyle>
                        </MasterTableView>
                        <ClientSettings AllowRowsDragDrop="True">
                            <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                           <ClientEvents OnRowDropping="onRowDropping" OnGridCreated="onGridCreated"></ClientEvents>
                        </ClientSettings>
                    </telerik:RadGrid>
                   </div>
    </div>
    </div>               
     
     
                             
                            </div>
                        </div>
                    </div>
              
         
    </asp:Content>
     
    <ASP:Content ID = "Content4" ContentPlaceHolderID="ContentFooter" runat="Server">
        <input id = "hiddenVisible" type="hidden" name="hiddenVisible" Class="hiddenVisible" runat="server" value="up" />
     
        <Telerik:RadCodeBlock ID = "RadCodeBlock1" runat="server">
            <Script type = "text/javascript" language="javascript">
     
                'use strict';
     
                $(document).ready(function () {
                });
            </script>
        </telerik:RadCodeBlock>
        <ASP:GridView ID = "ControlGrid" runat="server" BackColor="White" CellPadding="2" CellSpacing="1"
            GridLines="None" AutoGenerateColumns="False" Visible="False">   
        </asp:GridView>
    </asp:Content>
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 26 Oct Link to this post

    Hello Jeff,

    The item will not be moved between the items and you will need to update the underlying data sources for both RadGrid controls as demonstrated in our online demo. This should be handled within the server-side OnRowDrop events.

    Once you update the underlying data sources and rebind the controls, the dragged item will be correctly displayed in its new position.

    Hope this helps.
     

    Regards,
    Konstantin Dikov
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top