How to use CalendarExtender Control

Here are the simple code snippet to use CalendarControl of AjaxControlToolkit

Add following code o your page

 

<div>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
        </asp:ScriptManager>
        <div>
            <asp:Panel ID=”Panel1″ runat=”server”>
                <asp:Label ID=”Label1″ runat=”server” Text=”Date”></asp:Label>
                <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox><asp:Button ID=”ShowCal”
                    runat=”server” Text=”Show Cal” />
                <cc1:CalendarExtender ID=”TextBox1_CalendarExtender” runat=”server” Enabled=”True”
                    TargetControlID=”ShowCal”>
                </cc1:CalendarExtender>
        </div>

<div>

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

  <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>         <cc1:CalendarExtender ID=”TextBox1_CalendarExtender” runat=”server” Enabled=”True”     TargetControlID=”TextBox1″/>

     </div>

Now clciking on the TextBox, it  will popup a Calendar. 

i guess its too easy than the old javascript Calendar popup. Isn’t it .

Advertisements

How to use AjaxControlToolkit’s CollapsiblePanelExtender Control

Now a days , web development is no more boring and tough(at least creating good UI web pages) . AjaxControlToolkit is  new sensation in the web development . 

In this post and some upcoming posts ill be sharing  “HOW TO ”  explaination of these controls  available in AjaxControlToolkit.

Todays we will  discuss how to use   “CollapsiblePanelExtender” of AjaxControlToolkit.

Steps:

(1) Add AjaxControlToolkit.dll to your toolbox so that you can access all the controls of it .

(2) Now create a new web project in your VS . 

(3) Add a Panel control on the page and add your contents in to it . Set its ID =Panel1

(4) Add  CollapsiblePanelExtender  control from AjaxControlToolkit toolboxlist which we just added in step 1.

i.e

  <cc1:CollapsiblePanelExtender ID=”Panel3_CollapsiblePanelExtender” 
                runat=”server” Enabled=”True” TargetControlID=”Panel3″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  CollapsedText=”Expand” ExpandedText=”Collapse” AutoCollapse=”true”>
            </cc1:CollapsiblePanelExtender>

  <cc1:CollapsiblePanelExtender ID=”CollapsiblePanelExtenderanel1″      runat=”server” Enabled=”True” TargetControlID=”Panel1″ AutoExpand=”false”  CollapseControlID=”hl” ExpandControlID=”hl”  >            </cc1:CollapsiblePanelExtender>

 

 

(5)  Create a hyper link or any button or any  control from tool box , which you want to use to collapse and Expand the panel . I am using here a Hyperlink control .

 <asp:HyperLink ID=”hl” runat=”server” Text=”Cpllapse”></asp:HyperLink>

(6 ) Now press F5  and clcik on the Hyperlink on hte page .  It will expand the panel and clicking again  on it will collapse it . 

Note : Adding Script Manager control is mandatory to use  this toolkit’s control

thus we  can place many panels on our page and add CollapsiblePanelExtender  control to them . 

Enjoy 🙂

AjaxControlToolkit

Hi,

 Ajax have changed the way of web development . it provides a lot of new and exciting features . Now AjaxControlToolkit   is  the new attraction . it has got many new controls and the extenders of tyhe existing controls like Calender, etc.

    Most important , this is an opensource . we can modify it as per our requirement .

Happy developennt .