It is always trickey to style dropdownlists while having very long list items. Specially if we need to squeeze dropdownlist in to narrow spots. However there are numorous ways in the web to achive this, but most of them break the concept of 'list control' in Asp.net. This is a very basic solution (pahaps an idea) how to keep very ListBox hidden (with very long items) in the html and show it when we click an icon and then once we select a item it shows only the text in Multiline, in a narrow space
Example:
Asp.net Web Control exteneded from ListBox:
public class AutoDropDownList : ListBox { private string style = @" <style type=""text/css""> #{0}Container #{0}Text {{ display:block; float:left; }} #{0}Container .List {{ display:none; position:absolute; float:left; margin-left:{2}px; }} #{0}Container #{0}StaticContent {{ width:{1}px; float:left; min-height:20px; }} #{0}Container .Handle {{ float:right; border:solid 1px #aaa; }} </style> "; private string script = @" function displayItem() {{ $(""#{0}Text"").text($(""#{0} option:selected"").text()); $(""#{0}Wrapper"").hide(); }} $(document).ready(function () {{ $(""html"").click(function (event) {{ if (event.target.id == ""{0}Handle"") {{ $(""#{0}Wrapper"").show(); }} else $(""#{0}Wrapper"").hide(); }}); }}); "; public override ListSelectionMode SelectionMode { get { return base.SelectionMode; } set { throw new NotSupportedException(); } } public int ContentWidth { get; set; } public AutoDropDownList() { this.CssClass = "DropDownList"; this.ContentWidth = 250; this.Rows = 10; } protected override void OnLoad(EventArgs e) { base.OnLoad(e); this.Attributes.Add("onclick", "javascript:displayItem(this)"); } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), this.ClientID, string.Format(this.script, this.ClientID), true); Literal litStyles = new Literal() { Text = string.Format(this.style, this.ClientID, this.ContentWidth, this.ContentWidth) }; this.Page.Header.Controls.AddAt(0, litStyles); } protected override void Render(HtmlTextWriter writer) { writer.Write(string.Format("<div class=\"Auto{0}\" id=\"{1}Container\">", this.CssClass, this.ClientID)); writer.Write(string.Format("<div id=\"{0}StaticContent\" class=\"StaticContent\">", this.ClientID)); writer.Write(string.Format("<div id=\"{0}Handle\" class=\"Handle\">Drop</div>", this.ClientID)); writer.Write(string.Format("<span id=\"{0}Text\" class=\"Text\">{1}</span>", this.ClientID, this.SelectedItem != null ? this.SelectedItem.Text : string.Empty)); writer.Write("</div>"); writer.Write(string.Format("<div id=\"{0}Wrapper\" class=\"List\">", this.ClientID)); base.Render(writer); writer.Write("</div>"); writer.Write("</div>"); } }
How to use the control.
<%@ Page Language="C#" %> <%@ Register Assembly="ActiveApplication" Namespace="ActiveApplication" TagPrefix="asp" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); if (!this.IsPostBack) { for (int i = 0; i < 100; i++) this.lstBox.Items.Add(@" Very long item in the dorp downlist which will be hidden due to css width b eing set to 200 - This is item " + i); this.lstBox.Items[5].Selected = true; } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:AutoDropDownList runat="server" ID="lstBox"></asp:AutoDropDownList> <asp:Button runat="server" ID="btnSave" Text="Postback" /> </div> </form> </body> </html>
No comments:
Post a Comment