Ocultación de columnas de cuadrícula Blazor
La Ignite UI for Blazor tiene una interfaz de usuario integrada para ocultar columnas, que se puede usar a través de la barra de herramientas Blazor Grid para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario para ocultar columnas en cualquier lugar dentro de la página según sea necesario. La función Ocultar columnas de cuadrícula Blazor es especialmente útil cuando se desea reducir el tamaño de la cuadrícula y eliminar la necesidad de tabular campos redundantes.
Blazor Grid Column Hiding Example
Grid Setup
Comencemos creando nuestro IgbGrid
y vinculándolo a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.
<IgbGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
<IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
<IgbColumn Field="ContactName" Sortable=true Hidden=true></IgbColumn>
<IgbColumn Field="ContactTitle" Sortable=true></IgbColumn>
<IgbColumn Field="City" Sortable=true></IgbColumn>
<IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
<IgbColumn Field="Fax" Sortable=true></IgbColumn>
<IgbColumn Field="Address" Sortable=true></IgbColumn>
<IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
<IgbColumn Field="Country" Sortable=true></IgbColumn>
<IgbColumn Field="Phone" Sortable=true></IgbColumn>
</IgbGrid>
Toolbar's Column Hiding UI
La interfaz de usuario integrada para ocultar columnas se coloca dentro de un DropDown
en la barra de herramientas de IgbGrid
. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto.
Para este propósito, todo lo que tenemos que hacer es configurar tanto IgbGridToolbarActions
como IgbGridToolbarHiding
dentro de IgbGrid
. También agregaremos un título a nuestra barra de herramientas usando IgbGridToolbarTitle
y un estilo personalizado para el contenedor de nuestra Grid.
<IgbGrid Data=northwindEmployees>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarHiding></IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
</IgbGrid>
IgbGrid
nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario para ocultar columnas de la barra de herramientas.
Al usar la propiedad Title
, estableceremos el título que se muestra dentro del botón desplegable en la barra de herramientas.
<IgbGrid Data=northwindEmployees>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
</IgbGridToolbarActions>
</IgbGridToolbar>
</IgbGrid>
Puede ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de ocultación de columnas Blazor.
Disable hiding of a column
Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad DisableHiding
en verdadero.
<IgbGrid Data=northwindEmployees AutoGenerate=false>
<IgbColumn Field="ContactName" Sortable=true DisableHiding=true></IgbColumn>
<IgbColumn Field="ContactTitle" Sortable=true DisableHiding=true></IgbColumn>
</IgbGrid>
Styling
La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:
<IgbGrid class="grid"></IgbGrid>
Luego configure las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en igx-column-actions
, por lo que el resto de la cuadrícula no se ve afectado:
.grid igx-column-actions {
/* Main Column Actions styles */
--ig-column-actions-background-color: #292826;
--ig-column-actions-title-color: #ffcd0f;
/* Checkbox styles */
--ig-checkbox-tick-color: #292826;
--ig-checkbox-label-color: #ffcd0f;
--ig-checkbox-empty-color: #ffcd0f;
--ig-checkbox-fill-color: #ffcd0f;
/* Input styles */
--ig-input-group-idle-text-color: white;
--ig-input-group-filled-text-color: #ffcd0f;
--ig-input-group-focused-text-color: #ffcd0f;
--ig-input-group-focused-border-color: #ffcd0f;
--ig-input-group-focused-secondary-color: #ffcd0f;
/* Buttons styles */
--ig-button-foreground: #292826;
--ig-button-background: #ffcd0f;
--ig-button-hover-background: #404040;
--ig-button-hover-foreground: #ffcd0f;
--ig-button-focus-background: #ffcd0f;
--ig-button-focus-foreground: black;
--ig-button-focus-visible-background: #ffcd0f;
--ig-button-focus-visible-foreground: black;
--ig-button-disabled-foreground: #ffcd0f;
}
Demo
API References
En este artículo, aprendimos cómo utilizar la interfaz de usuario integrada para ocultar columnas en la barra de herramientas de IgbGrid
. La interfaz de usuario que oculta columnas tiene algunas API más para explorar, que se enumeran a continuación.
ColumnActionsComponent
Componentes adicionales con API relativas que se utilizaron:
IgbColumn
properties:
IgbGridToolbar
properties:
showProgress
IgbGridToolbar
methods:
IgbGrid
events:
ColumnVisibilityChanged
Additional Resources
- Virtualización y rendimiento
- Filtración
- Paginación
- Clasificación
- resúmenes
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.