Skip to content

Remote data operations samples update to 19 #781

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

Merged
merged 5 commits into from
May 14, 2025
Merged

Remote data operations samples update to 19 #781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6354bb6
update(sample): updated infinite scroll to work with v19 packages
tishko0 May 8, 2025
b734ed2
update(sample): updated remote paging sample to 19
tishko0 May 12, 2025
606dd61
updated hgrid sample to v19
tishko0 May 13, 2025
4cf2f7b
formatted hgrid sample
tishko0 May 13, 2025
c519d03
refactor: adjust imports, cleanup unused/obsolete
damyanpetev May 14, 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
159 changes: 91 additions & 68 deletions samples/grids/grid/infinite-scroll/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,112 @@
import React, { useEffect, useRef, useState } from 'react';
import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrForOfStateEventArgs, IgrGridModule } from 'igniteui-react-grids';
import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
import { loadDataForPage, getCachedData } from './NwindService';
import { IgrColumn, IgrForOfStateEventArgs, IgrGrid } from 'igniteui-react-grids';
import { getCachedData, loadDataForPage } from './NwindService';

import 'igniteui-react-grids/grids/combined';
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';

const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());

export default function App() {
let pageSize = 10;
let page = 1;
let totalPageCount = 0;
let totalItems = 0;
const gridRef = useRef<IgrGrid>(null);

useEffect(() => {
gridRef.current.isLoading = true;
const dataViewSize = 9.6;
pageSize = Math.floor(dataViewSize * 1.5);

loadDataForPage(page, pageSize, (request) => {
if (request.data) {
gridRef.current.data = getCachedData({ startIndex: 0, chunkSize: 10 });
gridRef.current.totalItemCount = page * pageSize;
totalItems = request.data["@odata.count"];
totalPageCount = Math.ceil(totalItems / pageSize);
gridRef.current.isLoading = false;
}
});
}, []);

function handlePreLoad(e: IgrForOfStateEventArgs) {
Copy link
Member

Choose a reason for hiding this comment

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

and IgrForOfStateEventArgs isn't imported, possibly typo on the unused IgrForOfState import? If so, you can change the import name

const isLastChunk =
gridRef.current.totalItemCount ===
e.detail.startIndex + e.detail.chunkSize;
if (isLastChunk) {
if (totalPageCount === page) {
gridRef.current.data = getCachedData({
startIndex: e.detail.startIndex,
chunkSize: e.detail.chunkSize,
});
return;
}
page++;
gridRef.current.isLoading = true;
const dataViewSize = 9.6;
pageSize = Math.floor(dataViewSize * 1.5);

loadDataForPage(page,pageSize, (request) => {
if (request.data) {
gridRef.current.data = getCachedData({startIndex: 0, chunkSize: 10});
gridRef.current.totalItemCount = page * pageSize;
totalItems = request.data['@odata.count'];
totalPageCount = Math.ceil(totalItems / pageSize);
gridRef.current.isLoading = false;
}
loadDataForPage(page, pageSize, (request) => {
if (request.data) {
gridRef.current.totalItemCount = Math.min(
page * pageSize,
totalItems
);
gridRef.current.data = getCachedData({
startIndex: e.detail.startIndex,
chunkSize: e.detail.chunkSize,
});
gridRef.current.isLoading = false;
}
});
}, [])

function handlePreLoad(grid: IgrGrid, e: IgrForOfStateEventArgs) {
const isLastChunk = grid.totalItemCount === e.detail.startIndex + e.detail.chunkSize;
if (isLastChunk) {
if (totalPageCount === page) {
grid.data = getCachedData(e.detail);
return;
}
page++;
grid.isLoading = true;
loadDataForPage(page, pageSize, (request) => {
if (request.data) {
grid.totalItemCount = Math.min(page * pageSize, totalItems);
grid.data = getCachedData(e.detail);
grid.isLoading = false;
}
})
} else {
grid.data = getCachedData(e.detail);
}
} else {
gridRef.current.data = getCachedData({
startIndex: e.detail.startIndex,
chunkSize: e.detail.chunkSize,
});
}
}



return (
<>
<div className="container sample">
<div className="container fill" >
<IgrGrid
autoGenerate={false} dataPreLoad={handlePreLoad}
ref={gridRef} height='480px' width='100%'>
<IgrColumn field="ProductID" header="Product ID">
</IgrColumn>
<IgrColumn field="ProductName" header="Product Name">
</IgrColumn>
<IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Units Price" dataType="number">
</IgrColumn>
<IgrColumn field="QuantityPerUnit">
</IgrColumn>
<IgrColumn field="ReorderLevel" data-type="number" header-classes="headerAlignSyle">
</IgrColumn>
</IgrGrid>
</div>
</div>
</>
);
}
<>
<div className="container sample">
<div className="container fill">
<IgrGrid
primaryKey="ProductID"
autoGenerate={false}
onDataPreLoad={handlePreLoad}
ref={gridRef}
height="480px"
width="100%"
>
<IgrColumn
field="ProductID"
header="Product ID"
sortable={true}
editable={true}
></IgrColumn>
<IgrColumn field="ProductName" header="Product Name"></IgrColumn>
<IgrColumn
field="UnitsInStock"
header="Units In Stock"
dataType="number"
></IgrColumn>
<IgrColumn
field="UnitPrice"
header="Units Price"
dataType="number"
></IgrColumn>
<IgrColumn field="QuantityPerUnit"></IgrColumn>
<IgrColumn
field="ReorderLevel"
data-type="number"
header-classes="headerAlignSyle"
></IgrColumn>
</IgrGrid>
</div>
</div>
</>
);
}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
Expand Down
40 changes: 13 additions & 27 deletions samples/grids/grid/remote-paging-grid/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
import React, { useEffect, useRef, useState } from "react";

import { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

import { IgrGrid, IgrPaginator, IgrGridModule, GridPagingMode } from "igniteui-react-grids";
import { IgrColumn } from "igniteui-react-grids";

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

IgrGridModule.register();

export default function App() {
const grid = useRef<IgrGrid>(null);
const paginator = useRef<IgrPaginator>(null);
Comment on lines 10 to 11
Copy link
Member

Choose a reason for hiding this comment

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

Also in general, refrain from manipulating state through refs - if you're seeing useRef in the sample and it's not being used to call methods - suspect its usage entirely and see if it can be replaced with state and bindings instead.
I.e.:
paginator totalRecords can and should be state that's bound to the paginator, that's the expected usage pattern and it should work

Expand All @@ -26,31 +18,26 @@ export default function App() {
}, [page, perPage]);

function loadGridData(pageIndex?: number, pageSize?: number) {
// Set loading
grid.current.isLoading = true;

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

})
});
}

function onPageNumberChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
function onPageNumberChange(args: IgrNumberEventArgs) {
setPage(args.detail);
}

function onPageSizeChange(paginator: IgrPaginator, args: IgrNumberEventArgs) {
function onPageSizeChange(args: IgrNumberEventArgs) {
setPerPage(args.detail);
}

Expand All @@ -60,29 +47,28 @@ export default function App() {
<IgrGrid
ref={grid}
data={data}
pagingMode={GridPagingMode.Remote}
pagingMode={"remote"}
primaryKey="customerId"
height="600px"
>
<IgrPaginator
perPage={perPage}
ref={paginator}
pageChange={onPageNumberChange}
perPageChange={onPageSizeChange}>
</IgrPaginator>
<IgrPaginator
perPage={perPage}
ref={paginator}
onPageChange={onPageNumberChange}
onPerPageChange={onPageSizeChange}
></IgrPaginator>
<IgrColumn field="customerId" hidden={true}></IgrColumn>
<IgrColumn field="companyName" header="Company Name"></IgrColumn>
<IgrColumn field="contactName" header="Contact Name"></IgrColumn>
<IgrColumn field="contactTitle" header="Contact Title"></IgrColumn>
<IgrColumn field="address.country" header="Country"></IgrColumn>
<IgrColumn field="address.phone" header="Phone"></IgrColumn>
</IgrGrid>

</div>
</div>
);
}

// rendering above component in the React DOM
// Render the component
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Loading