Cuadrícula Blazor con combos en cascada

    La función de edición de la cuadrícula ofrece la posibilidad de utilizar componentes de cuadro combinado en cascada. Al seleccionar el valor en cualquier IgbCombo anterior, los usuarios recibirán solo los datos que sean relevantes para su selección en el siguiente componente de cuadro combinado Blazor.

    Descripción general de muestra de cuadrícula Angular con combinaciones en cascada

    El siguiente ejemplo demuestra cómo funciona IgbGrid con componentes anidados de Cascading IgbCombo.

    EXAMPLE
    MODULES
    DATA
    RAZOR
    JS
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Configuración

    In order enable column editing, make sure editable property is set to true.

    Una vez que la edición de columnas esté habilitada, puede comenzar agregando su IgbCombo. Tenga en cuenta que aquí para tener solo una selección disponible, deberá utilizar la propiedad singleSelect.

    Para comenzar con IgbCombo, primero debe importarlo:

    builder.Services.AddIgniteUIBlazor(
        typeof(IgbGridModule),
        typeof(IgbComboModule)
    );
    razor

    Luego deberías definir la plantilla de columna con el combo:

    <IgbColumn Field="Country" Header="Country" BodyTemplate="WebGridCountryDropDownTemplate"></IgbColumn>
    
    @code{
        public static RenderFragment<IgbCellTemplateContext> WebGridCountryDropDownTemplate = (context) =>
        {
            var id = "country_" + context.Cell.Id.RowID;
            return @<IgbCombo id="@id" Placeholder="Choose Country..." SingleSelect=true ValueKey="Country" DisplayKey="Country" ChangeScript="CountryChange"></IgbCombo>;
        };
    }
    
    razor
    • displayKey: obligatorio para matrices de objetos: especifica qué propiedad se utilizará para el texto de los elementos. Si no se especifica ningún valor para displayKey, el combo utilizará la valueKey especificada (si corresponde).

    Para manejar el cambio de selección, necesitamos el evento change. Los argumentos del evento emitido contienen información sobre la selección anterior al cambio, la selección actual y los elementos que se agregaron o eliminaron. Por lo tanto, filtrará los valores en función de la selección del combo anterior.

    //In Javascript
    igRegisterScript("CountryChange", (ctx) => {
        const value = e.detail.newValue;
        cell.update(value);
        const nextCombo = document.getElementById("region_" + cell.id.rowID);
        const nextProgress = document.getElementById("progress_region_" + cell.id.rowID);
        if (value === "") {
            nextCombo.deselect(nextCombo.value);
            nextCombo.disabled = true;
            nextCombo.data = [];
        } else {
            nextProgress.style.display = "block";
            setTimeout(() => {
                nextProgress.style.display = "none";
                nextCombo.disabled = false;
                nextCombo.data = this.regions.filter(x => x.Country === value);
            }, 2000);
        }
    });
    razor

    Y, por último, agregar IgbLinearProgress, que se requiere al cargar la lista de datos.

        public static RenderFragment<IgbCellTemplateContext> WebGridRegionDropDownTemplate = (context) =>
        {
            var id = "region_" + context.Cell.Id.RowID;
            return @<div style="display:flex;flex-direction:column;"><IgbCombo id="@id" Placeholder="Choose Region..." SingleSelect=true ValueKey="Region" DisplayKey="Region" ChangeScript="RegionChange"></IgbCombo><IgbLinearProgress Indeterminate=true></IgbLinearProgress></div>;
        };
    razor

    Problemas conocidos y limitaciones

    Limitación Descripción
    La lista desplegable combinada puede ocultarse detrás de otros elementos de la interfaz de usuario. Debido al orden de apilamiento de los elementos en la cuadrícula, el menú desplegable combinado puede ocultarse detrás de otros elementos como encabezados, pies de página, etc.

    Blazor Miembros de la API de Grid