Skip to content
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.

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

Remote Paging Grid & HGrid: Refactoring with the new customers endpoint #668

Open
wants to merge 4 commits into
base: vnext
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
fix(HGrid Remote Paging): refactored sample with the new customers en…
…dpoint
MarielaTihova committed Nov 14, 2024
commit 2a78bbce2f196a7fd83a22c9a6b5a2ed61117d2a
3 changes: 2 additions & 1 deletion samples/grids/grid/remote-paging-grid/src/index.tsx
Original file line number Diff line number Diff line change
@@ -69,7 +69,8 @@ export default function App() {
perPage={perPage}
ref={paginator}
pageChange={onPageNumberChange}
perPageChange={onPageSizeChange}></IgrPaginator>
perPageChange={onPageSizeChange}>
</IgrPaginator>
<IgrColumn field="customerId" hidden={true}></IgrColumn>
<IgrColumn field="companyName" header="Company Name"></IgrColumn>
<IgrColumn field="contactName" header="Contact Name"></IgrColumn>
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export interface CustomersWithPageResponseModel {
items: any[];
totalRecordsCount: number;
pageSize: number;
pageNumber: number;
totalPages: number;
}
Original file line number Diff line number Diff line change
@@ -1,38 +1,34 @@
const URL = `https://data-northwind.indigo.design/`;
const BASE_URL = `https://data-northwind.indigo.design/`;
const CUSTOMERS_URL = `${BASE_URL}Customers/GetCustomersWithPage`;

export class RemoteService {

public getData(dataState: any, index?: number, perPage?: number): any {
return fetch(this.buildUrl(dataState, index, perPage))
public static getCustomersDataWithPaging(pageIndex?: number, pageSize?: number) {
return fetch(this.buildUrl(CUSTOMERS_URL, pageIndex, pageSize))
.then((result) => result.json());
}
}

private buildUrl(dataState: any, index?: number, perPage?: number) {
let qS = "";
if (dataState) {
if (dataState.rootLevel) {
qS += `${dataState.key}`;
} else {
qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
public static getHierarchyDataById(parentEntityName: string, parentId: string, childEntityName: string) {
return fetch(`${BASE_URL}${parentEntityName}/${parentId}/${childEntityName}`)
.then((result) => result.json());
}

// Add index and perPage to the query string if they are defined
if (index !== undefined) {
qS += `?index=${index}`;
if (perPage !== undefined) {
qS += `&perPage=${perPage}`;
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
let qS = "";
if (baseUrl) {
qS += `${baseUrl}`;
}
} else if (perPage !== undefined) {
qS += `?perPage=${perPage}`;
}

return `${URL}${qS}`;
}
// Add pageIndex and size to the query string if they are defined
if (pageIndex !== undefined) {
qS += `?pageIndex=${pageIndex}`;
if (pageSize !== undefined) {
qS += `&size=${pageSize}`;
}
} else if (pageSize !== undefined) {
qS += `?perPage=${pageSize}`;
}

public getDataLength(dataState: any): Promise<number> {
return fetch(this.buildUrl(dataState))
.then((result) => result.json())
.then((data) => data.length);
}
return `${qS}`;
}
}
109 changes: 58 additions & 51 deletions samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx
Original file line number Diff line number Diff line change
@@ -2,92 +2,99 @@ import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import { IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids";
import { GridPagingMode, IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids";
import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "igniteui-react-grids";

import "igniteui-react-grids/grids/combined";
import "igniteui-react-grids/grids/themes/light/bootstrap.css";
import { RemoteService } from "./RemoteService";
import { IgrNumberEventArgs } from "igniteui-react";
import { CustomersWithPageResponseModel } from "./CustomersWithPageResponseModel";

IgrHierarchicalGridModule.register();

export default function App() {
const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
const paginator = useRef<IgrPaginator>(null);
const remoteServiceInstance = new RemoteService();
let [page, setPage] = useState(0);
let [perPage, setPerPage] = useState(15);
const [data, setData] = useState([]);

useEffect(() => {
if (paginator.current) {
setPerPage(15);
hierarchicalGrid.current.isLoading = true;
const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
const paginator = useRef<IgrPaginator>(null);

const [data, setData] = useState([]);
const [page, setPage] = useState(0);
const [perPage, setPerPage] = useState(15);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
loadGridData(page, perPage);
}, [page, perPage]);

function loadGridData(pageIndex?: number, pageSize?: number) {
// Set loading state
setIsLoading(true);

// Fetch data
RemoteService.getCustomersDataWithPaging(pageIndex, pageSize)
.then((response: CustomersWithPageResponseModel) => {
setData(response.items);
// Stop loading when data is retrieved
setIsLoading(false);
paginator.current.totalRecords = response.totalRecordsCount;
})
.catch((error) => {
console.error(error.message);
setData([]);
// Stop loading even if error occurs. Prevents endless loading
setIsLoading(false);
})
}

hierarchicalGrid.current.isLoading = true;

remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: "Customers", page, perPage }).then(
(data: any) => {
hierarchicalGrid.current.isLoading = false;
hierarchicalGrid.current.data = data;
hierarchicalGrid.current.markForCheck();
}
);
}, [page, 15]);

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

context.grid.isLoading = true;

remoteServiceInstance.getDataLength(dataState).then((length: number) => {
paginator.current.totalRecords = length;
});
remoteServiceInstance.getData(dataState).then((data: any[]) => {
const parentId: string = context.parentID;
const childDataKey: string = rowIsland.childDataKey;

RemoteService.getHierarchyDataById(parentKey, parentId, childDataKey)
.then((data: any) => {
context.grid.isLoading = false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is disabling loading but there's nothing enabling the loading initially for the child grid thus resulting in loading indicator not rendered for child grids.

context.grid.data = data;
context.grid.markForCheck();
});
setIsLoading(false);
})
.catch((error) => {
console.error(error.message);
setData([]);
setIsLoading(false);
})

}

function paginate(pageArgs: number) {
setPage(pageArgs);
const skip = pageArgs * perPage;
const top = perPage;
function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
setPage(args.detail);
}

remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((incData:any)=> {
setData(incData);
hierarchicalGrid.current.isLoading = false;
hierarchicalGrid.current.markForCheck();// Update the UI after receiving data
});
}
function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
setPerPage(args.detail);
}

return (
<div className="container sample ig-typography">
<div className="container fill">

<IgrHierarchicalGrid
ref={hierarchicalGrid}
data={data}
pagingMode={GridPagingMode.Remote}
primaryKey="customerId"
height="600px"
data={data}
isLoading={isLoading}
Copy link
Member

@skrustev skrustev Jan 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For some reason there's a problem with this method of setting isLoading. It is not set in time when setting the data and results in no scrollbar when initially the data is rendered. Setting the property manually seems to work fine

Here how it is atm:

image

>
<IgrPaginator
perPage={perPage}
ref={paginator}
pageChange={(evt: { page: number }) => paginate(evt.page)}
perPageChange={() => paginate(page)}>
pageChange={onPageNumberChange}
perPageChange={onPageSizeChange}>
</IgrPaginator>
<IgrColumn field="customerId" hidden={true}></IgrColumn>
<IgrColumn field="companyName" header="Company Name"></IgrColumn>