Skip to content

Update hGrid overview topic for React 19 #1567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: vnext
Choose a base branch
from
Open

Update hGrid overview topic for React 19 #1567

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a88ce0
Update hGrid overview topic for React 19
IMinchev64 May 23, 2025
84e7b40
remove combined.js import snippet
IMinchev64 Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 34 additions & 45 deletions doc/en/components/grids/hierarchical-grid/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,14 @@ npm install --save {PackageGrids}

<!-- Angular, React, WebComponents -->

<!-- WebComponents -->
You also need to include the following import to use the grid:

<!-- WebComponents -->
```typescript
import 'igniteui-webcomponents-grids/grids/combined.js';
```
<!-- end: WebComponents -->

```tsx
import "igniteui-react-grids/grids/combined.js";
```

The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it:

<!-- WebComponents -->
Expand Down Expand Up @@ -227,12 +223,12 @@ Each *{RowIslandSelector}* should specify the key of the property that holds the
```

```tsx
<IgrHierarchicalGrid data={singers} autoGenerate="true">
<IgrRowIsland childDataKey="Albums" autoGenerate="true">
<IgrRowIsland childDataKey="Songs" autoGenerate="true">
<IgrHierarchicalGrid data={singers} autoGenerate={true}>
<IgrRowIsland childDataKey="Albums" autoGenerate={true}>
<IgrRowIsland childDataKey="Songs" autoGenerate={true}>
</IgrRowIsland>
</IgrRowIsland>
<IgrRowIsland childDataKey="Tours" autoGenerate="true">
<IgrRowIsland childDataKey="Tours" autoGenerate={true}>
</IgrRowIsland>
</IgrHierarchicalGrid>
```
Expand Down Expand Up @@ -391,19 +387,18 @@ import { getData } from "./remoteService";
export default function Sample() {
const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);

function gridCreated(
rowIsland: IgrRowIsland,
event: IgrGridCreatedEventArgs,
_parentKey: string
) {
const gridCreated = (event: IgrGridCreatedEventArgs, _parentKey: string) => {
const context = event.detail;
const rowIsland = context.owner;
const dataState = {
key: rowIsland.childDataKey,
parentID: context.parentID,
parentKey: _parentKey,
rootLevel: false,
};

context.grid.isLoading = true;

getData(dataState).then((data: any[]) => {
context.grid.isLoading = false;
context.grid.data = data;
Expand All @@ -413,6 +408,7 @@ export default function Sample() {

useEffect(() => {
hierarchicalGrid.current.isLoading = true;

getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
(data: any) => {
hierarchicalGrid.current.isLoading = false;
Expand All @@ -426,29 +422,21 @@ export default function Sample() {
<IgrHierarchicalGrid
ref={hierarchicalGrid}
primaryKey="customerId"
autoGenerate="true"
autoGenerate={true}
height="600px"
width="100%"
>
<IgrRowIsland
childDataKey="Orders"
primaryKey="orderId"
autoGenerate="true"
gridCreated={(
rowIsland: IgrRowIsland,
e: IgrGridCreatedEventArgs
) => gridCreated(rowIsland, e, "Customers")}
>
<IgrRowIsland
childDataKey="Details"
primaryKey="productId"
autoGenerate="true"
gridCreated={(
rowIsland: IgrRowIsland,
e: IgrGridCreatedEventArgs
) => gridCreated(rowIsland, e, "Orders")}
></IgrRowIsland>
</IgrRowIsland>
width="100%">
<IgrRowIsland
childDataKey="Orders"
primaryKey="orderId"
autoGenerate={true}
onGridCreated={(e: IgrGridCreatedEventArgs) => gridCreated(e, "Customers")}>
<IgrRowIsland
childDataKey="Details"
primaryKey="productId"
autoGenerate={true}
onGridCreated={(e: IgrGridCreatedEventArgs) => gridCreated(e, "Orders")}>
</IgrRowIsland>
</IgrRowIsland>
</IgrHierarchicalGrid>
);
}
Expand All @@ -458,9 +446,10 @@ export default function Sample() {
```ts
const URL = `https://data-northwind.indigo.design/`;

export function getData(dataState: any): any {
return fetch(buildUrl(dataState))
.then((result) => result.json());
export async function getData(dataState: any): Promise<any> {
const response = await fetch(buildUrl(dataState));
const data = await response.json();
return data;
}

function buildUrl(dataState: any) {
Expand Down Expand Up @@ -610,15 +599,15 @@ The grid features could be enabled and configured through the {RowIslandSelector
```

```tsx
<IgrHierarchicalGrid data={localData} autoGenerate="false"
allowFiltering='true' height="600px" width="800px">
<IgrColumn field="ID" pinned="true" filterable="true"></IgrColumn>
<IgrHierarchicalGrid data={localData} autoGenerate={false}
allowFiltering={true} height="600px" width="800px">
<IgrColumn field="ID" pinned={true} filterable={true}></IgrColumn>
<IgrColumnGroup header="Information">
<IgrColumn field="ChildLevels"></IgrColumn>
<IgrColumn field="ProductName" hasSummary="true"></IgrColumn>
<IgrColumn field="ProductName" hasSummary={true}></IgrColumn>
</IgrColumnGroup>
<IgrRowIsland childDataKey="childData" autoGenerate="false" rowSelection="multiple">
<IgrColumn field="ID" hasSummary="true" dataType="number"></IgrColumn>
<IgrRowIsland childDataKey="childData" autoGenerate={false} rowSelection="multiple">
<IgrColumn field="ID" hasSummary={true} dataType="number"></IgrColumn>
<IgrColumnGroup header="Information2">
<IgrColumn field="ChildLevels"></IgrColumn>
<IgrColumn field="ProductName"></IgrColumn>
Expand Down