AJAX DragPanelExtender Control

Using DragPanel control, you can move your panel one place to another place in a Web page on client site. the web page. The DragPanelEtender control allows you to add drag and drop feature to your controls.

Here are two commong properties of

1 – TargetControlID – The ID of that Panel which should be drag.

2 – DragHandleID – The ID of a control that will serve as the “drag handle” for the panel. When the user clicks and drags this control, the panel will move.

.aspx code

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit”TagPrefix=”cc1″ %>

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />

<br />

<cc1:DragPanelExtender ID=”DragPanelExtender1″

runat=”server” TargetControlID=”PanelContainer”




<asp:Panel ID=”PanelContainer” runat=”server”CssClass=”dragContainer” Width=”215px” >

<asp:Panel ID=”PanelBody” runat=”server” CssClass=”dragBody”Width=”215px”>

<asp:GridView ID=”GridView1″ runat=”server”

AutoGenerateColumns=”False” DataSourceID=”SqlDataSource1″

AllowPaging=”True” PageSize=”7″ CellPadding=”4″ForeColor=”#333333″

GridLines=”None” Width=”215px”>


<asp:BoundField DataField=”ContactName”HeaderText=”ContactName” SortExpression=”ContactName” />


<FooterStyle BackColor=”#5D7B9D” Font-Bold=”True”ForeColor=”White” />

<RowStyle BackColor=”#F7F6F3″ ForeColor=”#333333″ />

<EditRowStyle BackColor=”#999999″ />

<SelectedRowStyle BackColor=”#E2DED6″ Font-Bold=”True”ForeColor=”#333333″ />

<PagerStyle BackColor=”#284775″ ForeColor=”White”HorizontalAlign=”Center” />

<HeaderStyle BackColor=”#5D7B9D” Font-Bold=”True”ForeColor=”White” />

<AlternatingRowStyle BackColor=”White” ForeColor=”#284775″/>


<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server”ConnectionString=”<%$ ConnectionStrings:C:\USERS\MAHESH\DESKTOP\AUTOCOMPLETE_SRC\ATLASTEXTBOXAUTOCOMPLETE\APP_DATA\NORTHWND.MDFConnectionString%>”

SelectCommand=”SELECT [CompanyName], [ContactName], [Address], [City], [Country] FROM [Customers]”>






<script type=”text/javascript”>

function setBodyHeightToContentHeight() {

document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+”px”;



window.attachEvent(‘onresize’, setBodyHeightToContentHeight);


NOTE: In the above code, make sure to change your connection string.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s