Monday, 19 August 2013

HOW TO USE ASP.NET AJAX RESIZABLE EXTENDER CONTROL

HOW TO USE ASP.NET AJAX RESIZABLE EXTENDER CONTROL


1)  Create WebSite
2) Add aspx page
3) Add toolkitscript manager
4) Add  Panel Control
5) Add Resizable Extender to Panel Control

asp:ResizableControlExtender   PROPERTIES
1) TARGET CONTROL ID
2) HandleCssClass     (here resize cursor and resize image will be specified).


    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <h1>ASP.NET AJAX RESIZABLE Control DEMO</h1>
    <div>
    <asp:Panel ID="Panel1"  runat="server" style="height:150px; height:100px; overflow:auto">
    <pre>
    ResizableControl is an extender that attaches to any element on a web page and
    allows the user to resize that control with a handle that attaches to lower-right 
    corner of the control. The resize handle lets the user resize the element as 
    if it were a window. The appearance of the resize handle can be specified by the 
    page designer with a CSS style. The content within the element can use 
    CSS styles to automatically resize to fit the new dimensions. Alternatively, 
    ResizableControl exposes two events (onresizing and onresize) that the page 
    designer can attach custom script to in order to enable more complex layout logic.
    Element dimensions are preserved across postbacks to the server and "size"
     properties accessible on both the client and server can be used to enable 
     custom resize behaviors. ResizableControl can optionally limit the maximum and 
     minimum width and height of the target control so that resizing can be constrained 
     by the page author (for example, to limit scrolling to only the horizontal dimension).


    </pre>
    </asp:Panel>
        <asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server"
         HandleCssClass="Panel1" HandleCssClass="HandlerCSS"
          MaximumHeight="300" MaximumWidth="300"
        >
        </asp:ResizableControlExtender>
    </div>


6) Add styles  in head section

    <style type="text/css">
    .HandlerCSS
    {
        width:16px;
        height:16px;
        background-image:url(corel_resize_icon.gif);
        cursor:se-resize;
    }
     H1
    {
        width:450px;
        border-radius:10px;
        background-color:Red;
    }
    </style>


7)  OUTPUT