DotNetSlackers Community » Web Development » ASP.NET AJAX / Javascript General Questions » How we can DropdownList Items Expand?

How we can DropdownList Items Expand?

Last post 07-02-2009 2:34 AM by krc. 37 replies.
Page 3 of 3 (38 items) < Previous 1 2 3
Sort Posts: Previous Next

  • 02-04-2009 1:26 AM In reply to

    Re: How we can DropdownList Items Expand?

    Reply Contact

    Hi...

       I am waiting for ur sample code.....

    Thanks

    Ramesh

  •  Advertisement

    Featured Advertisement

     

  • 02-04-2009 1:04 PM In reply to

    Re: How we can DropdownList Items Expand?

    Reply Contact

     hi,

     

    sorry...  for  previous post...

     I will wait for ur sample code...

    Thanks

    Ramesh

  • 02-04-2009 5:25 PM In reply to

    • xxxd
    • Top 10 Contributor
    • Joined on 12-18-2006
    • Slacker
    • Points 19,057

    Re: How we can DropdownList Items Expand?

    Reply Contact

    Sorry I was out without access to my working gadgets ....

    Here you go. This post is terribly bloated now. Next time, let's start with a new JQery post,

    ============================================

     <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Combobox.aspx.vb" Inherits="jquery_combobox_Combobox" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
     <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" />    
      <script type="text/javascript" src="js/jquery.dimensions.js"></script>
      <script type="text/javascript" src="js/jquery.combobox.js"></script></head>

    <style>
    .liveexample li
    {
     list-style-image: none;
     list-style-position : inherit;
     list-style-type: none;
     margin-left: 0;
    }

    .liveexample ul
    {
     padding-bottom: 0;
    }
    </style>

    <body>
    <script>
        $(function() {
            $('#<%=ddl1.ClientId%>').combobox();
        });
    </script>

        <form id="form1" runat="server">
        <div>
       
        <asp:DropDownList ID="ddl1" runat="server">
        <asp:ListItem>item 1</asp:ListItem>
        <asp:ListItem>item Very very long</asp:ListItem>
        <asp:ListItem>item Very very long Very very long</asp:ListItem>
        <asp:ListItem>item Very very longVery very long Very very long</asp:ListItem>
       
        </asp:DropDownList>
        </div>
        </form>
    </body>
    </html>

    Xun

    Beautiful Girls


    Programmatically Speaking ...

  • 02-05-2009 11:53 AM In reply to

    Re: How we can DropdownList Items Expand?

    Reply Contact

    Hi,

     <%@ Page Language="C#" AutoEventWireup="false" CodeFile="dropdown1.aspx.cs" Inherits="dropdown1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>jquery.combox example</title>

        <script type="text/javascript" src="Scripts/jquery.min.js"></script>

        <script type="text/javascript" src="Scripts/jquery.dimensions.js"></script>
        <script type="text/javascript" src="Scripts/jquery.combobox.js"></script>
        <script type="text/javascript" src=""></script>

        <link href="style/screen/example.css" rel="Stylesheet" type="text/css" />
        <link href="style/screen/combobox_diagonal.css" rel="Stylesheet" type="text/css" />
        <style>
            .comboboxContainer
            {
                border-left: solid 2px #777;
                border-top: solid 2px #777;
                border-bottom: solid 1px #ccc;
            }
            .comboboxValueContainer
            {
                background: url(../Images/diag_content.gif) repeat-x left top;
            }
            .comboboxValueContent
            {
                padding-left: 3px;
                text-transform: uppercase;
                color: #770033;
                font-weight: bold;
                max-height: 18px;
            }
            .comboboxDropDownContainer
            {
                border-right: solid 1px #000;
                border-bottom: solid 1px #000;
                border-left: solid 1px #aaa;
                border-top: solid 1px #aaa;
                background: url(../Images/diag_ddl.gif) repeat left top;
                overflow: hidden;
                padding-left: 3px;
                cursor: default;
                outline: none;
            }
            .comboboxDropDownButton
            {
                width: 17px;
                height: 23px;
                background-image: url(../Images/trigger.gif);
            }
            .comboboxGroupItemHeader
            {
                display: block;
                background: #770033;
                color: #fff;
                padding-left: 5px;
                font-style: italic;
                font-weight: bolder;
                font-family: Georgia;
            }
            .comboboxGroupItemContainer
            {
                padding-left: 0px;
                margin: 0;
            }
            .comboboxItem
            {
                color: #000;
                text-transform: lowercase;
                font-weight: normal;
                font-style: normal;
            }
            .comboboxItemHover
            {
                background-color: #999;
                color: #fff;
            }
            .comboboxGroupItemContainer .comboboxItem
            {
                padding-left: 20px;
                margin-left: 0px;
            }
        </style>
    </head>
    <body>

        <script>

            //        $(function() {
            //            debugger;
            //            $('#<%= ddl1.ClientID %>').combobox();
            //        });
            $(function() {
                $('#<%= ddl1.ClientID %>').combobox(
                  {
                      comboboxContainerClass: "comboboxContainer",
                      comboboxValueContainerClass: "comboboxValueContainer",
                      comboboxValueContentClass: "comboboxValueContent",
                      comboboxDropDownClass: "comboboxDropDownContainer",
                      comboboxDropDownButtonClass: "comboboxDropDownButton",
                      comboboxDropDownItemClass: "comboboxItem",
                      comboboxDropDownItemHoverClass: "comboboxItemHover",
                      comboboxDropDownGroupItemHeaderClass: "comboboxGroupItemHeader",
                      comboboxDropDownGroupItemContainerClass: "comboboxGroupItemContainer",
                      animationType: "slide",
                      width: "150px"

                  })
            });
                         
        </script>

        <form id="form1" runat="server">
        <asp:DropDownList ID="ddl1" runat="server" Width="150px" OnSelectedIndexChanged="onSelected_Changed"
            AutoPostBack="true">
            <asp:ListItem Text="sdfsdfsdf" Value="0"></asp:ListItem>
            <asp:ListItem Text="sdfcvbcvxbcvbcvxbcvbsdfsdf" Value="0"></asp:ListItem>
            <asp:ListItem Text="sdfsdcvbcvbcvbcvbcvbcvbcvbcvfsdf" Value="0"></asp:ListItem>
            <asp:ListItem Text="cvbcdfgdfgdfgdfgdfgdfgdddddddddddddvbcvb" Value="0"></asp:ListItem>
            <asp:ListItem Text="gddfgggggggggggggggggggggggggggggggggggggggdff" Value="0"></asp:ListItem>
            <asp:ListItem Text="sdfsdfgdfgdfgdfgfsdf" Value="0"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btn_select" Text="Replace Select Control" runat="server" />
        </form>
    </body>
    </html>

     

    1) In OnSelectedIndexChanged event nothing will happend...

    2) this event not  at fired....

     

     

     

    protected void onSelected_Changed(object sender, EventArgs e)

    {

    }

    can u use this code then  can know..whats the issue....

     

    please verify and let me know...

     

    thanks

    ramesh

     

     

  • 02-05-2009 3:36 PM In reply to

    • xxxd
    • Top 10 Contributor
    • Joined on 12-18-2006
    • Slacker
    • Points 19,057

    Re: How we can DropdownList Items Expand?

    Reply Contact

     I am sorry, I tested and tried in various ways and could not get it to work either.

    Xun

    Beautiful Girls


    Programmatically Speaking ...

  • 02-26-2009 1:52 PM In reply to

    • rino
    • Top 50 Contributor
    • Joined on 02-24-2009
    • India
    • Wannabe Slacker
    • Points 374

    Re: How we can DropdownList Items Expand?

    Reply Contact

    i'm not an expert in asp, but a wild idea, oki. use an ajax popup or hover menu extender, place a list box with auto sizing there,

    your problem may get over.

    try this dear.

  • 03-30-2009 7:30 PM In reply to

    • Dytiscus
    • Not Ranked
    • Joined on 03-30-2009
    • Wannabe Slacker
    • Points 5

    Re: How we can DropdownList Items Expand?

    Reply Contact

    He guys, the problem is in the @ Page directive . The AutoEventWireup attribute should be set to true or you should register a handle in code...

    cheers

     * Page directive option, also notice the difference in the CodeBehind vs CodeFile.

    <% @ Page Language="C#" AutoEventWireup="true" CodeBehind="dropdown1.aspx.cs" Inherits="dropdown1" %>

     * Code behind option.

     protected override void OnInit(EventArgs e)

    {

    base.OnInit(e); ddl1.SelectedIndexChanged += new EventHandler(ddl1_SelectedIndexChanged);

    }

    void ddl1_SelectedIndexChanged(object sender, EventArgs e)

    {

     

             throw new NotImplementedException ();

    }

     

     

     

     

     

    {

     

  • 07-02-2009 2:34 AM In reply to

    • krc
    • Not Ranked
    • Joined on 07-02-2009
    • Wannabe Slacker
    • Points 5

    Re: How we can DropdownList Items Expand?

    Reply Contact

     Hi all,

    Did you ever find a solution for this?

     

    Thanks...
Page 3 of 3 (38 items) < Previous 1 2 3