Sponsored Ad

Thursday, November 26, 2009

ASP.NET AJAX DropDownExtender - Tips and Tricks

The DropDownExtender is an ASP.NET AJAX control that can connect to almost any ASP.NET control to provide a dropdown menu. For example: If you have a TextBox and a Panel control

(with a CheckBoxList), and wants to give the text box drop-down menu, then it applies only to the DropDownExtender the text box and set the DropDownControlID the Group. In this article we will see some tips and tricks that can be applied to a control DropDownExtender.

I suppose you have some basic experience developing ASP.NET Ajax applications and has installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the version of the toolkit is version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting. NET Framework 3.5 and Visual Studio 2008).

Tip 1: How to attach a DropDownExtender to a TextBox and show a Panel in the dropdown

Drag and drop a ScriptManager to the page. Then drag and drop a Panel (panelItems) to the page. Now add a BulletedList to it and add some ListItems.

Code Snippet
  1. <asp:ScriptManager ID="ScriptManager1" runat="server">
  2.  
  3. </asp:ScriptManager>
  4.  
  5. <asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
  6.  
  7. <asp:BulletedList ID="BulletedList1" runat="server">
  8.  
  9. <asp:ListItem Text="Item 1"/>
  10.  
  11. <asp:ListItem Text="Item 2"/>
  12.  
  13. <asp:ListItem Text="Item 3"/>
  14.  
  15. </asp:BulletedList>
  16.  
  17. </asp:Panel>

Now drag and drop a TextBox control outside the Panel. If you want to attach a DropDownExtender to the TextBox, then in the design mode, click on the smart tag of the TextBox > Add Extender > Choose the ‘DropDownExtender’ > OK.

If you go back to the ‘Source’ view, you will find the newly created DropDownExtender. Set the DropDownControlId to panelItems.

Code Snippet
  1. <cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server"
  2.  
  3. DynamicServicePath="" Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
  4.  
  5. </cc1:DropDownExtender>

The entire code will look similar to the following.

Code Snippet
  1. <body>
  2.  
  3. <form id="form2" runat="server">
  4.  
  5. <div>
  6.  
  7. <asp:ScriptManager ID="ScriptManager1" runat="server">
  8.  
  9. </asp:ScriptManager>
  10.  
  11. <asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
  12.  
  13. <asp:BulletedList ID="BulletedList1" runat="server">
  14.  
  15. <asp:ListItem Text="Item 1"/>
  16.  
  17. <asp:ListItem Text="Item 2"/>
  18.  
  19. <asp:ListItem Text="Item 3"/>
  20.  
  21. </asp:BulletedList>
  22.  
  23. </asp:Panel>
  24.  
  25. <br />
  26.  
  27. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  28.  
  29. <cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server"
  30.  
  31. DynamicServicePath="" Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
  32.  
  33. </cc1:DropDownExtender>
  34.  
  35. </div>
  36.  
  37. </form>
  38.  
  39. </body>
  40.  
  41. </html>

Run the code. When you hover over the TextBox, you will see a dropdown. Click on it to view the Panel with the BulletedList as shown below

clip_image001

Tip 2: How to keep the DropDownExtender always visible

The dropdownlist as demonstrated above is visible only when the user hovers over the textbox. If you want to override this behavior and keep it always visible, then here is a trick I got from this post  Add the following script tag in the <body> element as shown below:

Code Snippet
  1. <body>
  2.  
  3. <form id="form2" runat="server">
  4.  
  5. <script type="text/javascript">
  6.  
  7. function pageLoad()
  8.  
  9.     {
  10.  
  11.           $find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
  12.  
  13.       $find('TextBox1_DropDownExtender').unhover = VisibleMe;
  14.  
  15.     }
  16.  
  17. function VisibleMe()
  18.  
  19.     {
  20.  
  21.         $find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
  22.  
  23.     }
  24.  
  25. </script>
  26.  
  27. ... ScriptManager and other Controls come here
  28.  
  29. </body>
  30.  
  31. </html>

If you run the code, you will see that the dropdown is always visible.

Tip 3: How to keep the DropDown expanded and show the Panel when first loaded

The default behavior is that the panel is shown only once the user clicks on the textbox. If you want the Panel to be visible as a dropdown when the page is loaded, add the following script

Tip 4: How to align DropDownExtender panel to left instead of right

By default, the panel drops down to the right. However if you need to change this behavior, use the following script. The script uses the set_positioningMode() and sets it to 2 (left). The default value is 3 (right).

Code Snippet
  1. <body>
  2.  
  3. <form id="form3" runat="server">
  4.  
  5. <script type="text/javascript">
  6.  
  7. function pageLoad()
  8.  
  9.     {
  10.  
  11. var chngPosition = $find('TextBox1_DropDownExtender')._dropPopupPopupBehavior;
  12.  
  13.           chngPosition.set_positioningMode(2);
  14.  
  15.     }
  16.  
  17. </script>
  18.  
  19. ... ScriptManager and other Controls come here
  20.  
  21. </body>
  22.  
  23. </html>

clip_image002

Tip 5: How can I make the width of the DropDownExtender (panel) the same as that of the TextBox

The width of the panel that is visible during the drop-down is not the same as that of the targetcontrol of the DropDownExtender. It is displayed to the right by default and adjusts its width according to the contents of the panel as shown below:

clip_image001[1]

However, if you want to manually adjust the width of the drop down and make it the same as that of the textbox, use this code:

Code Snippet
  1. <body>
  2.  
  3. <form id="form3" runat="server">
  4.  
  5. <script type="text/javascript">
  6.  
  7. function pageLoad()
  8.  
  9.     {
  10.  
  11.         $get('panelItems').style.width = $get('TextBox1').clientWidth;
  12.  
  13.     }
  14.  
  15. ... ScriptManager and other Controls come here
  16.  
  17. </body>
  18.  
  19. </html>

clip_image003

Create data table in ASP.NET 2.0(C#)

Code Snippet
  1. private DataTable CreateDataTable()
  2. {
  3. DataTable myDataTable = new DataTable();
  4. DataColumn myDataColumn;
  5. myDataColumn = new DataColumn();
  6. myDataColumn.DataType = Type.GetType("System.String");
  7. myDataColumn.ColumnName = "id";
  8. myDataTable.Columns.Add(myDataColumn);
  9. myDataColumn = new DataColumn();
  10. myDataColumn.DataType = Type.GetType("System.String");
  11. myDataColumn.ColumnName = "username";
  12. myDataTable.Columns.Add(myDataColumn);
  13. myDataColumn = new DataColumn();
  14. myDataColumn.DataType = Type.GetType("System.String");
  15. myDataColumn.ColumnName = "firstname";
  16. myDataTable.Columns.Add(myDataColumn);
  17. myDataColumn = new DataColumn();
  18. myDataColumn.DataType = Type.GetType("System.String");
  19. myDataColumn.ColumnName = "lastname";
  20. myDataTable.Columns.Add(myDataColumn);
  21. return myDataTable;
  22. }

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

Insert data into datatable.

private void AddDataToTable(string username,string firstname,string lastname,DataTable

Code Snippet
  1. myTable)
  2. {
  3. DataRow row;
  4. row = myTable.NewRow();
  5. row["id"] = Guid.NewGuid().ToString();
  6. row["username"] = username;
  7. row["firstname"] = firstname;
  8. row["lastname"] = lastname;
  9. myTable.Rows.Add(row);
  10. }

If you're ever in the market for some great  Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Add data to datatable which we have created

Code Snippet
  1. protected void btnAdd_Click(object sender, EventArgs e)
  2. {
  3. if (txtUserName.Text.Trim() == "")
  4. {
  5. this.lblTips.Text = "You must fill a username.";
  6. return;
  7. }
  8. else
  9. {
  10. AddDataToTable(this.txtUserName.Text.Trim(), this.txtFirstName.Text.Trim(), this.txtLastName.Text.Trim(), (DataTable)Session["myDatatable"]);
  11. this.GridView1.DataSource = ((DataTable)Session["myDatatable"]).DefaultView;
  12. this.GridView1.DataBind();
  13. this.txtFirstName.Text = "";
  14. this.txtLastName.Text = "";
  15. this.txtUserName.Text = "";
  16. this.lblTips.Text = "";
  17. }
  18. }

We migrated our web sites to  Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's  help, we were able to avoid any headaches!

Be noted "Session["myDatatable"] = myDt;" is important to ensure we can add new data continually until the page be closed.

Code Snippet
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3. if (!Page.IsPostBack)
  4. {
  5. myDt = new DataTable();
  6. myDt = CreateDataTable();
  7. Session["myDatatable"] = myDt;
  8. this.GridView1.DataSource = ((DataTable)Session["myDatatable"]).DefaultView;
  9. this.GridView1.DataBind();
  10. }
  11. }
Posted by Rahul at 1:50 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Sponsored Ad

More Related Articles

Website Update

Followers