Asp.Net Ajax DragPanel Control

Asp.Net CS By Example 12 February 2020

DragPanel Control:

In this post we are exploring more about DragPanel extender control. The DragPanel extender control enables we to create a virtual window for our web application. The DragPanel can be used to extend the Panel control so that we can drag the Panel around the page.

The DragPanel extender has the following properties:

Sr.No	Property	Description
1)	TargetControlID	The ID of the Panel control to drag.
2)	DragHandleID	The ID of the control that the user clicks to drag the Panel control.

When we click the Add Movie link, a draggable window appears that contains a form for inserting a new movie.

Code: frmShowDragPanel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmShowDragPanel.aspx.cs" 
Inherits="LearnAsp.Net.ControlDemo.Ajax.frmShowDragPanel" %>
<!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 id="Head1" runat="server">
    <title>Show Drag Panel Extender</title>
    <style type="text/css">
        .pnlAdd
        {
            display: none;
            border: solid 1px black;
            background-color: #eeeeee;
        }
        .pnlDrag
        {
            background-color: #cccccc;
            color: White;
            cursor: move;
            padding: 3px;
        }
        .pnlContents
        {
            padding: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="sm1" runat="server" />
        <asp:Panel ID="pnlAdd" CssClass="pnlAdd" runat="server">
            <asp:Panel ID="pnlDrag" CssClass="pnlDrag" runat="server">
                Add New Movie
            </asp:Panel>
            <div class="pnlContents">
                <asp:FormView ID="frmMovie"  DefaultMode="Insert" runat="server" 
                oniteminserting="frmMovie_ItemInserting" onmodechanging="frmMovie_ModeChanging" >
                    <InsertItemTemplate>
                        <asp:Label ID="lblTitle" AssociatedControlID="txtTitle" Text="Title:" runat="server" />
                        <asp:TextBox ID="txtTitle" Text='<%# Bind("Title") %>' runat="server" />
                        <br />
                        <br />
                        <asp:Label ID="lblDirector" AssociatedControlID="txtDirector" 
            Text="Director:" runat="server" />
                        <asp:TextBox ID="txtDirector" Text='<%# Bind("Director") 
      %>' runat="server" />
                        <br />
                        <br />
                        <asp:Button ID="btnCancel" Text="Cancel" CommandName="Cancel" runat="server"  />
                        <asp:Button ID="btnInsert" Text="Insert" CommandName="Insert" runat="server" />
                    </InsertItemTemplate>
                </asp:FormView>
            </div>
        </asp:Panel>
        <ajax:dragpanelextender id="dpe1" targetcontrolid="pnlAdd" draghandleid="pnlDrag" runat="server" />
        <br />
        <br />
        <a href="javascript:void(0)"  onclick="$get('pnlAdd').style.display='block';">Add Movie</a>        
    </div>
    </form>
</body> `
</html>

Code: frmShowDragPanel.aspx.cs

            using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LearnAsp.Net.ControlDemo.Ajax
{
            public partial class frmShowDragPanel : System.Web.UI.Page
    {
        
            protected void frmMovie_ItemInserting(object sender, FormViewInsertEventArgs e)
        {
        }
            protected void frmMovie_ModeChanging(object sender, FormViewModeEventArgs e)
        {
        }
    }
}

Output:

Thanks for reading Asp.Net Ajax DragPanel Control

12 February 2020

Asp.Net Ajax DragPanel Control

No comments:

Post a Comment