[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Descripción general del filtrado de cuadrícula Blazor

    La Ignite UI for Blazor Data Table/Data Grid incluye filtrado de columnas con una fila de filtro y una API que le brinda la capacidad de realizar condiciones de clasificación expresivas según el tipo de datos de la columna que se está filtrando.

    Blazor Grid Filtering Example

    Como se vio arriba, establecer la propiedad FilterUIType en FilterRow permitirá el filtrado de registros en la interfaz de usuario donde el usuario puede especificar criterios de filtrado para filtrar registros. Se ocultarán los registros que no coincidan con los criterios de filtro especificados.

    El filtrado también se expone en la interfaz de usuario de opciones de columna al pasar el cursor sobre un campo y hacer clic en los puntos suspensivos verticales. Esto se logra al configurar FilterUIType en ColumnOptions. Consulte el ejemplo a continuación.

    Filter Expressions

    En el siguiente ejemplo, la colección FilterExpressions de la cuadrícula de datos se actualiza para incorporar FilterExpressions personalizados.

    Filter Operators

    A las columnas se les puede asignar un IgbFilterOperand personalizado que aparecerá en el menú desplegable de operandos de la fila de filtro. Los requisitos clave son garantizar que al operando se le asigne un DisplayName y utilizar el evento FilterRequested en el operando para que pueda aplicar un FilterFactory, que es responsable de asignar el operador y el valor por el que desea filtrar la columna, por ejemplo, StartsWith con valor. de "A".

    Además, la propiedad FilterLogicalOperator de la cuadrícula es responsable de indicar cómo se combinan los filtros entre campos:

    • and operador lógico. Para que una coincidencia sea exitosa, deben cumplirse todas las condiciones.
    • or operador lógico. Para que una coincidencia sea exitosa, debe cumplirse al menos una de las condiciones.

    Dado que los operandos se aplican a la columna, se pueden agregar de varias maneras, como en línea, en código o en una clase separada. Cada enfoque se demuestra en el siguiente ejemplo.

    API References