• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 259
  • Last Modified:

500-points: ddl control drop down automatically when it gets focus

this is 500 points question.

how can i do the ddl control drop down automatically when it gets focus?

i have already asked this question here.. >>
http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21399605.html

0
honda99
Asked:
honda99
  • 13
  • 5
  • 2
  • +1
1 Solution
 
LakioCommented:
we need to see the page/code
0
 
honda99Author Commented:
what im doing is:

here are the steps i do:


1) i fill my ddl through database
2) get the width text inside the ddl
2) write a onClick or onFocus event on ddl
and i pass the width to the javascript for an example like this:

      function getmywidth(obj,width){
       document.getElementById.style.width = width
      
      }

this works fine but the only problem with user is,

user have to click twice in order to drop the ddl

why did i say twice click

first click is getfocus and second click drop the ddl

0
 
honda99Author Commented:
i write a small function to get the max width inside the ddl so im passing to javascript whatever the max width and its work great again the only problem im having is.

how to avoid 2 clicks

can i acheive in 1 click(focus and drop the ddl list) ?

again thanks
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LakioCommented:
I don't see why you can't show me the code,

I will need it for the best solution but try this:

- onclick="code(); code()"
or
- onfocus="code()" onclick="code()"

this are very bad solutions....
0
 
honda99Author Commented:
i did not mean to hide the code, sorry if you understood that way.

here is my code:
javascript code:


 function ChangeListBoxWidth(id,width) {
      document.getElementById(id).style.width=width;
}

asp.net code:
-----------------


        Dim strServiceTypeMaxWidth As String : strServiceTypeMaxWidth = Common.GetMyDDLWidth(Me.ddlServiceType, 5, 15)
        Dim strServiceTypeSelectedWidth As String = 95 '/this is based on the width of the datagrid column to look nicer
        Me.ddlServiceType.Attributes.Add("onFocus", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")
        Me.ddlServiceType.Attributes.Add("onBlur", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeSelectedWidth + "')")
        Me.ddlServiceType.Attributes.Add("onChange", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")
 



0
 
honda99Author Commented:
<TD class="TableHead">                                    
 <asp:DropDownList id="ddlServiceType" runat="server" Width="95px"  ></asp:DropDownList>
</TD>
0
 
TorrwinCommented:
Are you calling the changelistboxwidth in your page load sub right after you bind the data to it?
0
 
honda99Author Commented:
im calling changelistboxwidth  in Page_PreRender
0
 
TorrwinCommented:
Does that come before or after you bind the data?  

The datagrid sizes itself when you bind it, so you should probably be changing the size after the bind if you aren't already.
0
 
honda99Author Commented:
it comes after i bind my data

page_prerender comes at the end

0
 
honda99Author Commented:
>>The datagrid sizes itself when you bind it, so you should probably be changing the size after the bind if you aren't already.


if you see my above code

my ddl will populate through db

once it populate my ddl then i run the page_preRender whic is:

Dim strServiceTypeMaxWidth As String : strServiceTypeMaxWidth = Common.GetMyDDLWidth(Me.ddlServiceType, 5, 15)
        Dim strServiceTypeSelectedWidth As String = 95 '/this is based on the width of the datagrid column to look nicer
        Me.ddlServiceType.Attributes.Add("onFocus", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")
        Me.ddlServiceType.Attributes.Add("onBlur", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeSelectedWidth + "')")
        Me.ddlServiceType.Attributes.Add("onChange", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")


and whenever the user click on ddl it fires click or focus on ddl
0
 
honda99Author Commented:
is anybody out there?
0
 
LakioCommented:
well, I still dont get it :P

show me a webpage ;)
0
 
honda99Author Commented:
Lakio:

i will provide youwhatever you want but which part you don't understand?
0
 
honda99Author Commented:
.aspx code
===========
<HTML>
      <HEAD>
            <title>HomeOffice</title>
            <META http-equiv="Content-Type" content="text/html; charset=windows-1252">
            <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
            <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

<script language="javascript">
            

       function ChangeListBoxWidth(id,width) {
      document.getElementById(id).style.width=width;
}
</script>
<TABLE class="homepage"  cellSpacing="0" cellPadding="0" width="100%"
                              border="0">
                              <TR>
                                    <TD >
                                          <asp:datagrid id="grdContracts" runat="SERVER" Width="100%" CssClass="homepage"
                                                Font-Size="Smaller" AllowPaging="True" PageSize="25" AutoGenerateColumns="False" AllowSorting="True"
                                                AlternatingItemStyle-ForeColor="#ffff33" CellPadding="2">
                                                <AlternatingItemStyle BackColor="#F0F0F0"></AlternatingItemStyle>
                                                <ItemStyle CssClass="homepage"></ItemStyle>
                                                
                                                <HeaderStyle CssClass="homepage_b" BackColor="Silver"></HeaderStyle>
                                                <Columns>
                                                      <asp:TemplateColumn>
                                                            <HeaderTemplate>
                                                                  <asp:Label id="lblSelect" CssClass="homepage" runat="server">Select</asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                  <input type="radio" id="rbContract" name="rbContract" onclick="javascript:PopulateTextBox('<%# DataBinder.Eval(Container.DataItem, "ContractID") %>', '<%# DataBinder.Eval(Container.DataItem, "SubID") %>', '<%# DataBinder.Eval(Container.DataItem, "EIN") %>', '<%# DataBinder.Eval(Container.DataItem, "PlanID") %>', '<%# DataBinder.Eval(Container.DataItem, "contractstatus") %>');">
                                                            </ItemTemplate>
                                                      </asp:TemplateColumn>
                                                      <asp:BoundColumn DataField="ContractID" SortExpression="ContractID" HeaderText="Contract">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="63px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="subid" SortExpression="subid" HeaderText="Sub">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="30px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="planid" SortExpression="planid" HeaderText="Plan ID" Visible="False">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="40px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                                                                                                          
                                                      <asp:BoundColumn DataField="clientname" SortExpression="clientname" HeaderText="Client Name">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="210px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="ein" SortExpression="ein" HeaderText="EIN">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="60px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="servicetype" SortExpression="servicetype" HeaderText="Service Type" DataFormatString="{0:d}">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="90px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="plantype" SortExpression="plantype" HeaderText="Plan Type">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="100px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="product" SortExpression="product" HeaderText="Product">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="120px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="NBIStatus" SortExpression="NBIStatus" HeaderText="Partner">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="70px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="contractstatus" SortExpression="contractstatus" HeaderText="Contract Status">
                                                            <HeaderStyle Font-Bold="True" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="80px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                      <asp:BoundColumn DataField="casereceived" SortExpression="casereceived" HeaderText="Case Receive" DataFormatString="{0:d}">
                                                            <HeaderStyle Font-Bold="True" Wrap="False" CssClass="homepage_b"></HeaderStyle>
                                                            <ItemStyle Width="80px" CssClass="homepage"></ItemStyle>
                                                      </asp:BoundColumn>
                                                </Columns>
                                                <PagerStyle HorizontalAlign="Right" CssClass="homepage_b" Mode="NumericPages"></PagerStyle>
                                          </asp:datagrid></TD>
                              </TR>
                        </TABLE></TD></TR></TABLE></TABLE><!--/TABLE 6 --><!--pnlButtons --></asp:panel><asp:panel id="pnlButtons" Runat="server">
                        <br>
                        <TABLE style="PADDING-LEFT: 5px" class="FormattingTableWhite" cellSpacing="0" cellPadding="0"
                                          width="700" bgColor="#ffffff" border="0">
                                          <TR>
                                                <TD style="WIDTH: 105px" vAlign="top"><asp:button id="btnSearch1" runat="server" Text="Search" Width="100px" CssClass="homepage"></asp:button></TD>
                                                <TD style="WIDTH: 200px" vAlign="top"><asp:button id="btnReset1" runat="server" Text="Reset" Width="100px" CssClass="homepage" CausesValidation="False"></asp:button></TD>
                                                <TD vAlign="top"></TD>
                                                <TD vAlign="top"></TD>
                                                <TD vAlign="top"></TD>
                                                <TD vAlign="top"></TD>
                                                <TD vAlign="top"></TD>
                                                <TD style="WIDTH: 105px" vAlign="top"><asp:button id="btnOpen1" tabIndex="0" runat="server" Text="Open Contract" Width="100px" CssClass="homepage"></asp:button></TD>
                                                <TD vAlign="top"><asp:button id="btnConvert1" runat="server" Text="Convert Contract" Width="100px" CssClass="homepage"
                                                            Visible="True"></asp:button></TD>
                                          </TR>
                                    </TABLE>

on my .vb code

form_load: calling this attribute:

Dim strServiceTypeMaxWidth As String : strServiceTypeMaxWidth = Common.GetMyDDLWidth(Me.ddlServiceType, 5, 15)
        Dim strServiceTypeSelectedWidth As String = 95 '/this is based on the width of the datagrid column to look nicer
        Me.ddlServiceType.Attributes.Add("onFocus", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")
        Me.ddlServiceType.Attributes.Add("onBlur", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeSelectedWidth + "')")
        Me.ddlServiceType.Attributes.Add("onChange", "ChangeListBoxWidth(""ddlServiceType"", '" + strServiceTypeMaxWidth + "')")
0
 
honda99Author Commented:
okay here is the web site created for you, have a look at it please

http://www.geocities.com/kwtcv/ddl.htm
0
 
honda99Author Commented:
okay here is the web site created for you, have a look at it please

http://www.geocities.com/kwtcv/ddl.htm

if you go to the above web site you will find that you have to click twice to drop the drop down list

and my question is how can aceivhed in only ONE click :=)
0
 
LakioCommented:
ok, it's hard because IE needs to "write" a new <select> with the new style, it's like changeing tire(on a car) and spinning the tire at the same time :P

but I have a better idea ;) you need a cool ddl(<select>)?

like this one? and yes its <select>!
http://easy-designs.net/articles/replaceSelect/files/final.html

then read this tutorial  http://easy-designs.net/articles/replaceSelect/

<select> Something New, Part 1
By Aaron Gustafson

but I am looking into css for your answer, maybe theres an answer :P
0
 
LakioCommented:
Like this?

<select name="ddl1" size="1" onMouseOver="bgFocus(); ChangeListBoxWidth('ddl1','200'); this.focus();" onBlur="ChangeListBoxWidth('ddl1','50'); bgBlurBlue();" onChange="body.focus()">
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.gooooooooooooooooogle.com">Google</option>
<option value="http://www.wahatsp.com">Whatsup</option>
<option value="http://www.geocities.com">Geocities</option>
</select>
0
 
honda99Author Commented:
hey lakio, thank man but i think you haven't seen the name actually it was me who asked in JavaScript topic :)
0
 
Andrew BeersCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned..
I will leave the following recommendation for this question in the Cleanup topic area:

http:Q_21400053.html --> Accept Lakio

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

~Aqua
EE Cleanup Volunteer
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 13
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now