Dropdownlist with two columns of data?

Question

Dropdownlist with two columns of data?

Navigation

#1 by (0 votes)

1

Good morning,

I am working on ASP.NET MVC and I have the task of creating a dropdownlist that shows two columns with data from the same table. For example:

I have looked for possible solutions and achieved the following implementation. It consists of composing a dictionary in which value a string with format (to encolumnar) containing the data to be displayed per row is stored.

//Controlador...
public ActionResult Create()
{
    var dic_Aut = db.tblAuthorities.ToDictionary(s => s.AutId, s =>(s.AutNombre.PadRight(70) +
    s.AutAbrev).ToString().Replace(" ","\xA0"));

    ViewBag.AutId = new SelectList(dic_Aut, "Key", "Value");

    //...

    return View();
}

Then in the view, to achieve the effect of columns, the source must be monospace so that each character occupies the same space.

@*Vista...*@
    <div class="form-group">
        @Html.LabelFor(model => model.AutId, "Autoridad", htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10 monospace">                
            @Html.DropDownList("AutId", null, htmlAttributes: new { @id = "AutId", @class = "form-control", required = "required", placeholder = "Este dato es necesario..." })
            @Html.ValidationMessageFor(model => model.AutId, "", new { @class = "text-danger" })
        </div>
    </div>

The result is something like the following:

This solution is partial because:

The fountain is not aesthetically pleasing.
If the content of the first column exceeds the padding set (70), the text moves the second column.
It would be desirable to show a dividing line as in the first image.

I would be very grateful if anyone can guide me towards a better approach.

Thanks for your time. Greetings!

asp.net-mvc

asked by Bhelic 18.07.2017 в 17:01

source

1 answer

Add JQuery in Wordpress using HOOKS Send the subclass as an argument in the super constructor

score 0 · Answer 1

to new{} of DropDownList you can add the following attribute

@style = "width:250px; display: inline-block;"

I put width and display example, but you could put the style you like to improve the font.

And for padding you could enlarge the size of the item with Width . Another option (you should try it) is to add this attribute to the style="overflow:scroll;" style. This should allow you to scrolls the values instead of putting them on the next line.

As for the dividing line, sure you are using a special component, this is not going to be achieved by attaching 2 values as you come doing, maybe you should look for a library that does it automatically. Now that I think about it, you can do it this way:

Padding-left: -20px solid rgba(17, 17, 17, 0.5); .

You can play with the thickness of pixels and color until it looks like what you are looking for. The -20 should be adjusted based on the length of the maximum length of one of the 2 values.

I hope it's useful for you.

Greetings!