Skip to content

Commit 9df456a

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 06-14-2024 4:30:18 PM
1 parent 3f9065f commit 9df456a

File tree

312 files changed

+11823
-775
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

312 files changed

+11823
-775
lines changed

‎ej2-react-toc.html

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@
230230
<li><a href="/ej2-react/auto-complete/templates">Templates</a></li>
231231
<li><a href="/ej2-react/auto-complete/virtual-scroll">Virtualization</a></li>
232232
<li><a href="/ej2-react/auto-complete/grouping">Grouping</a></li>
233+
<li><a href="/ej2-react/auto-complete/disabled-items">Disabled Items</a></li>
233234
<li><a href="/ej2-react/auto-complete/filtering">Filtering</a></li>
234235
<li><a href="/ej2-react/auto-complete/localization">Localization</a></li>
235236
<li><a href="/ej2-react/auto-complete/style">Style and appearance</a></li>
@@ -594,6 +595,7 @@
594595
<li><a href="/ej2-react/combo-box/templates">Templates</a></li>
595596
<li><a href="/ej2-react/combo-box/virtual-scroll">Virtualization</a></li>
596597
<li><a href="/ej2-react/combo-box/grouping">Grouping</a></li>
598+
<li><a href="/ej2-react/combo-box/disabled-items">Disabled Items</a></li>
597599
<li><a href="/ej2-react/combo-box/filtering">Filtering</a></li>
598600
<li><a href="/ej2-react/combo-box/localization">Localization</a></li>
599601
<li><a href="/ej2-react/combo-box/style">Style and appearance</a></li>
@@ -980,6 +982,7 @@
980982
<li><a href="/ej2-react/drop-down-list/templates">Templates</a></li>
981983
<li><a href="/ej2-react/drop-down-list/virtual-scroll">Virtualization</a></li>
982984
<li><a href="/ej2-react/drop-down-list/grouping">Grouping</a></li>
985+
<li><a href="/ej2-react/drop-down-list/disabled-items">Disabled Items</a></li>
983986
<li><a href="/ej2-react/drop-down-list/filtering">Filtering</a></li>
984987
<li><a href="/ej2-react/drop-down-list/localization">Localization</a></li>
985988
<li><a href="/ej2-react/drop-down-list/style">Style and appearance</a></li>
@@ -1679,6 +1682,18 @@
16791682
MultiColumn ComboBox
16801683
<ul>
16811684
<li><a href="/ej2-react/multicolumn-combobox/getting-started">Getting Started</a></li>
1685+
<li><a href="/ej2-react/multicolumn-combobox/data-binding">Data Binding</a></li>
1686+
<li><a href="/ej2-react/multicolumn-combobox/items">Items</a></li>
1687+
<li><a href="/ej2-react/multicolumn-combobox/columns">Columns</a></li>
1688+
<li><a href="/ej2-react/multicolumn-combobox/grouping">Grouping</a></li>
1689+
<li><a href="/ej2-react/multicolumn-combobox/sorting">Sorting</a></li>
1690+
<li><a href="/ej2-react/multicolumn-combobox/filtering">Filtering</a></li>
1691+
<li><a href="/ej2-react/multicolumn-combobox/virtualization">Virtualization</a></li>
1692+
<li><a href="/ej2-react/multicolumn-combobox/templates">Templates</a></li>
1693+
<li><a href="/ej2-react/multicolumn-combobox/localization">Localization</a></li>
1694+
<li><a href="/ej2-react/multicolumn-combobox/accessibility">Accessiblity</a></li>
1695+
<li><a href="/ej2-react/multicolumn-combobox/events">Events</a></li>
1696+
<li><a href="https://ej2.syncfusion.com/react/documentation/api/multicolumn-combobox/">API Reference</a></li>
16821697
</ul>
16831698
</li><li>
16841699
MultiSelect
@@ -1688,6 +1703,7 @@
16881703
<li><a href="/ej2-react/multi-select/value-binding">Value Binding</a></li>
16891704
<li><a href="/ej2-react/multi-select/templates">Templates</a></li>
16901705
<li><a href="/ej2-react/multi-select/grouping">Grouping</a></li>
1706+
<li><a href="/ej2-react/multi-select/disabled-items">Disabled Items</a></li>
16911707
<li><a href="/ej2-react/multi-select/filtering">Filtering</a></li>
16921708
<li><a href="/ej2-react/multi-select/custom-value">Custom Value</a></li>
16931709
<li><a href="/ej2-react/multi-select/virtual-scroll">Virtualization</a></li>
@@ -1812,7 +1828,6 @@
18121828
<li><a href="/ej2-react/pdfviewer/accessibility">Accessibility</a></li>
18131829
<li>How To
18141830
<ul>
1815-
<li><a href="/ej2-react/pdfviewer/how-to/toolbar-customization">Toolbar Customization</a></li>
18161831
<li><a href="/ej2-react/pdfviewer/how-to/load-document">Load the PDF documents dynamically</a></li>
18171832
<li><a href="/ej2-react/pdfviewer/how-to/unload-document">Unload the PDF document Programmatically</a></li>
18181833
<li><a href="/ej2-react/pdfviewer/how-to/lock-annotation">Lock square or rectangle annotations</a></li>
@@ -1830,7 +1845,6 @@
18301845
<li><a href="/ej2-react/pdfviewer/how-to/webservice-not-listening">How to clear the Web service not listening error</a></li>
18311846
<li><a href="/ej2-react/pdfviewer/how-to/retry-timeout">Retry Timeout</a></li>
18321847
<li><a href="/ej2-react/pdfviewer/how-to/load-n-number-page">Load N number of pages on initial loading</a></li>
1833-
<li><a href="/ej2-react/pdfviewer/how-to/toolbar-icon-customization">Customize toolbar</a></li>
18341848
<li><a href="/ej2-react/pdfviewer/how-to/conformance">Supported conformance documents</a></li>
18351849
<li><a href="/ej2-react/pdfviewer/how-to/custom-context-menu">Customize context menu</a></li>
18361850
<li><a href="/ej2-react/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-event">PageRenderInitiate and PageRenderComplete event</a></li>

‎ej2-react/auto-complete/disabled-items.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
layout: post
3+
title: Disabled Items in React AutoComplete component | Syncfusion
4+
description: Learn here all about Disabled Items in Syncfusion React AutoComplete component of Syncfusion Essential JS 2 and more.
5+
control: Disabled Items
6+
platform: ej2-react
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Disabled Items in React AutoComplete component
12+
13+
The AutoComplete provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [disabled](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#fields) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `fields.disabled` property.
14+
15+
In the following sample, State are grouped according on its category using `disabled` field.
16+
17+
`[Class-component]`
18+
19+
{% tabs %}
20+
{% highlight js tabtitle="index.jsx" %}
21+
{% include code-snippet/autocomplete/basic-cs28/app/index.jsx %}
22+
{% endhighlight %}
23+
{% highlight ts tabtitle="index.tsx" %}
24+
{% include code-snippet/autocomplete/basic-cs28/app/index.tsx %}
25+
{% endhighlight %}
26+
{% endtabs %}
27+
28+
{% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs28" %}
29+
30+
`[Functional-component]`
31+
32+
{% tabs %}
33+
{% highlight js tabtitle="index.jsx" %}
34+
{% include code-snippet/autocomplete/basic-cs29/app/index.jsx %}
35+
{% endhighlight %}
36+
{% highlight ts tabtitle="index.tsx" %}
37+
{% include code-snippet/autocomplete/basic-cs29/app/index.tsx %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
{% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs29" %}
42+
43+
## Disable Item Method
44+
45+
The [disableItem](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#disableItem) method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the [dataSource](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#datasource), when the item is disabled using this method. If the selected item is disabled dynamically, then the selection will be cleared.
46+
47+
| Parameter | Type | Description |
48+
|------|------|------|
49+
| itemHTMLLIElement | <code>HTMLLIElement</code> | It accepts the HTML Li element of the item to be removed. |
50+
| itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
51+
| itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
52+
53+
## Enabled
54+
55+
If you want to disabled the overall component to set the [enabled](https://ej2.syncfusion.com/react/documentation/api/auto-complete/#enabled) property to false.
56+
57+
{% [Disabled AutoComplete Component](././images/autocomplete-disable.png)" %}

‎ej2-react/code-snippet/autocomplete/basic-cs28/app/index.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
2+
import * as React from 'react';
3+
import * as ReactDOM from 'react-dom';
4+
export default class App extends React.Component {
5+
// define the data with category
6+
statusData = [
7+
{ "Status": "Open", "State": false },
8+
{ "Status": "Waiting for Customer", "State": false },
9+
{ "Status": "On Hold", "State": true },
10+
{ "Status": "Follow-up", "State": false },
11+
{ "Status": "Closed", "State": true },
12+
{ "Status": "Solved", "State": false },
13+
{ "Status": "Feature Request", "State": false }
14+
];
15+
// map the groupBy field with Category column
16+
fields = { value: 'Status', disabled: 'State' };
17+
render() {
18+
return (
19+
// specifies the tag for render the AutoComplete component
20+
<AutoCompleteComponent id="atcelement" fields={this.fields} dataSource={this.statusData} placeholder="Select Status"/>);
21+
}
22+
}
23+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/autocomplete/basic-cs28/app/index.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
3+
4+
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
5+
import * as React from 'react';
6+
import * as ReactDOM from 'react-dom';
7+
8+
export default class App extends React.Component<{}, {}> {
9+
// define the data with category
10+
private statusData: { [key: string]: Object }[] = [
11+
{ "Status": "Open", "State": false },
12+
{ "Status": "Waiting for Customer", "State": false },
13+
{ "Status": "On Hold", "State": true },
14+
{ "Status": "Follow-up", "State": false },
15+
{ "Status": "Closed", "State": true },
16+
{ "Status": "Solved", "State": false },
17+
{ "Status": "Feature Request", "State": false }
18+
];
19+
20+
// map the groupBy field with Category column
21+
private fields: object = { value: 'Status', disabled: 'State' };
22+
23+
public render() {
24+
return (
25+
// specifies the tag for render the AutoComplete component
26+
<AutoCompleteComponent id="atcelement" fields={this.fields} dataSource={this.statusData} placeholder="Select Status" />
27+
);
28+
}
29+
}
30+
ReactDOM.render(<App />, document.getElementById('sample'));
31+
32+

‎ej2-react/code-snippet/autocomplete/basic-cs28/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React AutoComplete</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-inputs/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.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+
<style>
16+
#loader {
17+
color: #008cff;
18+
height: 40px;
19+
left: 45%;
20+
position: absolute;
21+
top: 45%;
22+
width: 30%;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id='sample' style="margin: 20px auto 0; width:250px;">
29+
<div id='loader'>Loading....</div>
30+
</div>
31+
</body>
32+
33+
</html>

‎ej2-react/code-snippet/autocomplete/basic-cs28/systemjs.config.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
33+
34+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
35+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
36+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
37+
"react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
38+
},
39+
packages: {
40+
'app': { main: 'index', defaultExtension: 'tsx' },
41+
}
42+
43+
});
44+
45+
System.import('app');

‎ej2-react/code-snippet/autocomplete/basic-cs29/app/index.jsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
2+
import * as React from 'react';
3+
import * as ReactDOM from 'react-dom';
4+
function App() {
5+
// define the data with category
6+
let statusData = [
7+
{ "Status": "Open", "State": false },
8+
{ "Status": "Waiting for Customer", "State": false },
9+
{ "Status": "On Hold", "State": true },
10+
{ "Status": "Follow-up", "State": false },
11+
{ "Status": "Closed", "State": true },
12+
{ "Status": "Solved", "State": false },
13+
{ "Status": "Feature Request", "State": false }
14+
];
15+
// map the groupBy field with Category column
16+
const fields = { value: 'Status', disabled: 'State' };
17+
return (
18+
// specifies the tag for render the AutoComplete component
19+
<AutoCompleteComponent id="atcelement" fields={fields} dataSource={statusData} placeholder="Select Status"/>);
20+
}
21+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/autocomplete/basic-cs29/app/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
3+
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
7+
function App() {
8+
// define the data with category
9+
let statusData: { [key: string]: Object }[] = [
10+
{ "Status": "Open", "State": false },
11+
{ "Status": "Waiting for Customer", "State": false },
12+
{ "Status": "On Hold", "State": true },
13+
{ "Status": "Follow-up", "State": false },
14+
{ "Status": "Closed", "State": true },
15+
{ "Status": "Solved", "State": false },
16+
{ "Status": "Feature Request", "State": false }
17+
];
18+
19+
// map the groupBy field with Category column
20+
const fields: object = { value: 'Status', disabled: 'State' };
21+
return (
22+
// specifies the tag for render the AutoComplete component
23+
<AutoCompleteComponent id="atcelement" fields={fields} dataSource={statusData} placeholder="Select Status" />
24+
);
25+
}
26+
ReactDOM.render(<App />, document.getElementById('sample'));
27+
28+

‎ej2-react/code-snippet/autocomplete/basic-cs29/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React AutoComplete</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-inputs/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.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+
<style>
16+
#loader {
17+
color: #008cff;
18+
height: 40px;
19+
left: 45%;
20+
position: absolute;
21+
top: 45%;
22+
width: 30%;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id='sample' style="margin: 20px auto 0; width:250px;">
29+
<div id='loader'>Loading....</div>
30+
</div>
31+
</body>
32+
33+
</html>

‎ej2-react/code-snippet/autocomplete/basic-cs29/systemjs.config.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
33+
34+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
35+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
36+
"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js",
37+
"react":"https://unpkg.com/react@16.3.1/umd/react.production.min.js",
38+
},
39+
packages: {
40+
'app': { main: 'index', defaultExtension: 'tsx' },
41+
}
42+
43+
});
44+
45+
System.import('app');

0 commit comments

Comments
 (0)