This is a migrated thread and some comments may be shown as answers.

RadGrid Drag and Drop Between Grids

1 Answer 233 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Jeff asked on 21 Oct 2016, 04:50 PM

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

</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>

1 Answer, 1 is accepted

answered on 26 Oct 2016, 12:39 PM

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.