Blazor Tree Grid Column Pinning

    La función de fijación de columnas Ignite UI for Blazor en Blazor Tree Grid permite a los desarrolladores fijar columnas específicas en el orden deseado, lo que garantiza la visibilidad en todo momento, incluso cuando los usuarios se desplazan horizontalmente por IgbGrid. Hay una interfaz de usuario integrada para la fijación de columnas, a la que se puede acceder a través de la barra de herramientas Blazor Tree Grid. Además, los desarrolladores tienen la flexibilidad de crear una interfaz de usuario personalizada que cambia el estado de fijación de las columnas.

    Ejemplo de fijación de columnas en cuadrícula de árbol Blazor

    Este ejemplo demuestra cómo puede anclar una columna o varias columnas al lado izquierdo o derecho de IgbTreeGrid.

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

    API de fijación de columnas

    La fijación de columnas se controla a través de la propiedad Pinned de IgbColumn. Las columnas fijadas se representan en el lado izquierdo de IgbTreeGrid de forma predeterminada y permanecen fijas mediante el desplazamiento horizontal de las columnas no fijadas en el cuerpo IgbTreeGrid.

    También puede utilizar los métodos PinColumn o UnpinColumn de IgbTreeGrid para anclar o desanclar columnas por su nombre IgbTreeGrid campo:

    Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la columna ya se encuentra en el estado deseado.

    Una columna está fijada a la derecha de la columna fijada más a la derecha. Se puede cambiar el orden de las columnas fijadas suscribiéndose al evento ColumnPin y cambiando la propiedad InsertAtIndex de los argumentos del evento al índice de posición deseado.

    Una columna se ancla a la derecha de la columna anclada situada más a la derecha. Para cambiar el orden de las columnas ancladas, suscribiéndose al evento y proporcionando una función de JavaScript para cambiar la InsertAtIndex propiedad de los argumentos del evento al ColumnPinScript índice de posición deseado.

    <IgbTreeGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>
    
    
    //In JavaScript
    function onColumnPin(e) {
        if (e.detail.column.field == "Country") {
            e.detail.insertAtIndex = 0;
        }
    }
    
    igRegisterScript("onColumnPin", onColumnPin, false);
    razor

    Posición de fijación

    Puede cambiar la posición de fijación de la columna a través de la opción de configuración Pinning. Le permite establecer la posición de las columnas en Inicio o Fin. Cuando se establece en Fin, las columnas se representan al final de la cuadrícula, después de las columnas sin fijar. Las columnas no fijadas se pueden desplazar horizontalmente, mientras que las columnas fijadas permanecen fijas a la derecha.

    <IgbTreeGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbTreeGrid>
    
    @code {
        private IgbPinningConfig pinningConfig = new() {
            Columns = ColumnPinningPosition.End
        };
    }
    razor

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    IU de fijación de columnas personalizada

    Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las columnas a través de la API relacionada.

    Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular.

    Esto se puede hacer creando una plantilla de encabezado para las columnas con un ícono personalizado.

    <IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Data="EmployeesFlatData" PrimaryKey="ID" ForeignKey="ParentID">
        <IgbColumn Field="Name" DataType="String" Pinned="true"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>
    
        <IgbColumn Field="Title" DataType="String" Pinned="true"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column2" @ref="column2"></IgbColumn>
            
        <IgbColumn Field="Phone" DataType="String"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column3" @ref="column3"></IgbColumn>
                
        <IgbColumn Field="Age" DataType="Number"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column4" @ref="column4"></IgbColumn>
                
        <IgbColumn Field="HireDate" DataType="Date"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column5" @ref="column5"></IgbColumn>
                
        <IgbColumn Field="OnPTO" DataType="Boolean"
        HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
    </IgbTreeGrid> 
    
    
    // In JavaScript
    
    igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
        var html = window.igTemplating.html;
        window.toggleColumnPin = function toggleColumnPin(field) {
            var grid = document.getElementsByTagName("igc-tree-grid")[0];
            var col = grid.getColumnByName(field);
            col.pinned = !col.pinned;
            grid.markForCheck();
        }
        return html`<div>
        <span style="float:left">${ctx.column.field}</span>
        <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
    </div>`;
    }, false);
    razor

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Limitaciones de fijación

    • Establecer los anchos de las columnas en porcentaje (%) explícitamente hace que el cuerpo IgbTreeGrid y el contenido del encabezado estén desalineados cuando hay columnas fijadas. Para que la fijación de columnas funcione correctamente, los anchos de las columnas deben estar en píxeles (px) o ser asignados automáticamente por IgbTreeGrid.

    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 ID para la cuadrícula:

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

    Luego establezca las propiedades CSS relacionadas con esta clase:

    #grid {
        --ig-grid-pinned-border-width: 5px;
        --ig-grid-pinned-border-color: #FFCD0F;
        --ig-grid-pinned-border-style: double;
        --ig-grid-cell-active-border-color: #FFCD0F;
    }
    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.