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"

            DragHandleID="PanelBody">

        </cc1:DragPanelExtender>

        <div>

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

                        <Columns>                           

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

                        </Columns>

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

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

                        </asp:SqlDataSource>

                 </asp:Panel>

           </asp:Panel>    

        </div>

    </form>

   

<script type="text/javascript">

    function setBodyHeightToContentHeight() {

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

    }

    setBodyHeightToContentHeight();

    window.attachEvent('onresize', setBodyHeightToContentHeight);

    </script>  

 

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