Solved

Listbox in a div container.....how to make it work?!?!?1

Posted on 2006-10-31
16
395 Views
Last Modified: 2008-02-01
I have a listbox on my asp.net website.  I wanted to display horizontal scrollbars on the listbox...so I put the listbox in a div container.  Now the scrollbars both display, however I cannot seem to capture the selected item in the listbox now.  It selects fine but the selectedindex is always -1!!!!!!
any help is much appreciated:
here is the code for the listbox:

           <div id="myContainer" style="height:70px;width:223px;overflow:scroll; z-index: 116; left: 145px; position: absolute; top: 361px;" atomicselection="false" >
 <asp:ListBox ID="ChangeType" runat="server" DataSourceID="ChangeDataSource"
            DataTextField="NAME"
            DataValueField="NAME" SelectionMode="Multiple"></asp:ListBox>
  </div

it took me ages to get the scrollbar part to work and now this problem :-)

HELP :-)
0
Comment
Question by:ciara_barry123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 4
  • 3
16 Comments
 
LVL 13

Expert Comment

by:jeebukarthikeyan
ID: 17841851
hi,

i have reproduced the code ur using

if(!IsPostBack)
{
  connect();//ur databing code
}

put ur list box connecting code with the if(!IsPostBack)

it works

b u d d h a
0
 

Author Comment

by:ciara_barry123
ID: 17841924
jeebukarthikeyan  - thanks for the comment :-)

excuse my ignorance...i'm a little confused as to where exactly I would put the code?

If(!IsPostBack)
{
  connect();//ur databing code
}

I'm using VB code....
0
 
LVL 13

Expert Comment

by:jeebukarthikeyan
ID: 17841984
hi,

i have created some thing like ur
<form id="Form1" method="post" runat="server">
      <div id="myContainer" style="Z-INDEX:116;LEFT:167px;OVERFLOW:scroll;WIDTH:223px;POSITION:absolute;TOP:100px;HEIGHT:70px">
            <asp:ListBox ID="lst" runat="server" SelectionMode="Multiple" AutoPostBack="True"></asp:ListBox>
      </div>
      <asp:ListBox ID="Listbox1" runat="server" SelectionMode="Multiple" AutoPostBack="True"></asp:ListBox>
</form>

this is the function which will populate listbox

void connect()
{
  DataTable dt      =      new DataTable();
  DataColumn dc      =      new DataColumn("name");

  dt.Columns.Add(dc);

  DataRow dr      ;
  dr      =      dt.NewRow();
  dr["name"]="aaa";
  dt.Rows.Add(dr);

  dr      =      dt.NewRow();
  dr["name"]="bbb";
  dt.Rows.Add(dr);

  dr      =      dt.NewRow();
  dr["name"]="bbb";
  dt.Rows.Add(dr);

  lst.DataTextField      =      "name";
  lst.DataValueField      =      "name";

  lst.DataSource      =      dt;
  lst.DataBind();

 }

//code for selected index change
private void lst_SelectedIndexChanged(object sender, System.EventArgs e)
{
      Response.Write( lst.SelectedIndex.ToString());
}

//form load
if(!IsPostBack)
{

      connect();
}

b u d d h a
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.

 

Author Comment

by:ciara_barry123
ID: 17842012

jeebukarthikeyan  - thanks again for the comments....
I think I was confused because I'm using vb not c#?
I'll post all of my code to see if it helps:

in the source section:
          <div id="myContainer" style="height:70px;width:223px;overflow:scroll; z-index: 116; left: 145px; position: absolute; top: 361px;" atomicselection="false" >
 <asp:ListBox ID="ChangeType" runat="server" DataSourceID="ChangeDataSource"
            DataTextField="NAME"
            DataValueField="NAME" SelectionMode="Multiple" AutoPostBack="True"></asp:ListBox>
  </div> &nbsp; &nbsp;
         
on the page_load event in the vb code (I'm connecting to a datasource):
        Me.ChangeType.DataBind()
        ChangeType.Rows = ChangeType.Items.Count

0
 

Author Comment

by:ciara_barry123
ID: 17842101
and just to clarify:
when the listbox is not in the div tag, it works perfectly.
when I put it in the div tag:
when you select anything in the listbox, the selected index is always -1, so it doesn't seem to be registering that something is selected, even though when you look on the screen, you can see it's selected.

I've been stuck on this all day.....
0
 
LVL 13

Expert Comment

by:jeebukarthikeyan
ID: 17842133
hi,
where ur calling the function for populating the listboxes....

can u put the code here

b u d d h a
0
 

Author Comment

by:ciara_barry123
ID: 17842244
Hi ,
Thanks again for spending time on this:
I'm not actually calling any function to populate..it's automatically bound to the datasource so populates automatically on load....
hope this makes sense

0
 
LVL 13

Accepted Solution

by:
jeebukarthikeyan earned 320 total points
ID: 17842257
hi,

that is where the problm i think

populate the datalist form the function

it will work

u can use my connect() function
for that

b u d d h a
0
 

Author Comment

by:ciara_barry123
ID: 17843304
no it still doesn't work I'm afraid :-(

any other suggestions?
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17843443
What happens if you use overflow:auto?

Bob
0
 

Author Comment

by:ciara_barry123
ID: 17843513
thanks Bob...but unfortunately it still doesn't work it  I use overflow auto :-(
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 17843527
Ok, because I see overflow:scroll.  Are the values for the DropDownList unique?  Did it work before you put it in the <div>?

Bob
0
 

Author Comment

by:ciara_barry123
ID: 17843553
Hi bob,

just leaving now for the day but said i'd quickly repsond

yes it worked perfectly before I put it in the div
i only put in the div so I could have a horizontal scrollbar...and when i got that working, I could no longer select :-)
typical

if you have any other ideas, let me know and I'll try them when I get into work tomorrow

thanks for the help

0
 

Author Comment

by:ciara_barry123
ID: 17843559
ps: sorry bob, I meant that I changed it to overflow auto and it still didn't work :-)
0
 
LVL 96

Assisted Solution

by:Bob Learned
Bob Learned earned 180 total points
ID: 17843731
I did a small test:

<div style="LEFT:20px;OVERFLOW:auto;WIDTH:200px;POSITION:absolute;TOP:20px;HEIGHT:300px">
   <asp:ListBox id="ListBox1" runat="server" Width="500px" AutoPostBack="True">
      <asp:ListItem Value="This is a test of the radio broadcast system">This is a test of the radio broadcast system</asp:ListItem>
    <asp:ListItem Value="This is another long text string">This is another long text string</asp:ListItem>
    </asp:ListBox>
</div>

The SelectedIndex changed as expected.

Bob
0
 

Author Comment

by:ciara_barry123
ID: 17848369
Ok I figured it out..all it needed was  a fresh brain:
in the load section I had the following code:
            Me.ChangeType.DataBind()
            ChangeType.Rows = ChangeType.Items.Count
which meant every time the user clicked on the listbox, the form was loaded and thus the listbox was reloaded...losing the selection
i added the following code to ensure it was only databound on the first load and it works perfectly....

  If FirstTimeLoad <> False Then
                    Me.ChangeType.DataBind()
            ChangeType.Rows = ChangeType.Items.Count
            FirstTimeLoad = False
        End If
thanks for all the help I'm going to split the points:
hope you think that's fair......


 
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question