Skip to content

Commit 562c89c

Browse files
tishko0tishko0
committed
add(sample): added remote batch editing with remote paging samples
1 parent bbc93c3 commit 562c89c

38 files changed

+5018
-0
lines changed

‎samples/grids/grid/batch-editing-grid-remote-paging/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/grids/grid/batch-editing-grid-remote-paging/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Remote Paging Grid feature using [Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://dl.infragistics.com/x/img/browsers/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/grids/grid/remote-paging-grid" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/grids/grid/remote-paging-grid?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/grids/grid/remote-paging-grid
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/grids/grid/batch-editing-grid-remote-paging/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Sample | Ignite UI | Web Components | infragistics</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
12+
<link rel="stylesheet" href="/src/index.css" type="text/css" />
13+
14+
</head>
15+
16+
<body>
17+
<div id="root">
18+
19+
<div class="container sample ig-typography">
20+
21+
<div class="container fill">
22+
<igc-grid
23+
auto-generate="false"
24+
name="grid"
25+
id="grid"
26+
moving="true"
27+
primary-key="customerId"
28+
row-editable="true"
29+
batch-editing="true"
30+
paging-mode="Remote">
31+
<igc-paginator
32+
id="paginator">
33+
</igc-paginator>
34+
<igc-column
35+
header="Actions"
36+
width="120px"
37+
id="actionsColumn">
38+
</igc-column>
39+
<igc-column
40+
name="customerId"
41+
id="customerId"
42+
field="customerId"
43+
header="Customer ID"
44+
data-type="string"
45+
editable="false">
46+
</igc-column>
47+
<igc-column
48+
name="companyName"
49+
id="companyName"
50+
field="companyName"
51+
header="Company Name"
52+
data-type="string"
53+
editable="true">
54+
</igc-column>
55+
<igc-column
56+
name="contactName"
57+
id="contactName"
58+
field="contactName"
59+
header="Contact Name"
60+
data-type="string"
61+
editable="true">
62+
</igc-column>
63+
<igc-column
64+
name="contactTitle"
65+
id="contactTitle"
66+
field="contactTitle"
67+
header="Contact Title"
68+
data-type="string"
69+
editable="true">
70+
</igc-column>
71+
<igc-column
72+
name="address?.country"
73+
id="address.country"
74+
field="address.country"
75+
header="Country"
76+
data-type="string"
77+
editable="true">
78+
</igc-column>
79+
<igc-column
80+
name="address.phone"
81+
id="address.phone"
82+
field="address.phone"
83+
header="Phone"
84+
data-type="string"
85+
editable="true">
86+
</igc-column>
87+
</igc-grid>
88+
</div>
89+
<div class="buttons-wrapper">
90+
<igc-button id="addRowBtn" variant="contained">Add Row</igc-button>
91+
<div class="buttons-right">
92+
<igc-button id="undoBtn" variant="outlined" disabled>Undo</igc-button>
93+
<igc-button id="redoBtn" variant="outlined" disabled>Redo</igc-button>
94+
<igc-button id="discardBtn" variant="outlined" disabled>Discard</igc-button>
95+
<igc-button id="commitBtn" variant="outlined" disabled>Commit</igc-button>
96+
</div>
97+
</div>
98+
99+
<igc-dialog id="dialog" title="Transactions">
100+
<igc-grid
101+
id="transactionGrid"
102+
auto-generate="false"
103+
width="600px"
104+
height="300px">
105+
<igc-column field="id" header="ID" data-type="string"></igc-column>
106+
<igc-column field="type" header="Type" data-type="string" id="typeColumn"></igc-column>
107+
<igc-column field="newValue" header="Value" data-type="string" id="valueColumn"></igc-column>
108+
</igc-grid>
109+
<div slot="footer" class="dialog-buttons">
110+
<igc-button id="dialogCommitBtn" variant="contained">Commit</igc-button>
111+
<igc-button id="dialogDiscardBtn" variant="outlined">Discard</igc-button>
112+
<igc-button id="dialogCancelBtn" variant="flat">Cancel</igc-button>
113+
</div>
114+
</igc-dialog>
115+
</div>
116+
117+
</div>
118+
119+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
120+
<% if (false) { %><script src="src/index.ts"></script><% } %>
121+
</body>
122+
</html>

‎samples/grids/grid/batch-editing-grid-remote-paging/package.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "example-ignite-ui-web-components",
3+
"description": "This project provides example of using Ignite UI for Web Components",
4+
"author": "Infragistics",
5+
"version": "1.0.0",
6+
"license": "",
7+
"private": true,
8+
"homepage": ".",
9+
"main": "src/index.ts",
10+
"scripts": {
11+
"build": "npm run build:prod",
12+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
13+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
14+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
15+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
16+
"start": "npm run serve:dev",
17+
"build:legacy": "npm run build:prod:legacy",
18+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
19+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
20+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
21+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
22+
"start:legacy": "npm run serve:dev:legacy"
23+
},
24+
"dependencies": {
25+
"@webcomponents/custom-elements": "^1.4.1",
26+
"@webcomponents/template": "^1.4.2",
27+
"babel-runtime": "^6.26.0",
28+
"core-js": "^3.6.5",
29+
"igniteui-webcomponents-core": "6.3.1",
30+
"igniteui-webcomponents-grids": "6.3.0-alpha.1",
31+
"igniteui-webcomponents-inputs": "6.3.1",
32+
"igniteui-webcomponents-layouts": "6.3.1",
33+
"lit-html": "^3.3.1",
34+
"tslib": "^2.8.1"
35+
},
36+
"devDependencies": {
37+
"@babel/cli": "^7.28.3",
38+
"@babel/core": "^7.28.4",
39+
"@babel/plugin-transform-class-properties": "^7.27.1",
40+
"@babel/plugin-transform-class-static-block": "^7.28.3",
41+
"@babel/plugin-transform-runtime": "^7.28.3",
42+
"@babel/preset-env": "^7.28.3",
43+
"@babel/preset-typescript": "^7.27.1",
44+
"@types/source-map": "^0.5.7",
45+
"babel-loader": "^10.0.0",
46+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
47+
"css-loader": "^7.1.2",
48+
"csv-loader": "^3.0.5",
49+
"file-loader": "^6.2.0",
50+
"fork-ts-checker-webpack-plugin": "^9.1.0",
51+
"html-webpack-plugin": "^5.6.4",
52+
"parcel-bundler": "^1.12.5",
53+
"source-map": "^0.7.6",
54+
"style-loader": "^4.0.0",
55+
"tsconfig-paths-webpack-plugin": "^4.2.0",
56+
"typescript": "^5.9.2",
57+
"webpack": "^5.101.3",
58+
"webpack-cli": "^6.0.1",
59+
"webpack-dev-server": "^5.2.2",
60+
"worker-loader": "^3.0.8",
61+
"xml-loader": "^1.2.1"
62+
}
63+
}

‎samples/grids/grid/batch-editing-grid-remote-paging/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+

‎samples/grids/grid/batch-editing-grid-remote-paging/src/CustomersWithPageResponseModel.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export interface CustomersWithPageResponseModel {
2+
items: any[];
3+
totalRecordsCount: number;
4+
pageSize: number;
5+
pageNumber: number;
6+
totalPages: number;
7+
}

‎samples/grids/grid/batch-editing-grid-remote-paging/src/RemotePagingService.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export class RemotePagingService {
2+
public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
3+
constructor() {}
4+
5+
public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
6+
return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
7+
.then((result) => result.json())
8+
.catch((error) => console.error(error.message));
9+
}
10+
11+
private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
12+
let qS = "";
13+
if (baseUrl) {
14+
qS += `${baseUrl}`;
15+
}
16+
17+
// Add pageIndex and size to the query string if they are defined
18+
if (pageIndex !== undefined) {
19+
qS += `?pageIndex=${pageIndex}`;
20+
if (pageSize !== undefined) {
21+
qS += `&size=${pageSize}`;
22+
}
23+
} else if (pageSize !== undefined) {
24+
qS += `?perPage=${pageSize}`;
25+
}
26+
27+
return `${qS}`;
28+
}
29+
}
30+
31+

‎samples/grids/grid/batch-editing-grid-remote-paging/src/index.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* shared styles are loaded from: */
2+
/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
3+
4+
#grid {
5+
--ig-size: var(--ig-size-medium);
6+
}
7+
8+
.buttons-wrapper {
9+
display: flex;
10+
flex-direction: row;
11+
justify-content: space-between;
12+
padding: 10px 0;
13+
}
14+
15+
.buttons-right {
16+
display: flex;
17+
gap: 8px;
18+
}
19+
20+
.dialog-buttons {
21+
display: flex;
22+
gap: 8px;
23+
justify-content: flex-end;
24+
}
25+
26+
.transaction--add {
27+
color: #6b3;
28+
font-weight: 600;
29+
}
30+
31+
.transaction--update {
32+
color: #4a71b9;
33+
font-weight: 600;
34+
}
35+
36+
.transaction--delete {
37+
color: #ee4920;
38+
font-weight: 600;
39+
}

0 commit comments

Comments
 (0)