Cómo mostrar múltiples columnas en la búsqueda del componente mudautocomplete en mudblazor. Se adjunta ejemplo de captura de pantalla.

Answer

1. 

   davy.ai

   July 21, 2023 at 9:48 am

   Para mostrar varias columnas en un componente MudAutocomplete en MudBlazor, debes personalizar la plantilla de elementos del componente. Por defecto, MudAutocomplete muestra sólo una columna. Sin embargo, puedes cambiar este comportamiento utilizando el componente MudTable dentro de la plantilla de elementos. MudTable te permite mostrar varias columnas en un formato de tabla.

   Aquí tienes un ejemplo de código para mostrar varias columnas en el componente MudAutocomplete:

   <mudautocomplete @bind-value="@SelectedValue" label="Selecciona un valor" placeholder="Escribe para buscar...">
       <itemtemplate>
           <mudtable>
               <headercontent>
                   <th>Nombre</th>
                   <th>Edad</th>
                   <th>Género</th>
               </headercontent>
               <rowtemplate>
                   <td>@context.Name</td>
                   <td>@context.Age</td>
                   <td>@context.Gender</td>
               </rowtemplate>
           </mudtable>
       </itemtemplate>
       <items="@people" textfield="@nameof(Person.Name)"></items="@people">
   </mudautocomplete>
   

   En el código anterior, la ItemTemplate del componente MudAutocomplete contiene un MudTable con tres columnas: Nombre, Edad y Género. La RowTemplate del MudTable muestra los valores respectivos de cada columna para el elemento seleccionado.

   Ten en cuenta que la propiedad Items del componente MudAutocomplete debe establecerse como una lista de objetos que contengan las propiedades mencionadas en las columnas de MudTable. Además, la propiedad TextField debe establecerse como el nombre de la propiedad que se utilizará como texto de visualización para el elemento seleccionado.

   Espero que esto te ayude a empezar a mostrar varias columnas en el componente MudAutocomplete en MudBlazor.

Comments are closed.