Mittwoch, 21. Dezember 2011

Highlight target area while dragging row from Telerik RadGrid

This Blog moved to http://webapps-in-action.com/

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