React Tamanho da grade hierárquica

    O recurso Tamanho Ignite UI for React em React Grade Hierárquica permite que os usuários controlem o espaçamento e o layout dos dados dentro do IgrHierarchicalGrid. Ao alterar--ig-size, você pode melhorar significativamente a experiência do usuário ao interagir com grandes quantidades de conteúdo. Eles podem escolher entre três opções de tamanho:

    • --ig-size-large
    • --ig-size-medium
    • --ig-size-small

    React Hierarchical Grid Size Example

    Usage

    Como você pode ver na demonstração acima, o fornece IgrHierarchicalGrid três opções de tamanho: pequeno, médio e grande. O trecho de código abaixo mostra como definir--ig-size inline ou parte de uma classe CSS:

    .gridSize {
        --ig-size: var(--ig-size-medium);
    }
    
    <IgrHierarchicalGrid className="gridSize"></IgrHierarchicalGrid>
    

    E agora vamos ver em detalhes como cada opção reflete no IgrHierarchicalGrid componente. Quando você alterna entre diferentes opções de tamanho, a altura de cada IgrHierarchicalGrid elemento e os preenchimentos correspondentes serão alterados. Além disso, se você quiser aplicar uma coluna width personalizada, considere o fato de que ela deve ser maior que a soma do preenchimento esquerdo e direito.

    • grande- este é o tamanho padrão IgrHierarchicalGrid com o menor intenso e altura de linha igual a 50px. Os preenchimentos esquerdo e direito são 24px; A coluna width mínima é 80px;
    • Médio- Este é o tamanho médio intenso com 40px altura da linha. Os preenchimentos esquerdo e direito são 16px; A coluna width mínima é 64px;
    • Pequeno- Este é o tamanho com maior intensidade e 32px altura de linha. Os preenchimentos esquerdo e direito são 12px; A coluna width mínima é 56px;

    [!Note] Please keep in mind that currently you can not override any of the sizes.

    Vamos agora continuar com nosso exemplo e ver em ação como o--ig-size é aplicado. Vamos primeiro adicionar um botão que nos ajudará a alternar entre cada tamanho:

    <IgrPropertyEditorPanel
        ref={propertyEditorRef}
        componentRenderer={renderer}
        target={grid}
        descriptionType="WebHierarchicalGrid"
        isHorizontal={true}
        isWrappingEnabled={true}>
        <IgrPropertyEditorPropertyDescription
            name="SizeEditor"
            label="Grid Size:"
            valueType="EnumValue"
            dropDownNames={["Small", "Medium", "Large"]}
            dropDownValues={["Small", "Medium", "Large"]}
            changed={webGridSetGridSize}>
        </IgrPropertyEditorPropertyDescription>
    </IgrPropertyEditorPanel>
    

    Agora podemos adicionar a marcação.

    <IgrHierarchicalGrid
        autoGenerate={false}
        ref={grid}
        allowFiltering={true}>
        <IgrColumn field="CustomerID" dataType="string"></IgrColumn>
        <IgrColumn field="CompanyName" dataType="string"></IgrColumn>
        <IgrColumn field="ContactName" dataType="string"></IgrColumn>
        <IgrColumn field="Address" dataType="string"></IgrColumn>
        <IgrColumn field="City" dataType="string"></IgrColumn>
        <IgrColumn field="PostalCode" dataType="string"></IgrColumn>
        <IgrColumn field="Country" dataType="string"></IgrColumn>
        <IgrColumn field="Phone" dataType="string"></IgrColumn>
        <IgrColumn field="Fax" dataType="string"></IgrColumn>
    
        <IgrRowIsland childDataKey="Orders" autoGenerate={false}>
            <IgrColumn field="OrderID" dataType="number"></IgrColumn>
            <IgrColumn field="EmployeeID" dataType="number"></IgrColumn>
            <IgrColumn field="OrderDate" dataType="date"></IgrColumn>
            <IgrColumn field="RequiredDate" dataType="date"></IgrColumn>
            <IgrColumn field="ShippedDate" dataType="date"></IgrColumn>
            <IgrColumn field="ShipVia" dataType="number"></IgrColumn>
            <IgrColumn field="Freight" dataType="number"></IgrColumn>
            <IgrColumn field="ShipName" dataType="string"></IgrColumn>
            <IgrColumn field="ShipAddress" dataType="string"></IgrColumn>
            <IgrColumn field="ShipCity" dataType="string"></IgrColumn>
            <IgrColumn field="ShipPostalCode" dataType="string"></IgrColumn>
            <IgrColumn field="ShipCountry" dataType="string"></IgrColumn>
            
            <IgrRowIsland childDataKey="OrderDetails" autoGenerate={false}>
                <IgrColumn field="ProductID" dataType="number"></IgrColumn>
                <IgrColumn field="UnitPrice" dataType="number"></IgrColumn>
                <IgrColumn field="Quantity" dataType="number"></IgrColumn>
                <IgrColumn field="Discount" dataType="number"></IgrColumn>
            </IgrRowIsland>
        </IgrRowIsland>
    </IgrHierarchicalGrid>
    

    Finalmente, vamos fornecer a lógica necessária para realmente aplicar o tamanho:

    private propertyEditor: IgrPropertyEditorPanel
    private propertyEditorRef(r: IgrPropertyEditorPanel) {
            this.propertyEditor = r;
            this.setState({});
    }
    private sizeEditor: IgrPropertyEditorPropertyDescription
    private grid: IgrHierarchicalGrid
    private gridRef(r: IgrHierarchicalGrid) {
        this.grid = r;
        this.setState({});
    }
    
    constructor(props: any) {
        super(props);
    
        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
        this.gridRef = this.gridRef.bind(this);
    }
    
    private _componentRenderer: ComponentRenderer = null;
      public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
          this._componentRenderer = new ComponentRenderer();
          var context = this._componentRenderer.context;
          PropertyEditorPanelDescriptionModule.register(context);
          WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }
    
    public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var newVal = (args.newValue as string).toLowerCase();
        var grid = document.getElementById("grid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }
    

    Outra opção que IgrHierarchicalGrid fornece para você, para poder alterar a altura das linhas no IgrHierarchicalGrid, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o IgrHierarchicalGrid layout junto com o--ig-size.

    Lembre-se do seguinte:

    • --ig-size A variável CSS não terá impacto na altura da linha se for rowHeight especificada.
    • --ig-size afetará todos os demais elementos da Grade Hierárquica, conforme descrito acima.

    Agora podemos estender nosso exemplo e adicionar rowHeight propriedade ao IgrHierarchicalGrid:

    <IgrHierarchicalGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrHierarchicalGrid>
    

    API References

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.