Skip to content

Commit e161761

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-18-2024 4:30:38 PM
1 parent 4073413 commit e161761

File tree

32 files changed

+606
-27
lines changed

32 files changed

+606
-27
lines changed

‎ej2-react-toc.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1087,7 +1087,7 @@
10871087
<li><a href="/ej2-react/drop-down-button/popup-items">Popup Items</a></li>
10881088
<li><a href="/ej2-react/drop-down-button/accessibility">Accessibility</a></li>
10891089
<li><a href="/ej2-react/drop-down-button/style-and-appearance">Styles and Appearances</a></li>
1090-
<li><a href="/ej2-react/drop-down-button/item-template">Item template</a></li>
1090+
<li><a href="/ej2-react/drop-down-button/item-template">Item Template</a></li>
10911091
<li><a href="/ej2-react/drop-down-button/animation">Animation</a></li>
10921092
<li>How To
10931093
<ul>
@@ -1805,7 +1805,7 @@
18051805
<li><a href="/ej2-react/menu/how-to/right-to-left">Right to left</a></li>
18061806
<li><a href="/ej2-react/menu/how-to/set-title">Set title for Menu items</a></li>
18071807
<li><a href="/ej2-react/menu/how-to/menu-item-click">Open menu and sub menu on click only</a></li>
1808-
<li><a href="/ej2-react/menu/how-to/custom-attributes-menu-items">Set custom attributes for Menu items</a></li>
1808+
<li><a href="/ej2-react/menu/how-to/custom-attributes-menu-items">Customize HTML attributes for Menu items</a></li>
18091809
</ul>
18101810
</li>
18111811
<li><a href="/ej2-react/menu/ej1-api-migration">Migration from Essential JS 1</a></li>
@@ -3132,7 +3132,7 @@ <h1>Summary of Predefined Dialogs component</h1>
31323132
</ul>
31333133
</li> <li>Release Notes
31343134
<ul>
3135-
<li>2024 Volume 4 - 28.*<ul><li><a href="/ej2-react/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-react/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-react/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-react/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-react/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-react/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-react/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-react/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-react/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-react/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-react/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-react/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-react/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-react/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-react/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-react/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-react/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-react/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-react/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-react/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-react/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-react/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
3135+
<li>2024 Volume 4 - 28.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/ej2-react/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-react/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-react/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-react/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-react/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-react/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-react/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-react/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-react/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-react/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-react/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-react/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-react/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-react/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-react/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-react/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-react/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-react/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-react/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-react/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-react/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-react/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-react/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-react/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-react/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-react/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-react/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-react/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-react/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-react/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-react/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-react/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-react/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-react/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-react/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
31363136
<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-react/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-react/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-react/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-react/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-react/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-react/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-react/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-react/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-react/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-react/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-react/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-react/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
31373137
<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-react/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-react/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-react/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-react/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-react/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-react/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-react/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-react/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-react/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-react/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-react/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-react/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
31383138
<li>2023 Volume 2 - 22.*

‎ej2-react/Release-notes/28.1.35.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for React Weekly Release Release Notes
3+
description: Essential Studio for React Weekly Release Release Notes
4+
platform: ej2-react
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for React Release Notes
9+
10+
{% include release-info.html date="December 19, 2024" version="v28.1.35" %}
11+
12+
{% directory path: _includes/release-notes/v28.1.35 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}

‎ej2-react/chips/customization.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,3 +118,19 @@ Outline chip has the border with the background transparent. It can be set using
118118
{% endtabs %}
119119

120120
{% previewsample "page.domainurl/code-snippet/chips/avatar-cs6" %}
121+
122+
## Template
123+
124+
The [`template`](https://helpej2.syncfusion.com/react/documentation/api/chips/#template) property of the Chips component allows users to fully customize the layout and design of each chip. By using the `template` property, users can include custom HTML elements, such as links, icons, or additional content.
125+
126+
127+
{% tabs %}
128+
{% highlight js tabtitle="app.jsx" %}
129+
{% include code-snippet/chips/avatar-cs7/app/app.jsx %}
130+
{% endhighlight %}
131+
{% highlight ts tabtitle="app.tsx" %}
132+
{% include code-snippet/chips/avatar-cs7/app/app.tsx %}
133+
{% endhighlight %}
134+
{% endtabs %}
135+
136+
{% previewsample "page.domainurl/code-snippet/chips/avatar-cs7" %}

‎ej2-react/code-snippet/chips/avatar-cs7/app/app.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import * as ReactDom from 'react-dom';
3+
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
4+
import './index.css';
5+
import { enableRipple } from '@syncfusion/ej2-base';
6+
enableRipple(true);
7+
// To render Chip.
8+
function App() {
9+
return (<ChipListComponent id="chip-avatar">
10+
<ChipsDirective>
11+
<ChipDirective
12+
leadingIconCss="trendingIcon"
13+
template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'
14+
></ChipDirective>
15+
<ChipDirective
16+
leadingIconCss="cameraIcon"
17+
template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'
18+
></ChipDirective>
19+
<ChipDirective
20+
leadingIconCss="trendingIcon"
21+
template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'
22+
></ChipDirective>
23+
</ChipsDirective>
24+
</ChipListComponent>);
25+
}
26+
export default App;
27+
ReactDom.render(<App />, document.getElementById('chip'));

‎ej2-react/code-snippet/chips/avatar-cs7/app/app.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import * as ReactDom from 'react-dom';
3+
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
4+
import { enableRipple } from '@syncfusion/ej2-base';
5+
6+
enableRipple(true);
7+
8+
// To render Chip.
9+
function App() {
10+
return (
11+
<ChipListComponent id="chip-avatar">
12+
<ChipsDirective>
13+
<ChipDirective
14+
leadingIconCss="trendingIcon"
15+
template='<a href="https://timesofindia.indiatimes.com/news" target="_blank" class="anchorElement">#BreakingNews</a><span class="textElement">125k posts</span>'
16+
></ChipDirective>
17+
<ChipDirective
18+
leadingIconCss="cameraIcon"
19+
template='<a href="https://blog.google/products/photos/" target="_blank" class="anchorElement">#PhotoOfTheDay</a>'
20+
></ChipDirective>
21+
<ChipDirective
22+
leadingIconCss="trendingIcon"
23+
template='<a href="https://indianexpress.com/section/technology/" target="_blank" class="anchorElement">#TechNews</a><span class="textElement">107k posts</span>'
24+
></ChipDirective>
25+
</ChipsDirective>
26+
</ChipListComponent>
27+
);
28+
}
29+
export default App;
30+
ReactDom.render(<App />,document.getElementById('chip'));

‎ej2-react/code-snippet/chips/avatar-cs7/index.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#loader {
2+
color: #008cff;
3+
height: 40px;
4+
left: 45%;
5+
position: absolute;
6+
top: 45%;
7+
width: 30%;
8+
}
9+
10+
#chip .e-chip .trendingIcon {
11+
margin: 4px 0 4px 6px;
12+
width: 16px;
13+
height: 16px;
14+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0ibTMyIDEyIDQuNTkgNC41OS05Ljc2IDkuNzUtOC04TDQgMzMuMTcgNi44MyAzNmwxMi0xMiA4IDggMTIuNTgtMTIuNTlMNDQgMjRWMTJ6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==');
15+
}
16+
17+
#chip .e-chip .cameraIcon {
18+
margin: 4px 0 4px 6px;
19+
width: 16px;
20+
height: 16px;
21+
background-image: url('data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LDYuNUgxNy43MmwtLjMyLTFhMywzLDAsMCwwLTIuODQtMkg5LjQ0QTMsMywwLDAsMCw2LjYsNS41NWwtLjMyLDFINWEzLDMsMCwwLDAtMywzdjhhMywzLDAsMCwwLDMsM0gxOWEzLDMsMCwwLDAsMy0zdi04QTMsMywwLDAsMCwxOSw2LjVabTEsMTFhMSwxLDAsMCwxLTEsMUg1YTEsMSwwLDAsMS0xLTF2LThhMSwxLDAsMCwxLDEtMUg3YTEsMSwwLDAsMCwxLS42OGwuNTQtMS42NGExLDEsMCwwLDEsLjk1LS42OGg1LjEyYTEsMSwwLDAsMSwuOTUuNjhsLjU0LDEuNjRBMSwxLDAsMCwwLDE3LDguNWgyYTEsMSwwLDAsMSwxLDFabS04LTlhNCw0LDAsMSwwLDQsNEE0LDQsMCwwLDAsMTIsOC41Wm0wLDZhMiwyLDAsMSwxLDItMkEyLDIsMCwwLDEsMTIsMTQuNVoiLz48L3N2Zz4=');
22+
}
23+
24+
#chip .e-chip .anchorElement {
25+
margin: 0 4px;
26+
font-weight: 600;
27+
height: 16px;
28+
line-height: 16px;
29+
font-size: 12px;
30+
color: #0f6cbd;
31+
text-decoration: none;
32+
}
33+
34+
#chip .e-chip .textElement {
35+
font-weight: 400;
36+
height: 14px;
37+
line-height: 14px;
38+
font-size: 10px;
39+
margin-right: 6px;
40+
}

‎ej2-react/code-snippet/chips/avatar-cs7/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React Button</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/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" />
12+
<link href="index.css" rel="stylesheet" />
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
14+
<script src="systemjs.config.js"></script>
15+
</head>
16+
17+
<body>
18+
<div id='chip'>
19+
<div id='loader'>Loading....</div>
20+
</div>
21+
</body>
22+
23+
</html>

‎ej2-react/code-snippet/chips/avatar-cs7/systemjs.config.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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/20.3.56/"
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-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
27+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
28+
"@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
29+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js",
30+
"react":"https://unpkg.com/react@16.3.1/umd/react.development.js",
31+
},
32+
packages: {
33+
'app': { main: 'app', defaultExtension: 'tsx' },
34+
}
35+
36+
});
37+
38+
System.import('app');

‎ej2-react/code-snippet/file-manager/upload-feature-cs1/app/App.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% raw %}
2+
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
3+
import * as React from 'react';
4+
function App() {
5+
let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
6+
let fileObj;
7+
function onCreated() {
8+
// fileObj.uploadObj.dropArea = null; // Restrict file uploads by dragging them from the local file system to the File Manager.
9+
}
10+
return (<div className="control-section">
11+
<FileManagerComponent ref={s => (fileObj = s)} id="file" view="LargeIcons" created={onCreated.bind(this)}
12+
ajaxSettings={{
13+
downloadUrl: hostUrl + 'api/FileManager/Download',
14+
getImageUrl: hostUrl + "api/FileManager/GetImage",
15+
uploadUrl: hostUrl + 'api/FileManager/Upload',
16+
url: hostUrl + "api/FileManager/FileOperations"
17+
}} uploadSettings={{ allowedExtensions: '.jpg,.png', autoClose: false, autoUpload: false, chunkSize: 5242880, minFileSize: 120, maxFileSize: 73728000 }}>
18+
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
19+
</FileManagerComponent>
20+
</div>);
21+
}
22+
export default App;
23+
{% endraw %}

‎ej2-react/code-snippet/file-manager/upload-feature-cs1/app/App.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{% raw %}
2+
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
3+
import * as React from 'react';
4+
5+
function App() {
6+
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
7+
let fileObj: FileManagerComponent;
8+
function onCreated(args: any) {
9+
// fileObj.uploadObj.dropArea = null; // Restrict file uploads by dragging them from the local file system to the File Manager.
10+
}
11+
return (
12+
<div className="control-section">
13+
<FileManagerComponent ref={s => (fileObj = s as FileManagerComponent)} id="file" view="LargeIcons" created={onCreated.bind(this)}
14+
ajaxSettings={{
15+
downloadUrl: hostUrl + 'api/FileManager/Download',
16+
getImageUrl: hostUrl + "api/FileManager/GetImage",
17+
uploadUrl: hostUrl + 'api/FileManager/Upload',
18+
url: hostUrl + "api/FileManager/FileOperations"
19+
}} uploadSettings={{ allowedExtensions: '.jpg,.png', autoClose: false, autoUpload: false, chunkSize: 5242880, minFileSize: 120, maxFileSize: 73728000 }}>
20+
<Inject services={[NavigationPane, DetailsView, Toolbar]} />
21+
</FileManagerComponent>
22+
</div>
23+
);
24+
}
25+
export default App;
26+
{% endraw %}

‎ej2-react/code-snippet/file-manager/upload-feature-cs1/app/index.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import App from './App';
4+
ReactDOM.render(<App />, document.getElementById('root'));

‎ej2-react/code-snippet/file-manager/upload-feature-cs1/app/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);

0 commit comments

Comments
 (0)