Row Actions in React Hierarchical Grid
The Ignite UI for React Row Actions feature in React Hierarchical Grid enables developers to use an IgrActionStrip
and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgrHierarchicalGrid
– editing and pinning.
Usage
The predefined actions UI components are:
They are added inside the IgrHierarchicalGrid
and this is all needed to have an IgrActionStrip
providing default interactions.
<IgrHierarchicalGrid id ="hierarchicalGrid" rowEditable ="true" primaryKey ="ID" >
<IgrColumn field ="field" >
</IgrColumn >
<IgrActionStrip name ="actionStrip" >
<IgrGridPinningActions > </IgrGridPinningActions >
<IgrGridEditingActions > </IgrGridEditingActions >
</IgrActionStrip >
</IgrHierarchicalGrid >
tsx
When ActionStripComponent is a child component of the IgrHierarchicalGrid, hovering a row will automatically show the UI.
Custom Implementation
These components expose templates giving flexibility for customization. For instance, if we would like to use the IgrActionStrip
for a Gmail scenario with row actions such as delete , edit and etc. You can simply create button component with icon, add click event to it and insert it into the IgrActionStrip
.
<IgrHierarchicalGrid >
<IgrActionStrip name ="actionStrip" >
<IgrGridPinningActions > </IgrGridPinningActions >
<IgrGridEditingActions editRow ="true" deleteRow ="true" > </IgrGridEditingActions >
</IgrActionStrip >
</IgrHierarchicalGrid >
tsx
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrHierarchicalGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrHierarchicalGrid, IgrPinningConfig, RowPinningPosition, IgrActionStrip, IgrGridPinningActions, IgrGridEditingActions, IgrColumn, IgrRowIsland } from "@infragistics/igniteui-react-grids" ;
import SingersData from './SingersData.json' ;
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 hierarchicalGrid1: IgrHierarchicalGrid
private hierarchicalGrid1Ref(r: IgrHierarchicalGrid) {
this .hierarchicalGrid1 = 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;
this ._pinningConfig1 = pinningConfig1;
}
return this ._pinningConfig1;
}
private actionStrip: IgrActionStrip
constructor (props: any ) {
super (props);
this .hierarchicalGrid1Ref = this .hierarchicalGrid1Ref.bind(this );
}
public render (): JSX .Element {
return (
<div className ="container sample ig-typography" >
<div className ="container fill" >
<IgrHierarchicalGrid
autoGenerate ="false"
data ={this.singersData}
primaryKey ="ID"
rowEditable ="true"
allowFiltering ="true"
pinning ={this.pinningConfig1}
ref ={this.hierarchicalGrid1Ref} >
<IgrActionStrip
name ="actionStrip" >
<IgrGridPinningActions
>
</IgrGridPinningActions >
<IgrGridEditingActions
editRow ="true"
deleteRow ="true"
addRow ="true" >
</IgrGridEditingActions >
</IgrActionStrip >
<IgrColumn
field ="Artist"
header ="Artist"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="Photo"
header ="Photo"
dataType ="Image"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="Debut"
header ="Debut"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyNominations"
header ="Grammy Nominations"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="GrammyAwards"
header ="Grammy Awards"
dataType ="Number"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Albums"
autoGenerate ="false" >
<IgrColumn
field ="Album"
header ="Album"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="LaunchDate"
header ="Launch Date"
dataType ="Date"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="BillboardReview"
header ="Billboard Review"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrColumn
field ="USBillboard200"
header ="US Billboard 200"
dataType ="String"
sortable ="true" >
</IgrColumn >
<IgrRowIsland
childDataKey ="Songs"
autoGenerate ="false" >
<IgrColumn
field ="Number"
header ="No."
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Title"
header ="Title"
dataType ="String" >
</IgrColumn >
<IgrColumn
field ="Released"
header ="Released"
dataType ="Date" >
</IgrColumn >
<IgrColumn
field ="Genre"
header ="Genre"
dataType ="String" >
</IgrColumn >
</IgrRowIsland >
</IgrRowIsland >
<IgrRowIsland
childDataKey ="Tours"
autoGenerate ="false" >
<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;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.
API References
Our community is active and always welcoming to new ideas.