Skip to content

Commit 2d52927

Browse files
IMinchev64IMinchev64
committed
refactor(pinning-both-sides): minor adjustments to samples
1 parent 25c27ed commit 2d52927

9 files changed

Lines changed: 27 additions & 35 deletions

File tree

‎samples/grids/grid/column-pinning-both-sides/ReadMe.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
22
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
33

4-
This folder contains implementation of React application with example of Row Drag Base feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
4+
This folder contains implementation of React application with example of Column Pinning Both Sides feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
55

66

77
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Row Dra
1212
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
1313
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
1414
</a>
15-
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/row-drag-base" rel="noopener noreferrer">
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/column-pinning-both-sides" rel="noopener noreferrer">
1616
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
1717
</a>
18-
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/row-drag-base?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/column-pinning-both-sides?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
1919
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
2020
</a>
2121
</body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
3434
git clone https://github.com/IgniteUI/igniteui-react-examples.git
3535
git checkout master
3636
cd ./igniteui-react-examples
37-
cd ./samples/grids/grid/row-drag-base
37+
cd ./samples/grids/grid/column-pinning-both-sides
3838
```
3939

4040
open above folder in VS Code or type:

‎samples/grids/grid/column-pinning-both-sides/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
},
1616
"dependencies": {
1717
"igniteui-dockmanager": "^1.17.0",
18-
"igniteui-react": "19.3.0-rc.2",
18+
"igniteui-react": "19.3.0-rc.3",
1919
"igniteui-react-core": "19.2.2",
2020
"igniteui-react-datasources": "19.2.2",
21-
"igniteui-react-grids": "19.3.0-rc.2",
21+
"igniteui-react-grids": "19.3.0-rc.3",
2222
"igniteui-react-inputs": "19.2.2",
2323
"igniteui-react-layouts": "19.2.2",
2424
"igniteui-webcomponents": "^6.2.0",

‎samples/grids/grid/column-pinning-both-sides/src/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function App() {
3535
header: "Contact Name",
3636
width: 200,
3737
pinned: true,
38-
pinningPosition: ColumnPinningPosition.End,
38+
pinningPosition: ColumnPinningPosition.Start,
3939
},
4040
{
4141
field: "ContactTitle",
@@ -105,7 +105,6 @@ export default function App() {
105105
width={c.width}
106106
pinned={c.pinned}
107107
hidden={c.hidden}
108-
headerClasses="customHeaderSyle"
109108
pinningPosition={c?.pinningPosition}
110109
/>
111110
))}

‎samples/grids/hierarchical-grid/column-pinning-both-sides/ReadMe.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
22
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
33

4-
This folder contains implementation of React application with example of Row Drag Base feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
4+
This folder contains implementation of React application with example of Column Pinning Both Sides feature using [Hierarchical Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
55

66

77
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Row Dra
1212
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
1313
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
1414
</a>
15-
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/row-drag-base" rel="noopener noreferrer">
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/hierarchical-grid/column-pinning-both-sides" rel="noopener noreferrer">
1616
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
1717
</a>
18-
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/row-drag-base?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/hierarchical-grid/column-pinning-both-sides?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
1919
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
2020
</a>
2121
</body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
3434
git clone https://github.com/IgniteUI/igniteui-react-examples.git
3535
git checkout master
3636
cd ./igniteui-react-examples
37-
cd ./samples/grids/grid/row-drag-base
37+
cd ./samples/grids/hierarchical-grid/column-pinning-both-sides
3838
```
3939

4040
open above folder in VS Code or type:

‎samples/grids/hierarchical-grid/column-pinning-both-sides/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
},
1616
"dependencies": {
1717
"igniteui-dockmanager": "^1.17.0",
18-
"igniteui-react": "19.3.0-rc.2",
18+
"igniteui-react": "19.3.0-rc.3",
1919
"igniteui-react-core": "19.2.2",
2020
"igniteui-react-datasources": "19.2.2",
21-
"igniteui-react-grids": "19.3.0-rc.2",
21+
"igniteui-react-grids": "19.3.0-rc.3",
2222
"igniteui-react-inputs": "19.2.2",
2323
"igniteui-react-layouts": "19.2.2",
2424
"igniteui-webcomponents": "^6.2.0",

‎samples/grids/hierarchical-grid/column-pinning-both-sides/src/index.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ export default function App() {
2525
columns: ColumnPinningPosition.End,
2626
});
2727

28-
const start = ColumnPinningPosition.Start;
29-
const end = ColumnPinningPosition.End;
30-
3128
useEffect(() => {
3229
setData(HierarchicalCustomersData);
3330
}, []);
@@ -36,7 +33,7 @@ export default function App() {
3633
const grid = gridRef.current;
3734
if (!grid) return;
3835
grid.selectedColumns().forEach((col) => {
39-
col.pinningPosition = start;
36+
col.pinningPosition = ColumnPinningPosition.Start;
4037
col.pinned = true;
4138
});
4239
};
@@ -45,7 +42,7 @@ export default function App() {
4542
const grid = gridRef.current;
4643
if (!grid) return;
4744
grid.selectedColumns().forEach((col) => {
48-
col.pinningPosition = end;
45+
col.pinningPosition = ColumnPinningPosition.End;
4946
col.pinned = true;
5047
});
5148
};
@@ -90,13 +87,12 @@ export default function App() {
9087
field="Company"
9188
header="Company Name"
9289
pinned={true}
93-
pinningPosition={start}
90+
pinningPosition={ColumnPinningPosition.Start}
9491
></IgrColumn>
9592
<IgrColumn
9693
field="ContactName"
9794
header="Contact Name"
9895
pinned={true}
99-
pinningPosition={end}
10096
></IgrColumn>
10197
<IgrColumn field="ContactTitle" header="Contact Title"></IgrColumn>
10298
<IgrColumn field="Address" header="Address"></IgrColumn>
@@ -115,6 +111,8 @@ export default function App() {
115111
header="Order Date"
116112
dataType="date"
117113
resizable={true}
114+
pinned={true}
115+
pinningPosition={ColumnPinningPosition.Start}
118116
></IgrColumn>
119117
<IgrColumn
120118
field="RequiredDate"
@@ -141,7 +139,6 @@ export default function App() {
141139
dataType="string"
142140
resizable={true}
143141
pinned={true}
144-
pinningPosition={end}
145142
></IgrColumn>
146143
<IgrColumn
147144
field="Freight"

‎samples/grids/tree-grid/column-pinning-both-sides/ReadMe.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
22
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
33

4-
This folder contains implementation of React application with example of Row Drag Base feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
4+
This folder contains implementation of React application with example of Column Pinning Both Sides feature using [Tree Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
55

66

77
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Row Dra
1212
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
1313
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
1414
</a>
15-
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/grid/row-drag-base" rel="noopener noreferrer">
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/grids/tree-grid/column-pinning-both-sides" rel="noopener noreferrer">
1616
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
1717
</a>
18-
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/grid/row-drag-base?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/grids/tree-grid/column-pinning-both-sides?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
1919
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
2020
</a>
2121
</body>
@@ -34,7 +34,7 @@ Follow these instructions to run this example:
3434
git clone https://github.com/IgniteUI/igniteui-react-examples.git
3535
git checkout master
3636
cd ./igniteui-react-examples
37-
cd ./samples/grids/grid/row-drag-base
37+
cd ./samples/grids/tree-grid/column-pinning-both-sides
3838
```
3939

4040
open above folder in VS Code or type:

‎samples/grids/tree-grid/column-pinning-both-sides/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
},
1616
"dependencies": {
1717
"igniteui-dockmanager": "^1.17.0",
18-
"igniteui-react": "19.3.0-rc.2",
18+
"igniteui-react": "19.3.0-rc.3",
1919
"igniteui-react-core": "19.2.2",
2020
"igniteui-react-datasources": "19.2.2",
21-
"igniteui-react-grids": "19.3.0-rc.2",
21+
"igniteui-react-grids": "19.3.0-rc.3",
2222
"igniteui-react-inputs": "19.2.2",
2323
"igniteui-react-layouts": "19.2.2",
2424
"igniteui-webcomponents": "^6.2.0",

‎samples/grids/tree-grid/column-pinning-both-sides/src/index.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ export default function App() {
2222
columns: ColumnPinningPosition.End,
2323
});
2424

25-
const start = ColumnPinningPosition.Start;
26-
const end = ColumnPinningPosition.End;
27-
2825
useEffect(() => {
2926
const employeesData = new EmployeesFlatDetails();
3027

@@ -35,7 +32,7 @@ export default function App() {
3532
const grid = gridRef.current;
3633
if (!grid) return;
3734
grid.selectedColumns().forEach((col) => {
38-
col.pinningPosition = start;
35+
col.pinningPosition = ColumnPinningPosition.Start;
3936
col.pinned = true;
4037
});
4138
};
@@ -44,7 +41,7 @@ export default function App() {
4441
const grid = gridRef.current;
4542
if (!grid) return;
4643
grid.selectedColumns().forEach((col) => {
47-
col.pinningPosition = end;
44+
col.pinningPosition = ColumnPinningPosition.End;
4845
col.pinned = true;
4946
});
5047
};
@@ -91,14 +88,13 @@ export default function App() {
9188
dataType="string"
9289
width="250px"
9390
pinned={true}
94-
pinningPosition={start}
91+
pinningPosition={ColumnPinningPosition.Start}
9592
/>
9693
<IgrColumn
9794
field="Title"
9895
dataType="string"
9996
width="250px"
10097
pinned={true}
101-
pinningPosition={end}
10298
/>
10399
<IgrColumn field="ID" dataType="number" width="100px" />
104100
<IgrColumn

0 commit comments

Comments
 (0)