Skip to content

Commit 88e9a93

Browse files
Yaminisrisf4389Yaminisrisf4389
authored
Merge branch 'development' into SmartFormRecognizer
2 parents 08bf237 + 534a90b commit 88e9a93

20 files changed

Lines changed: 1125 additions & 2 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5364,6 +5364,10 @@
53645364
<li><a href="/document-processing/excel/spreadsheet/react/how-to/create-a-object-structure">Create a object structure </a></li>
53655365
<li><a href="/document-processing/excel/spreadsheet/react/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
53665366
<li><a href="/document-processing/excel/spreadsheet/react/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
5367+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/find-replace-in-range">Find and replace the text within the selected range of cells</a></li>
5368+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-dynamic-cell-template">Add dynamic cell templates</a></li>
5369+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/add-cell-icon">Add an icon to the cell</a></li>
5370+
<li><a href="/document-processing/excel/spreadsheet/react/how-to/get-filtered-data">Get the filtered row data</a></li>
53675371
</ul>
53685372
</li>
53695373
<li><a href="/document-processing/excel/spreadsheet/react/mobile-responsiveness">Mobile Responsiveness</a></li>

‎Document-Processing/Excel/Spreadsheet/React/how-to/add-cell-icon.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Add icons inside cells in React Spreadsheet component | Syncfusion
4+
description: Learn here all about adding icon inside cells using a custom template in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Add Custom Icons to Cells in React Spreadsheet
11+
12+
In the Syncfusion Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property.
13+
14+
The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named "Add Icon" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1" %}

‎Document-Processing/Excel/Spreadsheet/React/how-to/add-dynamic-cell-template.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Dynamic cell template in React Spreadsheet component | Syncfusion
4+
description: Render dropdown templates inside cells in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Create Dynamic Cell Templates with Dropdowns in React Spreadsheet
11+
12+
You can add templates to cells in the Syncfusion Spreadsheet component by dynamically assigning a custom template property directly to individual cells. When a cell has this custom template property, you can use the [beforeCellRender](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#beforecellrender) event to append the desired template element to the cell.
13+
14+
The following sample demonstrates how to insert a [Syncfusion Dropdown component](https://www.npmjs.com/package/@syncfusion/ej2-dropdowns) into Spreadsheet cells using this custom template property. Additionally, a custom ribbon item named "DropDown List" is included under a new "Template" ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts a dropdown into the currently active cell.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/dynamic-cell-template-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/dynamic-cell-template-cs1" %}

‎Document-Processing/Excel/Spreadsheet/React/how-to/find-replace-in-range.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Find and replace in range in React Spreadsheet component | Syncfusion
4+
description: Learn here all about performing find and replace limited to the range in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Find and replace the text within the selected range of cells
11+
12+
In Syncfusion Spreadsheet, the "Replace All" action by default searches and replaces a text throughout the entire sheet, regardless of the selected range. To limit "Replace All" to only the selected range, you can customize the addressCollection based on the selectedRange in the [actionBegin](https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default#actionbegin) event when the action is `beforeReplaceAll`.
13+
14+
The following sample demonstrates how to limit the "Replace All" operation to the currently selected range.
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/find-and-replace-cs1/app/app.tsx %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/find-and-replace-cs1" %}

‎Document-Processing/Excel/Spreadsheet/React/how-to/get-filtered-data.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
layout: post
3+
title: Retrieve filtered row data in React Spreadsheet component | Syncfusion
4+
description: Learn here all about getting filtered row data in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more.
5+
control: Spreadsheet
6+
platform: document-processing
7+
documentation: ug
8+
---
9+
10+
# Get filtered row data in React Spreadsheet
11+
12+
Filtering in the Syncfusion Spreadsheet allows you to display only the rows that match your criteria, hiding all others. You can enable filtering by setting the [allowFiltering](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#allowfiltering) property, and apply filters either through the UI or programmatically using the [applyFilter](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#applyfilter) method. To identify which rows are filtered, iterate through the sheet's row collection and check the `isFiltered` property of each row object. This flag indicates whether a row is currently hidden due to filtering.
13+
14+
The following example shows how to get the filtered rows from the Spreadsheet:
15+
16+
{% tabs %}
17+
{% highlight js tabtitle="app.jsx" %}
18+
{% include code-snippet/spreadsheet/react/filter-cs2/app/app.jsx %}
19+
{% endhighlight %}
20+
{% highlight ts tabtitle="app.tsx" %}
21+
{% include code-snippet/spreadsheet/react/filter-cs2/app/app.tsx %}
22+
{% endhighlight %}
23+
{% highlight js tabtitle="datasource.jsx" %}
24+
{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.jsx %}
25+
{% endhighlight %}
26+
{% highlight ts tabtitle="datasource.tsx" %}
27+
{% include code-snippet/spreadsheet/react/filter-cs2/app/datasource.tsx %}
28+
{% endhighlight %}
29+
{% endtabs %}
30+
31+
{% previewsample "/document-processing/code-snippet/spreadsheet/react/filter-cs2" %}

‎Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.jsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useRef } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
4+
5+
function App() {
6+
const spreadsheetRef = useRef(null);
7+
8+
// To create plus icon wrapper.
9+
const createPlusIconWrapper = () => {
10+
const wrapperDiv = document.createElement('div');
11+
wrapperDiv.className = 'e-custom-wrapper';
12+
const iconSpan = document.createElement('span');
13+
iconSpan.className = 'e-icons e-plus e-custom-icon';
14+
wrapperDiv.appendChild(iconSpan);
15+
return wrapperDiv;
16+
};
17+
18+
// Triggers after the component is created
19+
const handleCreated = () => {
20+
if (!spreadsheetRef.current) return;
21+
// Initialize icons in the cells when the spreadsheet loads.
22+
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
23+
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
24+
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
25+
spreadsheetRef.current.resize();
26+
// This is to Add a header Ribbon tab with a button to initialize everything on click.
27+
spreadsheetRef.current.addRibbonTabs([
28+
{
29+
header: { text: 'Template' },
30+
content: [
31+
{
32+
text: 'Add Icon',
33+
tooltipText: 'Initialize',
34+
click: () => {
35+
if (!spreadsheetRef.current) return;
36+
// Add the plus icon template to the selected cell
37+
const sheet = spreadsheetRef.current.getActiveSheet();
38+
spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
39+
spreadsheetRef.current.resize();
40+
},
41+
},
42+
],
43+
},
44+
]);
45+
};
46+
47+
// Triggers before the cell is appended to DOM
48+
const handleBeforeCellRender = (args) => {
49+
if (args.cell && args.cell.template === 'plus-icon') {
50+
// Pass the rowIndex to the wrapper to make the click handler reliable.
51+
const wrapperDiv = createPlusIconWrapper();
52+
args.element.insertBefore(wrapperDiv, args.element.firstChild);
53+
}
54+
};
55+
56+
return (
57+
<div>
58+
<SpreadsheetComponent
59+
ref={spreadsheetRef}
60+
created={handleCreated}
61+
beforeCellRender={handleBeforeCellRender}
62+
/>
63+
</div>
64+
);
65+
}
66+
67+
const root = createRoot(document.getElementById('root'));
68+
root.render(<App />);

‎Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/app/app.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, { useRef } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
4+
5+
function App(): React.ReactElement {
6+
const spreadsheetRef = useRef<SpreadsheetComponent | null>(null);
7+
8+
// To create plus icon wrapper.
9+
const createPlusIconWrapper = (): HTMLElement => {
10+
const wrapperDiv: HTMLDivElement = document.createElement('div');
11+
wrapperDiv.className = 'e-custom-wrapper';
12+
const iconSpan: HTMLSpanElement = document.createElement('span');
13+
iconSpan.className = 'e-icons e-plus e-custom-icon';
14+
wrapperDiv.appendChild(iconSpan);
15+
return wrapperDiv;
16+
};
17+
18+
// Triggers after the component is created
19+
const handleCreated = (): void => {
20+
if (!spreadsheetRef.current) return;
21+
// Initialize icons in the cells when the spreadsheet loads.
22+
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
23+
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
24+
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
25+
spreadsheetRef.current.resize();
26+
// This is to Add a header Ribbon tab with a button to initialize everything on click.
27+
spreadsheetRef.current.addRibbonTabs([
28+
{
29+
header: { text: 'Template' },
30+
content: [
31+
{
32+
text: 'Add Icon',
33+
tooltipText: 'Initialize',
34+
click: () => {
35+
if (!spreadsheetRef.current) return;
36+
// Add the plus icon template to the selected cell
37+
const sheet: any = spreadsheetRef.current.getActiveSheet();
38+
spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, (sheet as any).activeCell);
39+
spreadsheetRef.current.resize();
40+
},
41+
},
42+
],
43+
},
44+
]);
45+
};
46+
47+
// Triggers before the cell is appended to DOM
48+
const handleBeforeCellRender = (args: any) => {
49+
if (args.cell && args.cell.template === 'plus-icon') {
50+
// Pass the rowIndex to the wrapper to make the click handler reliable.
51+
const wrapperDiv: HTMLElement = createPlusIconWrapper();
52+
args.element.insertBefore(wrapperDiv, args.element.firstChild);
53+
}
54+
};
55+
56+
return (
57+
<div>
58+
<SpreadsheetComponent
59+
ref={spreadsheetRef}
60+
created={handleCreated}
61+
beforeCellRender={handleBeforeCellRender}
62+
/>
63+
</div>
64+
);
65+
}
66+
67+
export default App;
68+
69+
const root = createRoot(document.getElementById('root')!);
70+
root.render(<App />);

‎Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Spreadsheet</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/32.1.19/tailwind3.css" rel="stylesheet" type="text/css" />
11+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<script src="systemjs.config.js"></script>
14+
<style>
15+
#loader {
16+
color: #008cff;
17+
height: 40px;
18+
left: 45%;
19+
position: absolute;
20+
top: 45%;
21+
width: 30%;
22+
}
23+
24+
body {
25+
overflow: hidden;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id='root'>
32+
<div id='loader'>Loading....</div>
33+
</div>
34+
</body>
35+
36+
</html>

‎Document-Processing/code-snippet/spreadsheet/react/add-icon-in-cell-cs1/systemjs.config.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/32.1.19/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
22+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
26+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
27+
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
28+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
29+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
30+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
31+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
32+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
33+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
34+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
35+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
36+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
37+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
38+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
39+
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
40+
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
41+
"@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
42+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
43+
"@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
44+
"react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
45+
"react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
46+
"react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
47+
48+
},
49+
packages: {
50+
'app': { main: 'app', defaultExtension: 'tsx' },
51+
}
52+
53+
});
54+
55+
System.import('app');
56+
57+
58+

0 commit comments

Comments
 (0)