Here is a little example how to drag and drop a row from Telerik's RadGrid to a DIV while highlight on jQuery mouseenter and revert the changes on jQuery mouseleave Event. After you dropped the row on the target area, a Javascript function with the Id in the sender arguments is fired.
Default.aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="radStyleSheetManager" runat="server" />
<style type="text/css">
.dropZone
{
width: 200px;
height: 200px;
border: 1px solid #000;
display: block;
background-color: #999;
text-align: center;
font-family: "Tahoma";
font-size: 12px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadFormDecorator runat="server" Skin="Black" ID="radFOrmDecorator" />
<telerik:RadScriptManager ID="radScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
</telerik:RadAjaxManager>
<table>
<tbody>
<tr>
<td>
<telerik:RadGrid ID="radGrid" runat="server" AllowPaging="true" BorderWidth="0">
<MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id">
</MasterTableView>
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder"
AllowRowsDragDrop="true">
<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
<ClientEvents OnRowDropping="onRowDropping" OnRowDragStarted="onRowDragStarted" />
<Animation AllowColumnReorderAnimation="true" AllowColumnRevertAnimation="true" />
</ClientSettings>
</telerik:RadGrid>
</td>
<td valign="top">
<div class="dropZone" id="dropZone">
<br /><br />
DROP ZONE
</div>
</td>
</tr>
</tbody>
</table>
<telerik:RadScriptBlock runat="server" ID="radScriptBlock">
<script type="text/javascript">
// ########################
function onRowDragStarted(sender, args) {
$("#dropZone").mouseenter(function () {
$("#dropZone").css('background', '#FF9900');
}).mouseleave(function () {
$("#dropZone").css('background', '#999');
});
}
// ########################
function onRowDropping(sender, args) {
$("#dropZone").css('background', '#999');
$("#dropZone").unbind('mouseenter').unbind('mouseleave');
if (sender.get_id() == "<%=radGrid.ClientID %>") {
var node = args.get_destinationHtmlElement();
if (isChildOf('dropZone', node)) {
alert("You droped item " + args._dragedItems[0].getDataKeyValue('Id') + ". We can now fire an ajax update.");
args.set_cancel(true);
}
}
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;
}
</script>
</telerik:RadScriptBlock>
</form>
</body>
</html>
Default.aspx.cs Classusing System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Collections.Generic;
public partial class Default : System.Web.UI.Page
{
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public DateTime created { get; set; }
public decimal Price { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
List<Product> list = new List<Product>();
for (int i = 1; i < 10; i++)
{
list.Add(new Product { Id = i.ToString(), created = DateTime.Now, Name = "Product " + i, Price = Convert.ToDecimal(i + 2.3) });
}
radGrid.DataSource = list;
radGrid.DataBind();
}
}
Keine Kommentare:
Kommentar veröffentlichen