React Tamaño de cuadrícula jerárquica

The Ignite UI for React Size feature in React Hierarchical Grid allows users to control the spacing and layout of data within the IgrHierarchicalGrid. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:

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

React Hierarchical Grid Size Example

Usage

Como puedes ver en la demo anterior, ofreceIgrHierarchicalGrid tres opciones de tamaño: pequeño, mediano y grande. El fragmento de código a continuación muestra cómo establecer--ig-size una clase en línea o parte de una clase CSS:

.gridSize {
    --ig-size: var(--ig-size-medium);
}

<IgrHierarchicalGrid className="gridSize"></IgrHierarchicalGrid>

Y ahora veamos en detalle cómo cada opción refleja elIgrHierarchicalGrid componente. Cuando cambias entre diferentes opciones de tamaño, la altura de cadaIgrHierarchicalGrid elemento y los rellenos correspondientes se modifican. Además, si quieres aplicar columnaswidth personalizadas, por favor considera que debe ser mayor que la suma del relleno izquierdo y derecho:

grande: este es el tamaño por defectoIgrHierarchicalGrid con la intensidad más baja y la altura de fila iguales a.50px Los acolchones izquierdo y derecho son24px; La columnawidth mínima es80px;
Media: es el tamaño medio intenso con40px altura de fila. Los acolchones izquierdo y derecho son16px; La columnawidth mínima es64px;
Pequeña: es la talla con mayor intensidad y32px altura de fila. Los acolchones izquierdo y derecho son12px; La columnawidth mínima es56px;

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

Ahora continuemos con nuestra muestra y veamos en acción cómo se aplica.--ig-size Primero añadimos un botón que nos ayudará a cambiar entre cada tamaño:

<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>

Ahora podemos agregar el marcado.

<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, proporcionemos la lógica necesaria para aplicar realmente el tamaño:

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})`);
}

Otra opción queIgrHierarchicalGrid te permite cambiar la altura de las filasIgrHierarchicalGrid es la propiedadrowHeight. Así que veamos en acción cómo esta propiedad afecta alIgrHierarchicalGrid diseño junto con el--ig-size.

Por favor tenga en cuenta lo siguiente:

--ig-sizeLa variable CSS no tendrá impacto en la altura de la fila si serowHeight especifica.
--ig-size will affect all of the rest elements in the Hierarchical Grid, as it has been described above.

Ahora podemos ampliar nuestra muestra y añadirrowHeight propiedades a:IgrHierarchicalGrid

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

API References

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