Filtrado de cuadrícula Blazor

La Ignite UI for Blazor en Blazor Grid es una característica que permite mostrar u ocultar datos de forma selectiva según criterios o condiciones específicos. Hay un contenedor de datos vinculado a través del cual el componente IgbGrid proporciona una API de filtrado enriquecida y todas las capacidades de filtrado. Los tipos de filtrado disponibles aquí son tres:

Blazor Grid Filtering Example

El siguiente ejemplo demuestra IgbGrid 's Filtro rápido experiencia de usuario.

Setup

Para especificar si el filtrado está habilitado y qué modo de filtrado se debe utilizar, IgbGrid expone las siguientes propiedades: AllowFiltering, AllowAdvancedFiltering, FilterMode y Filterable.

La propiedad AllowFiltering le permite especificar las siguientes opciones:

falso: se desactivará el filtrado de la cuadrícula correspondiente. Este es el valor predeterminado.
verdadero: se habilitará el filtrado para la cuadrícula correspondiente.

La propiedad AllowAdvancedFiltering le permite especificar las siguientes opciones:

falso: se desactivará el filtrado avanzado para la cuadrícula correspondiente. Este es el valor predeterminado.
verdadero: se habilitará el filtrado avanzado para la cuadrícula correspondiente.

La propiedad FilterMode le permite especificar las siguientes opciones:

QuickFilter: una interfaz de usuario de filtrado simplista. Este es el valor predeterminado.
ExcelStyleFilter: una interfaz de usuario de filtrado similar a Excel.

Propiedad Filterable le permite especificar las siguientes opciones:

verdadero: se habilitará el filtrado para la columna correspondiente. Este es el valor predeterminado.
falso: se desactivará el filtrado de la columna correspondiente.

<IgbGrid Data=data AutoGenerate=false AllowFiltering=true>
    <IgbColumn Field="ProductName" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Price" DataType="GridColumnDataType.Number" Filterable=false></IgbColumn>
</IgbGrid>

Sin embargo, para habilitar el filtrado avanzado, debe establecer la propiedad de AllowAdvancedFiltering entrada en true.7

<IgbGrid Data=data AutoGenerate=true AllowAdvancedFiltering=true />

[!Note] You can enable both the QuickFilter or ExcelStyleFilter and the advanced filtering user interfaces in the IgbGrid. Both filtering user interfaces will work independently of one another. The final filtered result in the IgbGrid is the intersection between the results of the two filters.

Interaction

Para abrir la fila de filtro para una columna en particular, se debe hacer clic en el chip 'Filtro' debajo de su encabezado. Para agregar condiciones, debe elegir el operando de filtro usando el menú desplegable a la izquierda de la entrada e ingresar el valor. Para las columnas de números y fechas, se selecciona "Igual" de forma predeterminada, para cadenas, "Contiene" y para booleanos, "Todos". Al presionar 'Entrar' se confirma la condición y ahora podrá agregar otra. Hay un menú desplegable entre los chips de 'condición', que determina el operador lógico entre ellos; 'Y' está seleccionado de forma predeterminada. Para eliminar una condición, puede hacer clic en el botón 'X' del chip y, para editarla, debe seleccionar el chip y la entrada se completará con los datos del chip. Mientras la fila de filtro está abierta, puede hacer clic en el encabezado de cualquier columna filtrable para seleccionarla y poder agregarle condiciones de filtro.

Si bien se han aplicado algunas condiciones de filtrado a una columna y la fila de filtro está cerrada, puede eliminar las condiciones haciendo clic en el botón de cerrar del chip o puede abrir la fila de filtro seleccionando cualquiera de los chips. Cuando no hay suficiente espacio para mostrar todas las condiciones, se muestra un ícono de filtro con una insignia que indica cuántas condiciones más hay. También se puede hacer clic en él para abrir la fila de filtro.

Usage

Hay una estrategia de filtrado predeterminada que se proporciona lista para usar, así como todas las condiciones de filtrado estándar, que el desarrollador puede reemplazar con su propia implementación. Además, proporcionamos una manera de conectar fácilmente sus propias condiciones de filtrado personalizadas. Actualmente, IgbGrid proporciona no solo una interfaz de usuario de filtrado simplista, sino también opciones de filtrado más complejas. Dependiendo del DataType establecido de la columna, el conjunto correcto de operaciones de filtrado se carga dentro del menú desplegable de la interfaz de usuario del filtro. Además, puede configurar las propiedades IgnoreCase y Condition inicial.

La función de filtrado se habilita para el componente IgbGrid configurando la entrada AllowFiltering en verdadero. El FilterMode predeterminado es QuickFilter y no se puede cambiar en tiempo de ejecución. Para deshabilitar esta función para una determinada columna, establezca la entrada Filterable en falso.

<IgbGrid Data=data AutoGenerate=false AllowFiltering=true>
    <IgbColumn Field="ProductName" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Price" DataType="GridColumnDataType.Number" Filterable=false></IgbColumn>
</IgbGrid>

[!Note] If values of type string are used by a column of data type date, the IgbGrid won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

Filtering logic

La propiedad FilteringLogic de IgbGrid controla cómo se resolverá el filtrado de varias columnas en IgbGrid. Puede cambiarlo en cualquier momento a través de la API IgbGrid o mediante la propiedad de entrada IgbGrid.

 <IgbGrid FilteringLogic="FilteringLogic.Or"></IgbGrid>

El valor predeterminado de AND devuelve solo las filas que coinciden con todas las expresiones de filtrado aplicadas actualmente. Siguiendo el ejemplo anterior, se devolverá una fila cuando el valor de la celda 'NombreProducto' contenga 'miproducto' y el valor de la celda 'Precio' sea mayor que 55.

Cuando se establece en OR, se devolverá una fila cuando el valor de la celda 'NombreProducto' contenga 'miproducto' o el valor de la celda 'Precio' sea mayor que 55.

Styling

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<IgbGrid Class="grid"></IgbGrid>

Luego configure las propiedades CSS relacionadas para esa clase:

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

Demo

Known Limitations

[!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.