2

Buenas,

Estoy trabajando sobre ASP.NET MVC y tengo el cometido de crear un dropdownlist que muestre dos columnas con datos provenientes de la misma tabla. Por ejemplo:

Ejemplo de dropdownlist con dos columnas

He buscado posibles soluciones y logré la siguiente implementación. Consiste en componer un diccionario en cuyo value se almacena un string con formato (para encolumnar) conteniendo los datos a mostrar por fila.

//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();
}

Luego en la vista, para lograr el efecto de columnas, la fuente debe ser monospace de forma de que cada caracter ocupe el mismo espacio.

@*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>

El resultado es algo como lo siguiente:

introducir la descripción de la imagen aquí

Esta solución es parcial puesto que:

  • La fuente no es estéticamente agradable.
  • Si el contenido de la primer columna supera el padding establecido (70), el texto desplaza la segunda columna.
  • Sería deseable mostrar una línea divisoria como en la primera imagen.

Agradecería mucho si alguien puede orientarme hacia una mejor aproximación.

Gracias por su tiempo. ¡Saludos!

1 respuesta 1

0

al new{} de la DropDownList podes agregarle el siguiente atributo

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

Puse width y display de ejemplo, pero podrias ponerle el estilo que gustes para mejorar la fuente.

Y para el padding podrias agrandar el tamaño del item con Width. Otra opcion (deberias probarla) es agregarle este atributo al estilo style="overflow:scroll;". Esto deberia permitirte scrollear los valores en lugar de ponerlos en la siguiente linea.

En cuanto a la linea divisoria, seguro esta usando un componente especial, esto no lo vas a lograr anexando 2 valores como lo venís haciendo, quizás debas buscar una librería que lo haga automáticamente. Ahora que lo pienso podes lograrlo de esta manera:

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

Podes ir jugando con el grueso de pixeles y el color hasta que se parezca a lo que buscas. El -20 deberias regularlo en base a la longitud del maximo length de uno de los 2 valores.

Espero te sea util.

Saludos!

3
  • Agradezco tu respuesta pero no obtuve nuevos resultados con lo que sugieres. Probé con: Html.DropDownList("AutId", null, new { id = "AutId", class = "form-control", style = "width:300px; display: inline-block; overflow: scroll;" }) pero no veo que cambios. Tampoco con Padding-left: -20px solid rgba(17, 17, 17, 0.5). También probé ubicando los estilos en "new { htmlAttributes : new { ... }}" con los mismos ausentes resultados. Voy a seguir probando, si logró algo significativo actualizaré. Gracias.
    – Bhelic
    Commented el 20 jul. 2017 a las 14:22
  • Vas a tener los mismos ausentes resultados mientras no agregues en style los atributos CSS correspondientes para modificar el aspecto de tu elemento. Otra opción seria modificar el aspecto refiriéndote al Id="AutId" en una hoja de estilos. Como sea, esos conocimientos deberían consultarse en la sección CSS. Te convendría conseguirte un manual de CSS y repasar bien esos conceptos por que son fundamentales, sobre todo si vas a trabajar usando mvc. Saludos. Commented el 20 jul. 2017 a las 18:10
  • Un par de cosas, primero no estoy seguro a que te refieres con agregar atributos CSS en lo que me sugeriste. Mi intento fue sobre agregar directamente atributos de estilo (style="..."), lo que entiendo que es equivalente a definirlos en una metaclase CSS y referenciarlos. Por otro lado, si modifico la fuente del dropdown para que fuera cualquiera distinta de monospace, esto haría que los caracteres no ocupasen el mismo espacio y rompería esta ficción de encolumnado, ¿no? Te agradezco tu tiempo @seojedaperez.
    – Bhelic
    Commented el 21 jul. 2017 a las 12:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.