Fijación de filas en cuadrículas jerárquicas React
La función de fijación de filas Ignite UI for React en React cuadrícula jerárquica le permite anclar una o varias filas en la parte superior o inferior de la cuadrícula. La fijación de filas permite a los usuarios finales anclar filas en un orden determinado, duplicándolas en un área especial que siempre está visible incluso cuando se desplazan IgrHierarchicalGrid
verticalmente. La cuadrícula jerárquica de React tiene una interfaz de usuario de anclaje de fila integrada, que se habilita mediante la inicialización de un IgrActionStrip
componente en el contexto de la cuadrícula jerárquica. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de la chincheta de las filas a través de la API de fijación de filas.
Ejemplo de fijación de filas en cuadrícula jerárquica React
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrActionStrip, IgrGridPinningActions, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import SingersData from './SingersData.json' ;
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
this .propertyEditorHierarchicalGrid = r;
this .setState({});
}
private rowPinningEditor: IgrPropertyEditorPropertyDescription
private grid: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
this .grid = r;
this .setState({});
}
private _pinningConfig1: IgrPinningConfig | null = null ;
public get pinningConfig1(): IgrPinningConfig {
if (this ._pinningConfig1 == null )
{
var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig1.rows = RowPinningPosition.Top;
pinningConfig1.columns = ColumnPinningPosition.End;
this ._pinningConfig1 = pinningConfig1;
}
return this ._pinningConfig1;
}
private actionStrip1: IgrActionStrip
private rowIsland1: IgrRowIsland
private _pinningConfig2: IgrPinningConfig | null = null ;
public get pinningConfig2(): IgrPinningConfig {
if (this ._pinningConfig2 == null )
{
var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig2.rows = RowPinningPosition.Top;
pinningConfig2.columns = ColumnPinningPosition.End;
this ._pinningConfig2 = pinningConfig2;
}
return this ._pinningConfig2;
}
private actionStrip2: IgrActionStrip
constructor (props: any ) {
super (props);
this .propertyEditorHierarchicalGridRef = this .propertyEditorHierarchicalGridRef.bind(this );
this .webHierarchicalGridChangePinningConfig = this .webHierarchicalGridChangePinningConfig.bind(this );
this .gridRef = this .gridRef.bind(this );
this .webHierarchicalGridPinRowOnRendered = this .webHierarchicalGridPinRowOnRendered.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
ref ={this.propertyEditorHierarchicalGridRef}
componentRenderer ={this.renderer}
target ={this.grid}
descriptionType ="WebHierarchicalGrid"
isHorizontal ="true"
isWrappingEnabled ="true" >
<IgrPropertyEditorPropertyDescription
name ="rowPinningEditor"
label ="Row Pinning toggle"
valueType ="EnumValue"
dropDownNames ={[ "Top ", "Bottom "]}
dropDownValues ={[ "Top ", "Bottom "]}
changed ={this.webHierarchicalGridChangePinningConfig} >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="Photo"
id ="grid"
ref ={this.gridRef}
cellSelection ="None"
rendered ={this.webHierarchicalGridPinRowOnRendered}
pinning ={this.pinningConfig1} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String" >
</IgrColumn >
<IgrActionStrip
name ="actionStrip1" >
<IgrGridPinningActions
>
</IgrGridPinningActions >
</IgrActionStrip >
<IgrRowIsland
childDataKey ="Albums"
primaryKey ="Album"
cellSelection ="None"
autoGenerate ="false"
pinning ={this.pinningConfig2}
name ="rowIsland1" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String" >
</IgrColumn >
<IgrActionStrip
name ="actionStrip2" >
<IgrGridPinningActions
>
</IgrGridPinningActions >
</IgrActionStrip >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
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 webHierarchicalGridChangePinningConfig(sender: any , args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newPinningPosition = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
var grid = this .grid;
grid.pinning.rows = newPinningPosition;
var rowIsland1 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Albums' );
rowIsland1[0 ].pinning.rows = newPinningPosition;
var rowIsland2 = rowIsland1[0 ].contentChildLayoutList.filter(e => e.childDataKey == 'Songs' );
if (rowIsland2[0 ]) {
rowIsland2[0 ].pinning.rows = newPinningPosition;
}
var rowIsland3 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Tours' );
if (rowIsland3[0 ]) {
rowIsland3[0 ].pinning.rows = newPinningPosition
}
}
public webHierarchicalGridPinRowOnRendered(): void {
var hierarchicalGrid = this .grid;
hierarchicalGrid.pinRow(hierarchicalGrid.data[0 ].Photo);
hierarchicalGrid.pinRow(hierarchicalGrid.data[1 ].Photo);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
IU de fijación de filas
La interfaz de usuario integrada para fijar filas se habilita agregando un componente IgrActionStrip
con el componente IgrGridPinningActions
. La franja de acción se muestra automáticamente al pasar el cursor sobre una fila y mostrará un ícono de botón para fijar o quitar según el estado de la fila para la que se muestra. También se muestra una acción adicional que permite desplazar la copia de la fila fijada a la vista para cada fila fijada.
<IgrHierarchicalGrid >
<IgrColumn field ="Country" header ="Country" > </IgrColumn >
<IgrActionStrip key ="actionStrip" >
<IgrGridPinningActions key ="pinningActions" > </IgrGridPinningActions >
<IgrGridEditingActions key ="editingActions" > </IgrGridEditingActions >
</IgrActionStrip >
</IgrHierarchicalGrid >
tsx
API de fijación de filas
El anclaje de filas se controla a través de la pinned
entrada de la Row
. Las filas ancladas se representan en la parte superior de la IgrHierarchicalGrid
forma predeterminada y permanecen fijas a través del desplazamiento vertical de las filas no ancladas en el IgrHierarchicalGrid
cuerpo.
gridRef.current.getRowByIndex(0 ).pinned = true ;
tsx
También puede utilizar los IgrHierarchicalGrid
pinRow
métodos o unpinRow
de los para anclar o desanclar registros por su ID:
gridRef.current.pinRow('ALFKI' );
gridRef.current.unpinRow('ALFKI' );
tsx
Tenga en cuenta que el ID de fila es el valor de la clave principal, definido por la primaryKey
de la cuadrícula o la instancia de registro misma. 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 fila ya se encuentra en el estado deseado.
Se fija una fila debajo de la última fila fijada. Se puede cambiar el orden de las filas fijadas suscribiéndose al evento RowPinning
y cambiando la propiedad InsertAtIndex
de los argumentos del evento al índice de posición deseado.
function rowPinning(grid: IgrGridBaseDirective, event: IgrPinRowEventArgs ) {
event.detail.insertAtIndex = 0 ;
}
<IgrHierarchicalGrid autoGenerate ="true" rowPinning ={rowPinning} >
</IgrHierarchicalGrid >
tsx
Posición de fijación
Puede cambiar la posición de fijación de filas a través de la opción de configuración pinning
. Le permite establecer la posición del área del pin en Superior o Inferior. Cuando se establece en Inferior, las filas fijadas se representan en la parte inferior de la cuadrícula, después de las filas no fijadas. Las filas no fijadas se pueden desplazar verticalmente, mientras que las filas fijadas permanecen fijas en la parte inferior.
<IgrHierarchicalGrid id ="dataGrid" autoGenerate ="true" >
</IgrHierarchicalGrid >
var grid = document.getElementById("dataGrid" ) as IgrHierarchicalGrid;
grid.pinning = { rows: RowPinningPosition.Bottom };
tsx
IU de fijación de filas personalizada
Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las filas a través de la API relacionada.
A través de una columna adicional con icono
Digamos que en lugar de una franja de acción le gustaría mostrar un ícono de pin en cada fila, permitiendo al usuario final hacer clic y cambiar el estado del pin de una fila en particular. Esto se puede hacer agregando una columna adicional con una plantilla de celda que contenga el ícono personalizado.
function cellPinCellTemplate(ctx: IgrCellTemplateContext) {
const row = ctx.dataContext.cell.row;
return (
<>
<span onPointerDown ={(e: any ) => toggleRowPin(row)}>📌</span >
</>
);
}
<IgrHierarchicalGrid primaryKey ="ID" autoGenerate ="false" >
<IgrColumn width ="70px" bodyTemplate ={cellPinCellTemplate} >
</IgrColumn >
<IgrRowIsland childDataKey ="Orders" autoGenerate ="true" > </IgrRowIsland >
</IgrHierarchicalGrid >
tsx
Al hacer clic en el icono personalizado, el estado del pin de la fila relacionada se puede cambiar utilizando los métodos API de la fila.
function toggleRowPin(row: IgrRowType) {
row.pinned = !row.pinned;
}
tsx
Manifestación
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts" ;
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from "@infragistics/igniteui-react-core" ;
import SingersData from './SingersData.json' ;
import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from "@infragistics/igniteui-react-layouts" ;
import { IgrCellTemplateContext, IgrRowType } from "@infragistics/igniteui-react-grids" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
import 'igniteui-webcomponents/themes/light/bootstrap.css' ;
const mods : any [] = [
IgrPropertyEditorPanelModule,
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private propertyEditorHierarchicalGrid: IgrPropertyEditorPanel
private propertyEditorHierarchicalGridRef(r: IgrPropertyEditorPanel) {
this .propertyEditorHierarchicalGrid = r;
this .setState({});
}
private rowPinningEditor: IgrPropertyEditorPropertyDescription
private grid: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
this .grid = r;
this .setState({});
}
private _pinningConfig1: IgrPinningConfig | null = null ;
public get pinningConfig1(): IgrPinningConfig {
if (this ._pinningConfig1 == null )
{
var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig1.rows = RowPinningPosition.Top;
pinningConfig1.columns = ColumnPinningPosition.End;
this ._pinningConfig1 = pinningConfig1;
}
return this ._pinningConfig1;
}
private column1: IgrColumn
private rowIsland1: IgrRowIsland
private _pinningConfig2: IgrPinningConfig | null = null ;
public get pinningConfig2(): IgrPinningConfig {
if (this ._pinningConfig2 == null )
{
var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig2.rows = RowPinningPosition.Top;
pinningConfig2.columns = ColumnPinningPosition.End;
this ._pinningConfig2 = pinningConfig2;
}
return this ._pinningConfig2;
}
private column2: IgrColumn
private rowIsland2: IgrRowIsland
private _pinningConfig3: IgrPinningConfig | null = null ;
public get pinningConfig3(): IgrPinningConfig {
if (this ._pinningConfig3 == null )
{
var pinningConfig3: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig3.rows = RowPinningPosition.Top;
pinningConfig3.columns = ColumnPinningPosition.End;
this ._pinningConfig3 = pinningConfig3;
}
return this ._pinningConfig3;
}
private column3: IgrColumn
private rowIsland3: IgrRowIsland
private _pinningConfig4: IgrPinningConfig | null = null ;
public get pinningConfig4(): IgrPinningConfig {
if (this ._pinningConfig4 == null )
{
var pinningConfig4: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig4.rows = RowPinningPosition.Top;
pinningConfig4.columns = ColumnPinningPosition.End;
this ._pinningConfig4 = pinningConfig4;
}
return this ._pinningConfig4;
}
private column4: IgrColumn
constructor (props: any ) {
super (props);
this .propertyEditorHierarchicalGridRef = this .propertyEditorHierarchicalGridRef.bind(this );
this .webHierarchicalGridChangePinningConfig = this .webHierarchicalGridChangePinningConfig.bind(this );
this .gridRef = this .gridRef.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="options vertical" >
<IgrPropertyEditorPanel
ref ={this.propertyEditorHierarchicalGridRef}
componentRenderer ={this.renderer}
target ={this.grid}
descriptionType ="WebHierarchicalGrid"
isHorizontal ="true"
isWrappingEnabled ="true" >
<IgrPropertyEditorPropertyDescription
name ="rowPinningEditor"
label ="Row Pinning toggle"
valueType ="EnumValue"
dropDownNames ={[ "Top ", "Bottom "]}
dropDownValues ={[ "Top ", "Bottom "]}
changed ={this.webHierarchicalGridChangePinningConfig} >
</IgrPropertyEditorPropertyDescription >
</IgrPropertyEditorPanel >
</div >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="Photo"
id ="grid"
ref ={this.gridRef}
cellSelection ="None"
pinning ={this.pinningConfig1} >
<IgrColumn
width ="70px"
filterable ="false"
pinned ="true"
bodyTemplate ={this.webHierarchicalGridRowPinCellTemplate}
name ="column1" >
</IgrColumn >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
primaryKey ="Album"
cellSelection ="None"
pinning ={this.pinningConfig2}
autoGenerate ="false"
name ="rowIsland1" >
<IgrColumn
width ="70px"
filterable ="false"
pinned ="true"
bodyTemplate ={this.webHierarchicalGridRowPinCellTemplate}
name ="column2" >
</IgrColumn >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
primaryKey ="Number"
cellSelection ="None"
pinning ={this.pinningConfig3}
autoGenerate ="false"
name ="rowIsland2" >
<IgrColumn
width ="70px"
filterable ="false"
pinned ="true"
bodyTemplate ={this.webHierarchicalGridRowPinCellTemplate}
name ="column3" >
</IgrColumn >
<IgrColumn
field ="Number"
header ="No."
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
primaryKey ="Tour"
cellSelection ="None"
pinning ={this.pinningConfig4}
autoGenerate ="false"
name ="rowIsland3" >
<IgrColumn
width ="70px"
filterable ="false"
pinned ="true"
bodyTemplate ={this.webHierarchicalGridRowPinCellTemplate}
name ="column4" >
</IgrColumn >
<IgrColumn
field ="Tour"
header ="Tour"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="StartedOn"
header ="Started on"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Location"
header ="Location"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Headliner"
header ="Headliner"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
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 webHierarchicalGridChangePinningConfig(sender: any , args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newPinningPosition = args.newValue === "Top" ? RowPinningPosition.Top : RowPinningPosition.Bottom;
var grid = this .grid;
grid.pinning.rows = newPinningPosition;
var rowIsland1 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Albums' );
rowIsland1[0 ].pinning.rows = newPinningPosition;
var rowIsland2 = rowIsland1[0 ].contentChildLayoutList.filter(e => e.childDataKey == 'Songs' );
if (rowIsland2[0 ]) {
rowIsland2[0 ].pinning.rows = newPinningPosition;
}
var rowIsland3 = grid.contentChildLayoutList.filter(e => e.childDataKey == 'Tours' );
if (rowIsland3[0 ]) {
rowIsland3[0 ].pinning.rows = newPinningPosition
}
}
public webHierarchicalGridRowPinCellTemplate = (e: {dataContext: IgrCellTemplateContext}) => {
const row = e.dataContext.cell.row;
return (
<span onPointerDown ={(e: any ) => this .toggleRowPin(row)} style={{ cursor: 'pointer' }}>📌</span >
);
}
public toggleRowPin(row: IgrRowType) {
row.pinned = !row.pinned;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Limitaciones de fijación de filas
Solo se pueden anclar registros que existen en la fuente de datos.
El estado de fijación de filas no se exporta a Excel. La cuadrícula se exporta como si no se hubiera aplicado ninguna fijación de filas.
Las copias de filas fijadas en el área desplazable de la cuadrícula son una parte integral de cómo otras características de la cuadrícula logran su funcionalidad en presencia de filas fijadas y, por lo tanto, su creación no se puede deshabilitar ni eliminar.
Como la selección de filas funciona completamente con ID de fila, al seleccionar filas fijadas también se seleccionan sus copias (y viceversa). Además, la selección de rango (por ejemplo, usando Shift + clic) dentro del área fijada funciona de la misma manera que seleccionar un rango de filas dentro del área desplazable. La selección resultante incluye todas las filas intermedias incluso si no están fijadas actualmente. Obtener las filas seleccionadas a través de la API solo devuelve una única instancia de cada registro seleccionado.
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:
<IgrHierarchicalGrid className ="grid" > </IgrHierarchicalGrid >
tsx
Luego configure las propiedades CSS relacionadas para esa clase:
.grid {
--ig-grid-pinned-border-width : 5px ;
--ig-grid-pinned-border-style : double;
--ig-grid-pinned-border-color : #FFCD0F ;
--ig-grid-cell-active-border-color : #FFCD0F ;
}
css
Manifestación
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, ColumnPinningPosition, IgrColumn, IgrActionStrip, IgrGridPinningActions, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
import { IgrGrid } from "@infragistics/igniteui-react-grids" ;
import "@infragistics/igniteui-react-grids/grids/combined" ;
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css" ;
const mods : any [] = [
IgrHierarchicalGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component <any, any> {
private grid: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
this .grid = r;
this .setState({});
}
private _pinningConfig1: IgrPinningConfig | null = null ;
public get pinningConfig1(): IgrPinningConfig {
if (this ._pinningConfig1 == null )
{
var pinningConfig1: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig1.rows = RowPinningPosition.Top;
pinningConfig1.columns = ColumnPinningPosition.End;
this ._pinningConfig1 = pinningConfig1;
}
return this ._pinningConfig1;
}
private actionStrip1: IgrActionStrip
private rowIsland1: IgrRowIsland
private _pinningConfig2: IgrPinningConfig | null = null ;
public get pinningConfig2(): IgrPinningConfig {
if (this ._pinningConfig2 == null )
{
var pinningConfig2: IgrPinningConfig = {} as IgrPinningConfig;
pinningConfig2.rows = RowPinningPosition.Top;
pinningConfig2.columns = ColumnPinningPosition.End;
this ._pinningConfig2 = pinningConfig2;
}
return this ._pinningConfig2;
}
private actionStrip2: IgrActionStrip
constructor (props: any ) {
super (props);
this .gridRef = this .gridRef.bind(this );
this .webHierarchicalGridPinRowOnRendered = this .webHierarchicalGridPinRowOnRendered.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="Photo"
id ="grid"
ref ={this.gridRef}
cellSelection ="None"
rendered ={this.webHierarchicalGridPinRowOnRendered}
pinning ={this.pinningConfig1} >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
minWidth ="115px" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="String" >
</IgrColumn >
<IgrActionStrip
name ="actionStrip1" >
<IgrGridPinningActions
>
</IgrGridPinningActions >
</IgrActionStrip >
<IgrRowIsland
childDataKey ="Albums"
primaryKey ="Album"
cellSelection ="None"
autoGenerate ="false"
pinning ={this.pinningConfig2}
name ="rowIsland1" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String" >
</IgrColumn >
<IgrActionStrip
name ="actionStrip2" >
<IgrGridPinningActions
>
</IgrGridPinningActions >
</IgrActionStrip >
</IgrRowIsland >
</IgrHierarchicalGrid >
</div >
</div >
);
}
private _singersData: any [] = SingersData;
public get singersData(): any [] {
return this ._singersData;
}
public webHierarchicalGridPinRowOnRendered(): void {
var hierarchicalGrid = this .grid;
hierarchicalGrid.pinRow(hierarchicalGrid.data[0 ].Photo);
hierarchicalGrid.pinRow(hierarchicalGrid.data[1 ].Photo);
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#grid {
--ig-grid-pinned-border-width : 5px ;
--ig-grid-pinned-border-style : double;
--ig-grid-pinned-border-color : #FFCD0F ;
--ig-grid-cell-active-border-color : #FFCD0F ;
}
css コピー
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.