Reordenación y movimiento de columnas de cuadrícula de árbol

    La función de movimiento de columnas de la cuadrícula de árbol Blazor en Ignite UI for Blazor permite reordenar las columnas de manera rápida y sencilla. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados en otra posición mediante gestos táctiles o del mouse. En la cuadrícula de árbol Blazor, puede habilitar el movimiento de columnas para columnas fijadas y desfijadas, y también para encabezados de varias columnas.

    Solo se permite reordenar entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Se permite moverse entre columnas/grupos de columnas, si son columnas de nivel superior.

    Si el encabezado de una columna tiene una plantilla y el movimiento de columnas está habilitado o la columna correspondiente es agrupable, entonces los elementos con plantilla deben tener el atributo arrastrable establecido en falso.

    Si el área fijada excede su ancho máximo permitido (80% del ancho total de IgbTreeGrid), una pista visual notifica al usuario final que la operación de colocación está prohibida y que la fijación no es posible. Esto significa que no podrá colocar una columna en el área fijada.

        public RenderFragment<IgbColumnTemplateContext> headerTemplate => (context) =>
        {
            return @<IgbIcon Collection="fas" IconName="fa-thumbtack" draggable="false" @onclick="() => onClick()"></IgbIcon>;
        };
    razor

    Ejemplo de descripción general del movimiento de columnas de cuadrícula de árbol Blazor

    EXAMPLE
    DATA
    MODULES
    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.

    Descripción general

    La función de movimiento de columnas está habilitada a nivel de cuadrícula, lo que significa que IgbTreeGrid podría tener columnas móviles o inamovibles. Esto se hace a través de la entrada Moving de IgbTreeGrid.

    API

    Además de la funcionalidad de arrastrar y soltar, la función Mover columnas también proporciona métodos API para permitir mover una columna/reordenar columnas mediante programación:

    MoveColumn: mueve una columna antes o después de otra columna (un destino). El primer parámetro es la columna que se va a mover y el segundo parámetro es la columna de destino. También acepta un tercer parámetro opcional Position (que representa un valor DropPosition), que determina si se coloca la columna antes o después de la columna de destino.

        public async void HandleClick()
        {
            IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
            IgbColumn Col2 = await this.grid.GetColumnByVisibleIndexAsync(1);
            this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
        }
    razor

    Move: mueve una columna a un índice visible especificado. Si el parámetro de índice pasado no es válido (es negativo o excede el número de columnas), o si no se permite que la columna se mueva a este índice (si está dentro de otro grupo), no se realiza ninguna operación.

        public async void HandleClick()
        {
            IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
            this.Col1.Move(3);
        }
    razor

    Tenga en cuenta que cuando se utiliza la función de movimiento de columnas, se emitirá el evento ColumnMovingEnd si la operación se realizó correctamente. Tenga en cuenta también que, en comparación con la funcionalidad de arrastrar y soltar, el uso de la función de movimiento de columnas no requiere establecer la propiedad Moving en verdadero.

    Eventos

    Hay varios eventos relacionados con el movimiento de la columna para proporcionar un medio para aprovechar las operaciones de arrastrar y soltar de las columnas. Estos son ColumnMovingStart, ColumnMoving y ColumnMovingEnd.

    Puede suscribirse al evento ColumnMovingEnd de IgbTreeGrid para implementar alguna lógica personalizada cuando una columna se coloca en una nueva posición. Por ejemplo, puede cancelar la eliminación de la columna Categoría después de la columna Cambio en el año (%) en el siguiente fragmento de código.

        <IgbTreeGrid ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%"
                 AllowFiltering=true
                 FilterMode="FilterMode.ExcelStyleFilter"
                 AutoGenerate=true
                 Data=northwindEmployees
                 Moving="true"
                 ColumnMovingEndScript='onColumnMovingEnd'>
        </IgbTreeGrid>
    razor
    igRegisterScript("onColumnMovingEnd", (event) => {
        if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
            event.detail.cancel = true;
        }
    }, false);
    razor

    Estilo

    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:

    <IgbTreeGrid class="grid"></IgbTreeGrid>
    razor

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
        --ig-grid-ghost-header-text-color: #f4d45c;
        --ig-grid-ghost-header-background: #ad9d9d;
        --ig-grid-ghost-header-icon-color: #f4d45c;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Referencias de API

    Recursos adicionales

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