question

RavikantNinave-5900 avatar image
0 Votes"
RavikantNinave-5900 asked AlbertKallal-4360 edited

3 different values in html select

Hello,
I have to show three different values which should align properly in html select drop-down. Can anyone show me any link or code

dotnet-aspnet-webpages
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered AlbertKallal-4360 edited

Ah, ok, you have the need to display 3 columns in the drop down.
MS-Access is one such example that dropdowns (combo boxes) allow display of multiple columns. this is a "great" feature that we don't have in web land.

However, there are 2 solutions I can think of that work quite well.

First, put in a textbox, and put in a button beside it, and when you click on that "fake" dropdown, you actually display a gridview for the drop selection. and it quite easy to display/show the grid on top of the rest of the forms content without having to use a popup (however, now that we are thinking about this, a popup gridview is also a great idea!!!!).

And the next idea (one that I post some code for) is to use a fixed font size, and THEN pre-process the data for the multiple columns to be padded with blanks (spaces), so we actually see/get a multi-column display and drop down.

Now, I am ALSO going to assume that like VERY high % of dropdowns, we have some database PK id, and then the text/description part.

A drop down has the ability to display a text column value, and also have a hidden value
The Text value is DataTextField, and the hidden value is DataValueFeild.

Also, we can't JUST pad the columns in the dropdown with a space. We have to use what is called a "non breaking" space, or the so called nbsp.

So, lets drop a combo (dropdown) list into the page. We have this:

145212-image.png

So, NOTE how we used a FIXED font size in above.

With a fixed font size, the we can "pad up" the display text column for EACH of the multiple columns we want to display.

So, our code now will look like this:

(I built a little helper function - since I did not want to re-type my padding expression over multiple times).

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
     If Not IsPostBack Then
         LoadCombo()
     End If
    
 End Sub
    
 Sub LoadCombo()
    
     Dim rstHotels As DataTable = New DataTable
    
     Using conn As New SqlConnection(My.Settings.TEST4)
         Dim strSQL As String =
                 "SELECT ID, HotelName, City, Province FROM tblHotels ORDER BY HotelName"
         Using cmdSQL As New SqlCommand(strSQL, conn)
             conn.Open()
             rstHotels.Load(cmdSQL.ExecuteReader)
         End Using
     End Using
    
     rstHotels.Columns.Add("HotelNameL", GetType(String))
     For Each OneRow As DataRow In rstHotels.Rows
         OneRow("HotelNameL") =
             Lpad(OneRow("HotelName").ToString, 30) &
             Lpad(OneRow("City").ToString, 15) &
             Lpad(OneRow("Province").ToString, 15, False)
     Next
    
     cboHotel.DataSource = rstHotels
     cboHotel.DataBind()
    
 End Sub
    
 Function Lpad(str As String, ToPad As Integer, Optional Adddelim As Boolean = True) As String
    
     Dim nbsp As String = Chr(160)  ' non breaking space
     Dim strResult As String = ""
    
     strResult = Left(str, ToPad).PadRight(ToPad, nbsp)
     If Adddelim Then
         strResult &= "|"
     End If  
     Return strResult
    
 End Function

And the result is now this:

145147-image.png

It not super great looking, but it not all too bad. Unfortantly, unlike say MS-Access, the columns don't have a heading.

If you REALLY needed a bit more formatting, then I would consider then dropping down (display) of a GridView, as that would give a better layout, and also have headings for the columns. But, the above is one approach I have used for a multi-column display combo box.

Regards,

Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada



image.png (19.8 KiB)
image.png (45.2 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @RavikantNinave-5900 ,
What's your meaning?Do you have a select tag and it has three item lists and you want to align these lists?
Just like this:

  <select name="cars" id="cars">
         <option value="volvo">Volvo</option>
         <option value="saab">Saab</option>
         <option value="mercedes">Mercedes</option>
     </select>

result:
SYXLN.gif

Best regards,
Yijing Sun


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RavikantNinave-5900 avatar image
0 Votes"
RavikantNinave-5900 answered YijingSun-MSFT commented

Ohh no, I have 3 values in 1 option tag.
<option>value1. Value2. value3</option>

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @RavikantNinave-5900 ,
What's your meaning? Do you want to know how to show three values in one option tag? How to bind multiple values in the select option?
Best regards,
Yijing Sun

0 Votes 0 ·

I know how to bind them but most important to align them properly.

0 Votes 0 ·

Hi @RavikantNinave-5900 ,
Could you post your view page to us? I think,you could use js to split the values and add '\u00a0' after the value to align them.
Best regards,
Yijing Sun

0 Votes 0 ·
RavikantNinave-5900 avatar image
0 Votes"
RavikantNinave-5900 answered AlbertKallal-4360 edited

Hey Albert, thanks the code you gave is working perfectly for me. Before I accept answer please suggest if there is any way to arr145492-screenshot-20211101-154845.jpgange it across mobile devices. It looks very messy on mobile.



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hum, I not tested my example on mobile - but it should come out ok. Are you using a fixed font size like Courier new?
As I stated, you might consider a dialog pop of some sort in which you display a gridview or listview. But double check the font specified for the dropdown list. Quite sure fixed fonts are supported on mobile. Certainly a new issue not noted in your original question. I'll give my drop down a try on mobile when i get a chance, but I was under the impression that fixed font sizes are supported.

If fixed fonts are not supported on mobile (news to me), then I think dumping the dropdown, and going with a dialog popup that displays a grid would work rather well. In this case, I suggest jquery.UI dialogs, as they support popping up a grid display of rows to select one row works rather well.

Try with one of these fonts: Courier New, Lucida Console, Monaco, and Consolas.
All of those are fixed size fonts - thus they should display a whole lot better.

1 Vote 1 ·