Skip to content

Commit 09f164d

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-11-2025 7:30:13 PM
1 parent 70a55c5 commit 09f164d

File tree

17 files changed

+168
-102
lines changed

17 files changed

+168
-102
lines changed

‎ej2-react/badge/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Badge CSS files are available in the `ej2-notifications` package folder. Import
7070

7171
Add an HTML span element with `e-badge` class inside any wrapper element (h1) into your return method.
7272

73-
```ts
73+
```
7474
import * as React from 'react';
7575
import * as ReactDOM from "react-dom";
7676
import './App.css';

‎ej2-react/button-group/getting-started.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ elements that should be group inside the div in `App.tsx`.
7979
Add the ButtonGroup component in application as shown in below code example.
8080

8181

82-
82+
{% raw %}
8383
```ts
8484
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
8585
import * as React from 'react';
@@ -99,6 +99,7 @@ function App() {
9999
export default App;
100100

101101
```
102+
{% endraw %}
102103
103104
## Run the application
104105

‎ej2-react/button/getting-started.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ To include the Button component in your application import the `ButtonComponent
8080

8181
Add the Button component in application as shown in below code example.
8282

83+
{% raw %}
8384
```ts
8485

8586
// Import the Button.
@@ -96,6 +97,7 @@ function App() {
9697
}
9798
export default App;
9899
```
100+
{% endraw %}
99101
100102
## Run the application
101103

‎ej2-react/check-box/getting-started.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ To include the CheckBox component in your application import the `CheckBoxCompo
7474

7575
Add the CheckBox component in application as shown in below code example.
7676

77+
{% raw %}
7778
```ts
7879
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
7980
import * as React from 'react';
@@ -89,6 +90,7 @@ function App() {
8990
}
9091
export default App;
9192
```
93+
{% endraw %}
9294
9395
## Run the application
9496

‎ej2-react/code-snippet/grid/searching-cs7/app/App.jsx

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,24 @@ function App() {
4848
};
4949
const actionComplete = (args) => {
5050
if (args.requestType === 'refresh' && valueAssign) {
51-
document.getElementById(grid.element.id + '_searchbar').value =
52-
values;
51+
document.getElementById(grid.element.id + '_searchbar').value = values;
5352
valueAssign = false;
5453
}
55-
else if (document.getElementById(grid.element.id + '_searchbar').value ===
56-
'' &&
54+
else if (document.getElementById(grid.element.id + '_searchbar').value === '' &&
5755
args.requestType === 'refresh' &&
58-
removeQuery) {
56+
removeQuery
57+
) {
5958
grid.query = new Query();
6059
removeQuery = false;
6160
grid.refresh();
6261
}
62+
document.getElementById(grid.element.id + '_searchbar').addEventListener('keyup', (args) => {
63+
if (args.target.value === '' && (args.key === 'Enter' || args.key === 'Backspace')) {
64+
grid.query = new Query();
65+
removeQuery = false;
66+
grid.refresh();
67+
}
68+
});
6369
};
6470
return (<div>
6571
<GridComponent dataSource={data} height={280} toolbar={toolbarOptions} searchSettings={searchOptions} ref={g => grid = g} actionBegin={actionBegin} actionComplete={actionComplete}>

‎ej2-react/code-snippet/grid/searching-cs7/app/App.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,20 @@ function App() {
4848
};
4949
const actionComplete = (args: SearchEventArgs): void => {
5050
if (args.requestType === 'refresh' && valueAssign) {
51-
document.getElementById(grid.element.id + '_searchbar').value =
52-
values;
51+
document.getElementById(grid.element.id + '_searchbar').value = values;
5352
valueAssign = false;
54-
} else if (
55-
document.getElementById(grid.element.id + '_searchbar').value ===
56-
'' &&
57-
args.requestType === 'refresh' &&
58-
removeQuery
59-
) {
53+
} else if (document.getElementById(grid.element.id + '_searchbar').value === '' && args.requestType === 'refresh' && removeQuery) {
6054
grid.query = new Query();
6155
removeQuery = false;
6256
grid.refreshColumns();
6357
}
58+
(document.getElementById(grid.element.id + '_searchbar') as HTMLElement).addEventListener('keyup', (args) => {
59+
if ((args.target as HTMLInputElement).value === '' && (args.key === 'Enter' || args.key === 'Backspace')) {
60+
grid.query = new Query();
61+
removeQuery = false;
62+
grid.refresh();
63+
}
64+
});
6465
};
6566
return (<div>
6667
<GridComponent dataSource={data} height={280} toolbar= {toolbarOptions}

‎ej2-react/code-snippet/image-editor/default-cs62/app/app.jsx

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import * as ReactDOM from "react-dom";
66

77
export default class App extends React.Component {
88
imgObj;
9-
isTextInserted = false;
109
imageEditorCreated() {
1110
if (Browser.isDevice) {
1211
this.imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg');
@@ -17,16 +16,17 @@ export default class App extends React.Component {
1716
}
1817

1918
addText() {
20-
if (!this.isTextInserted) {
21-
this.isTextInserted = true;
22-
let dimension = this.imgObj.getImageDimension();
23-
this.imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
19+
let dimension = this.imgObj.getImageDimension();
20+
this.imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
21+
const textElement = document.getElementById('text');
22+
if (textElement) {
23+
textElement.setAttribute('disabled', 'true');
2424
}
2525
}
2626

2727
bold() {
2828
const shapes = this.imgObj.getShapeSettings();
29-
if (shapes && shapes[0]) {
29+
if (shapes && shapes[0] && shapes[0].fontStyle) {
3030
if (shapes[0].fontStyle.includes('bold')) {
3131
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'bold');
3232
} else {
@@ -38,7 +38,7 @@ export default class App extends React.Component {
3838

3939
italic() {
4040
const shapes = this.imgObj.getShapeSettings();
41-
if (shapes && shapes[0]) {
41+
if (shapes && shapes[0] && shapes[0].fontStyle) {
4242
if (shapes[0].fontStyle.includes('italic')) {
4343
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'italic');
4444
} else {
@@ -50,7 +50,7 @@ export default class App extends React.Component {
5050

5151
underline() {
5252
const shapes = this.imgObj.getShapeSettings();
53-
if (shapes && shapes[0]) {
53+
if (shapes && shapes[0] && shapes[0].fontStyle) {
5454
if (shapes[0].fontStyle.includes('underline')) {
5555
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'underline');
5656
} else {
@@ -62,7 +62,7 @@ export default class App extends React.Component {
6262

6363
strikethrough() {
6464
const shapes = this.imgObj.getShapeSettings();
65-
if (shapes && shapes[0]) {
65+
if (shapes && shapes[0] && shapes[0].fontStyle) {
6666
if (shapes[0].fontStyle.includes('strikethrough')) {
6767
shapes[0].fontStyle = shapes[0].fontStyle.filter(item => item !== 'strikethrough');
6868
} else {
@@ -73,30 +73,43 @@ export default class App extends React.Component {
7373
}
7474

7575
render() {
76-
return (
77-
<div className='e-img-editor-sample'><ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" width="550px" showQuickAccessToolbar={false} created={this.imageEditorCreated.bind(this)} toolbar={[]} />
78-
<div className="button-group" >
79-
<button id="text" disabled={this.isTextInserted} className="e-btn e-primary" onClick={this.addText.bind(this)} >Add Text</button>
80-
<div className="e-btn-group">
81-
<input type="checkbox" id="bold" value="bold" onClick={this.bold.bind(this)} />
82-
<label className="e-btn" for="bold">
83-
<span className="e-icons e-bold"></span>Bold
84-
</label>
85-
<input type="checkbox" id="italic" value="italic" onClick={this.italic.bind(this)} />
86-
<label className="e-btn" for="italic">
87-
<span className="e-icons e-italic"></span>Italic
88-
</label>
89-
<input type="checkbox" id="underline" value="underline" onClick={this.underline.bind(this)} />
90-
<label className="e-btn" for="underline">
91-
<span className="e-icons e-underline"></span>Underline
92-
</label>
93-
<input type="checkbox" id="strikethrough" value="strikethrough" onClick={this.strikethrough.bind(this)} />
94-
<label className="e-btn" for="strikethrough">
95-
<span className="e-icons e-strikethrough"></span>Strikethrough
96-
</label>
97-
</div>
76+
return (<div className='e-img-editor-sample'>
77+
<ImageEditorComponent
78+
ref={(img) => { this.imgObj = img; }}
79+
height="350px"
80+
width="550px"
81+
showQuickAccessToolbar={false}
82+
created={this.imageEditorCreated.bind(this)}
83+
toolbar={[]}
84+
/>
85+
<div className="button-group" >
86+
<button
87+
id="text"
88+
className="e-btn e-primary"
89+
onClick={this.addText.bind(this)}
90+
>
91+
Add Text
92+
</button>
93+
<div className="e-btn-group">
94+
<input type="checkbox" id="bold" value="bold" onChange={this.bold.bind(this)} />
95+
<label className="e-btn" htmlFor="bold">
96+
<span className="e-icons e-bold"></span>Bold
97+
</label>
98+
<input type="checkbox" id="italic" value="italic" onChange={this.italic.bind(this)} />
99+
<label className="e-btn" htmlFor="italic">
100+
<span className="e-icons e-italic"></span>Italic
101+
</label>
102+
<input type="checkbox" id="underline" value="underline" onChange={this.underline.bind(this)} />
103+
<label className="e-btn" htmlFor="underline">
104+
<span className="e-icons e-underline"></span>Underline
105+
</label>
106+
<input type="checkbox" id="strikethrough" value="strikethrough" onChange={this.strikethrough.bind(this)} />
107+
<label className="e-btn" htmlFor="strikethrough">
108+
<span className="e-icons e-strikethrough"></span>Strikethrough
109+
</label>
98110
</div>
99111
</div>
112+
</div>
100113
);
101114
}
102115
}

‎ej2-react/code-snippet/image-editor/default-cs62/app/app.tsx

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
1+
import { ImageEditorComponent, Dimension, ShapeSettings} from '@syncfusion/ej2-react-image-editor';
22
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
33
import { Browser } from '@syncfusion/ej2-base';
44
import * as React from 'react';
55
import * as ReactDOM from "react-dom";
66

77
function App() {
88
let imgObj: ImageEditorComponent;
9-
let isTextInserted: boolean = false;
10-
119
function imageEditorCreated(): void {
1210
if (Browser.isDevice) {
1311
imgObj.open('https://ej2.syncfusion.com/react/documentation/image-editor/images/flower.jpeg');
@@ -17,16 +15,17 @@ function App() {
1715
}
1816

1917
function addText(): void {
20-
if (!isTextInserted) {
21-
isTextInserted = true;
22-
let dimension: any = imgObj.getImageDimension();
23-
imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
18+
const dimension: Dimension = imgObj.getImageDimension();
19+
imgObj.drawText(dimension.x, dimension.y, 'Syncfusion');
20+
const textElement = document.getElementById('text');
21+
if (textElement) {
22+
textElement.setAttribute('disabled', 'true');
2423
}
2524
}
2625

2726
function bold(): void {
28-
const shapes: any = imgObj.getShapeSettings();
29-
if (shapes && shapes[0]) {
27+
const shapes: ShapeSettings[] = imgObj.getShapeSettings();
28+
if (shapes && shapes[0].fontStyle) {
3029
if (shapes[0].fontStyle.includes('bold')) {
3130
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'bold');
3231
} else {
@@ -37,8 +36,8 @@ function App() {
3736
}
3837

3938
function italic(): void {
40-
const shapes: any = imgObj.getShapeSettings();
41-
if (shapes && shapes[0]) {
39+
const shapes: ShapeSettings[] = imgObj.getShapeSettings();
40+
if (shapes && shapes[0].fontStyle) {
4241
if (shapes[0].fontStyle.includes('italic')) {
4342
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'italic');
4443
} else {
@@ -49,8 +48,8 @@ function App() {
4948
}
5049

5150
function underline(): void {
52-
const shapes: any = imgObj.getShapeSettings();
53-
if (shapes && shapes[0]) {
51+
const shapes: ShapeSettings[] = imgObj.getShapeSettings();
52+
if (shapes && shapes[0].fontStyle) {
5453
if (shapes[0].fontStyle.includes('underline')) {
5554
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'underline');
5655
} else {
@@ -61,8 +60,8 @@ function App() {
6160
}
6261

6362
function strikethrough(): void {
64-
const shapes: any = imgObj.getShapeSettings();
65-
if (shapes && shapes[0]) {
63+
const shapes: ShapeSettings[] = imgObj.getShapeSettings();
64+
if (shapes && shapes[0].fontStyle) {
6665
if (shapes[0].fontStyle.includes('strikethrough')) {
6766
shapes[0].fontStyle = shapes[0].fontStyle.filter((item: string) => item !== 'strikethrough');
6867
} else {
@@ -73,29 +72,44 @@ function App() {
7372
}
7473

7574
return (
76-
<div className='e-img-editor-sample'><ImageEditorComponent ref={(img) => { imgObj = img; }} height="350px" width="550px" showQuickAccessToolbar={false} created={imageEditorCreated} toolbar={[]} />
77-
<div className="button-group" >
78-
<button id="text" disabled={isTextInserted} className="e-btn e-primary" onClick={addText} >Add Text</button>
79-
<div className="e-btn-group">
80-
<input type="checkbox" id="bold" value="bold" onClick={bold} />
81-
<label className="e-btn" for="bold">
82-
<span className="e-icons e-bold"></span>Bold
83-
</label>
84-
<input type="checkbox" id="italic" value="italic" onClick={italic} />
85-
<label className="e-btn" for="italic">
86-
<span className="e-icons e-italic"></span>Italic
87-
</label>
88-
<input type="checkbox" id="underline" value="underline" onClick={underline} />
89-
<label className="e-btn" for="underline">
90-
<span className="e-icons e-underline"></span>Underline
91-
</label>
92-
<input type="checkbox" id="strikethrough" value="strikethrough" onClick={strikethrough} />
93-
<label className="e-btn" for="strikethrough">
94-
<span className="e-icons e-strikethrough"></span>Strikethrough
95-
</label>
96-
</div>
75+
<div className='e-img-editor-sample'>
76+
<ImageEditorComponent
77+
ref={(img: ImageEditorComponent) => { imgObj = img; }}
78+
height="350px"
79+
width="550px"
80+
showQuickAccessToolbar={false}
81+
created={imageEditorCreated}
82+
toolbar={[]}
83+
/>
84+
<div className="button-group" >
85+
<button
86+
id="text"
87+
className="e-btn e-primary"
88+
onClick={addText}
89+
>
90+
Add Text
91+
</button>
92+
<div className="e-btn-group">
93+
<input type="checkbox" id="bold" value="bold" onChange={bold} />
94+
<label className="e-btn" htmlFor="bold">
95+
<span className="e-icons e-bold"></span>Bold
96+
</label>
97+
<input type="checkbox" id="italic" value="italic" onChange={italic} />
98+
<label className="e-btn" htmlFor="italic">
99+
<span className="e-icons e-italic"></span>Italic
100+
</label>
101+
<input type="checkbox" id="underline" value="underline" onChange={underline} />
102+
<label className="e-btn" htmlFor="underline">
103+
<span className="e-icons e-underline"></span>Underline
104+
</label>
105+
<input type="checkbox" id="strikethrough" value="strikethrough" onChange={strikethrough} />
106+
<label className="e-btn" htmlFor="strikethrough">
107+
<span className="e-icons e-strikethrough"></span>Strikethrough
108+
</label>
97109
</div>
98-
</div>);
110+
</div>
111+
</div>
112+
);
99113
}
100114
export default App;
101115
ReactDOM.render(<App />, document.getElementById('image-editor'));

0 commit comments

Comments
 (0)