Filtrado avanzado Blazor Grid

    La Ignite UI for Blazor en Blazor Grid le permite manipular datos proporcionándole un cuadro de diálogo en el que puede crear diferentes grupos con condiciones de filtrado en todas las columnas de IgbGrid.

    Blazor Grid Advanced Filtering Example

    Interaction

    Para abrir el cuadro de diálogo de filtrado avanzado, se debe hacer clic en el botón Filtrado avanzado en la barra de herramientas de la cuadrícula. Si no se aplica ningún filtro avanzado, debe comenzar creando un grupo de condiciones de filtrado vinculadas con AND u OR. Después de eso, puede agregar condiciones de filtrado o subgrupos.

    Para agregar una condición de filtrado, debe seleccionar cualquiera de las columnas Filterable, un operando basado en la columna DataType y un valor si el operando no es unario. Una vez confirmada la condición, aparece un chip con la información de la condición. Al pasar el cursor sobre el chip o hacer clic en él, tiene la opción de modificarlo o agregar otra condición o grupo inmediatamente después.

    Si selecciona más de un chip de condición de filtrado, aparece un menú contextual con opciones para crear un grupo o eliminar los filtros. Si elige crear un grupo con las condiciones seleccionadas, el grupo recién creado aparecerá donde se colocó la condición seleccionada más alta.

    Para seleccionar un grupo, también puede hacer clic en su línea vertical, que se colorea según la condición de vinculación AND u OR. Si se selecciona un solo grupo, obtiene un menú contextual con opciones para cambiar su lógica de filtrado, desagruparlo o eliminarlo.

    Para filtrar los datos una vez que esté listo para crear las condiciones y grupos de filtrado, debe hacer clic en el botón Aplicar. Si ha modificado el filtro avanzado, pero no desea conservar los cambios, debe hacer clic en el botón Cancelar. También puede borrar el filtro avanzado haciendo clic en el botón Borrar filtro.

    Usage

    Para habilitar el filtrado avanzado, la propiedad de entrada AllowAdvancedFiltering debe establecerse en verdadero.

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

    El filtrado avanzado genera un FilteringExpressionsTree que se almacena en la propiedad de entrada AdvancedFilteringExpressionsTree. Puede utilizar la propiedad AdvancedFilteringExpressionsTree para establecer un estado inicial del filtrado avanzado.

    En caso de que no desee mostrar la barra de herramientas IgbGrid, puede utilizar los métodos OpenAdvancedFilteringDialog y CloseAdvancedFilteringDialog para abrir y cerrar el cuadro de diálogo de filtrado avanzado mediante programación.

    [!Note] You can enable both the QuickFilter/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.

    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 establezca las propiedades CSS relacionadas con esta clase:

    .grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-background-or: #d83434;
}

    Demo

    API References

    Additional Resources

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