Skip to content

Commit a9430fb

Browse files
author
pipeline
committed
config(EJ2-4485): Multiselect merge changes.
1 parent f1bf36b commit a9430fb

21 files changed

+808
-2
lines changed

‎src/common/sampleList.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/common/sampleOrder.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"Data Visualization": ["Chart", "Circular Gauge", "Linear Gauge"],
33
"Grids": ["Grid"],
4-
"Editors": ["Form Validator", "DropDownList", "ComboBox", "AutoComplete", "Calendar", "DatePicker", "DateRangePicker", "NumericTextBox", "Button", "TextBoxes", "TimePicker", "MaskedTextBox"],
4+
"Editors": ["Form Validator", "DropDownList", "ComboBox", "AutoComplete", "MultiSelect", "Calendar", "DatePicker", "DateRangePicker", "NumericTextBox", "Button", "TextBoxes", "TimePicker", "MaskedTextBox"],
55
"Layout": ["ListView", "Dialog", "Tooltip"],
66
"Navigation": ["Toolbar"]
77
}

‎src/multiselect/custom-value-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * DropDownList Default Sample\n */\nimport { MultiSelect } from '@syncfusion/ej2-dropdowns';\n\n\n\n let countries: { [key: string]: Object; }[] = [\n { Name: 'Australia', Code: 'AU' },\n { Name: 'Bermuda', Code: 'BM' },\n { Name: 'Canada', Code: 'CA' },\n { Name: 'Cameroon', Code: 'CM' },\n { Name: 'Denmark', Code: 'DK' },\n { Name: 'France', Code: 'FR' },\n { Name: 'Finland', Code: 'FI' },\n { Name: 'Germany', Code: 'DE' },\n { Name: 'Greenland', Code: 'GL' },\n { Name: 'Hong Kong', Code: 'HK' },\n { Name: 'India', Code: 'IN' },\n { Name: 'Italy', Code: 'IT' },\n { Name: 'Japan', Code: 'JP' },\n { Name: 'Mexico', Code: 'MX' },\n { Name: 'Norway', Code: 'NO' },\n { Name: 'Poland', Code: 'PL' },\n { Name: 'Switzerland', Code: 'CH' },\n { Name: 'United Kingdom', Code: 'GB' },\n { Name: 'United States', Code: 'US' }\n ];\n let games: MultiSelect = new MultiSelect({\n dataSource: countries,\n fields: { text: 'Name', value: 'Code' },\n placeholder: 'Select countries',\n allowCustomValue: true,\n mode: 'box'\n });\n games.appendTo('#default');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"control-wrapper\">\n <div id=\"content\">\n <div class=\"control-styles\">\n <h4>Custom Value Support</h4>\n <input type=\"text\" id=\"default\">\n </div>\n </div>\n </div>\n</div>\n\n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 300px;\n }\n\n .property-section .right-side {\n padding-left: 10px;\n }\n\n .property-section .left-side {\n padding: 5px;\n width: 25%\n }\n .control-styles {\n margin: 0 auto; \n width:400px; \n padding-top: 30px\n }\n .e-bigger .control-styles {\n width:300px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/multiselect/custom-value.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="control-section">
2+
<div class="control-wrapper">
3+
<div id='content'>
4+
<div class="control-styles">
5+
<h4>Custom Value Support</h4>
6+
<input type="text" id='default' />
7+
</div>
8+
</div>
9+
</div>
10+
</div>
11+
12+
<div id="description">
13+
<p>The MultiSelect allows user to add a non-present option to the component value when <code>allowCustomValue</code> is enabled. Typed custom value able to tag the selected item. </p>
14+
</div>
15+
16+
<style>
17+
.control-wrapper {
18+
margin: 0 auto;
19+
width: 300px;
20+
}
21+
22+
.property-section .right-side {
23+
padding-left: 10px;
24+
}
25+
26+
.property-section .left-side {
27+
padding: 5px;
28+
width: 25%
29+
}
30+
.control-styles {
31+
margin: 0 auto;
32+
width:400px;
33+
padding-top: 30px
34+
}
35+
.e-bigger .control-styles {
36+
width:300px;
37+
}
38+
</style>

‎src/multiselect/custom-value.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* DropDownList Default Sample
3+
*/
4+
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
5+
6+
7+
this.default = () => {
8+
let countries: { [key: string]: Object; }[] = [
9+
{ Name: 'Australia', Code: 'AU' },
10+
{ Name: 'Bermuda', Code: 'BM' },
11+
{ Name: 'Canada', Code: 'CA' },
12+
{ Name: 'Cameroon', Code: 'CM' },
13+
{ Name: 'Denmark', Code: 'DK' },
14+
{ Name: 'France', Code: 'FR' },
15+
{ Name: 'Finland', Code: 'FI' },
16+
{ Name: 'Germany', Code: 'DE' },
17+
{ Name: 'Greenland', Code: 'GL' },
18+
{ Name: 'Hong Kong', Code: 'HK' },
19+
{ Name: 'India', Code: 'IN' },
20+
{ Name: 'Italy', Code: 'IT' },
21+
{ Name: 'Japan', Code: 'JP' },
22+
{ Name: 'Mexico', Code: 'MX' },
23+
{ Name: 'Norway', Code: 'NO' },
24+
{ Name: 'Poland', Code: 'PL' },
25+
{ Name: 'Switzerland', Code: 'CH' },
26+
{ Name: 'United Kingdom', Code: 'GB' },
27+
{ Name: 'United States', Code: 'US' }
28+
];
29+
let games: MultiSelect = new MultiSelect({
30+
dataSource: countries,
31+
fields: { text: 'Name', value: 'Code' },
32+
placeholder: 'Select countries',
33+
allowCustomValue: true,
34+
mode: 'box'
35+
});
36+
games.appendTo('#default');
37+
};

‎src/multiselect/data-binding-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * MultiSelect Remote Data & Local Data Samples\n */\nimport { MultiSelect } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\n\n\n\n\n let countries: { [key: string]: Object; }[] = [\n { Name: 'Australia', Code: 'AU' },\n { Name: 'Bermuda', Code: 'BM' },\n { Name: 'Canada', Code: 'CA' },\n { Name: 'Cameroon', Code: 'CM' },\n { Name: 'Denmark', Code: 'DK' },\n { Name: 'France', Code: 'FR' },\n { Name: 'Finland', Code: 'FI' },\n { Name: 'Germany', Code: 'DE' },\n { Name: 'Greenland', Code: 'GL' },\n { Name: 'Hong Kong', Code: 'HK' },\n { Name: 'India', Code: 'IN' },\n { Name: 'Italy', Code: 'IT' },\n { Name: 'Japan', Code: 'JP' },\n { Name: 'Mexico', Code: 'MX' },\n { Name: 'Norway', Code: 'NO' },\n { Name: 'Poland', Code: 'PL' },\n { Name: 'Switzerland', Code: 'CH' },\n { Name: 'United Kingdom', Code: 'GB' },\n { Name: 'United States', Code: 'US' }\n ];\n\n\n let listObj: MultiSelect = new MultiSelect({\n dataSource: new DataManager({\n url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',\n adaptor: new ODataV4Adaptor,\n crossDomain: true\n }),\n query: new Query().select(['ContactName', 'CustomerID']).take(25),\n fields: { text: 'ContactName', value: 'CustomerID' },\n placeholder: 'Select customer',\n sortOrder: 'Ascending',\n actionBegin: () => {\n let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>\n document.querySelector('.control-section').querySelectorAll('.e-chips-close.e-icon');\n element[1].classList.remove('e-close-hooker');\n element[1].classList.add('e-spinner-icon');\n element[1].style.display = 'block';\n },\n actionComplete: () => {\n removeIcon();\n },\n actionFailure: () => {\n removeIcon();\n }\n });\n listObj.appendTo('#remote');\n\n let games: MultiSelect = new MultiSelect({\n dataSource: countries,\n fields: { text: 'Name', value: 'Code'},\n placeholder: 'Select countries',\n });\n games.appendTo('#local');\n function removeIcon(): void {\n let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>\n document.querySelector('.control-section').querySelectorAll('.e-chips-close.e-icon');\n element[1].classList.add('e-close-hooker');\n element[1].classList.remove('e-spinner-icon');\n element[1].style.display = 'none';\n }\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div id=\"local-data\" style=\"padding-top:15px\">\n <div class=\"content\">\n <div class=\"control-styles\">\n <h4> Local Data</h4>\n <input type=\"text\" id=\"local\">\n </div>\n <div id=\"remote-data\">\n <div class=\"control-styles\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"remote\">\n </div>\n </div>\n </div>\n </div> \n</div>\n\n\n\n<style>\n .content {\n margin: 0 auto;\n width: 250px;\n }\n \n .e-multi-select-wrapper .e-chips>.e-chipcontent {\n max-width: 80%;\n white-space: nowrap;\n }\n .control-styles { \n width:400px;\n margin: 0 auto;\n padding-top: 30px; \n }\n .e-bigger .control-styles {\n width:300px;\n }\n .e-spinner-icon {\n background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n background-size: 16px 16px !important;\n background-repeat: no-repeat !important;\n background-position: center center !important;\n top: 2px;\n position: relative;\n left: 24px;\n }\n\n .e-bigger .e-spinner-icon {\n top: 4px;\n }\n\n .e-spinner-icon {\n border: none;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/multiselect/data-binding.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<div class="control-section">
2+
<div id='local-data' style='padding-top:15px'>
3+
<div class='content'>
4+
<div class="control-styles">
5+
<h4> Local Data</h4>
6+
<input type="text" id='local' />
7+
</div>
8+
<div id='remote-data'>
9+
<div class="control-styles">
10+
<h4>Remote Data</h4>
11+
<input type="text" id='remote' />
12+
</div>
13+
</div>
14+
</div>
15+
</div>
16+
</div>
17+
18+
<div id="description">
19+
<p>The MultiSelect loads the data either from local data sources or remote data services which is through the <code>dataSource</code> property. It supports the data type of <code>array</code> or <code>DataManager</code>.
20+
</p>
21+
<p>The DataManager, which will act as an interface between service endpoint and MultiSelect, will require the below minimal
22+
information to interact with service endpoint properly.
23+
</p>
24+
<ul>
25+
<li><code>DataManager->url</code> - Defines the service endpoint to fetch data</li>
26+
<li><code>DataManager->adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
27+
remote binding.</li>
28+
</ul>
29+
<p>Adaptor is responsible for processing response and request from/to the service endpoint.
30+
<code>@syncfusion/ej2-data</code> package provides some predefined adaptors which are designed to interact with particular
31+
service endpoints. They are,</p>
32+
<ul>
33+
<li><code>UrlAdaptor</code> - Use this to interact any remote services.</li>
34+
<li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
35+
<li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
36+
<li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
37+
<li><code>WebMethodAdaptor</code> - Use this to interact with web methods.</li>
38+
</ul>
39+
<p>In this sample, the local data is bound to a collection of sports data and the remote data is bound to a collection of
40+
customer data as an instance of <code>DataManager</code>.
41+
</p>
42+
</div>
43+
44+
<style>
45+
.content {
46+
margin: 0 auto;
47+
width: 250px;
48+
}
49+
50+
.e-multi-select-wrapper .e-chips>.e-chipcontent {
51+
max-width: 80%;
52+
white-space: nowrap;
53+
}
54+
.control-styles {
55+
width:400px;
56+
margin: 0 auto;
57+
padding-top: 30px;
58+
}
59+
.e-bigger .control-styles {
60+
width:300px;
61+
}
62+
.e-spinner-icon {
63+
background-image: url(./styles/images/Medium-36px-spin.gif) !important;
64+
background-size: 16px 16px !important;
65+
background-repeat: no-repeat !important;
66+
background-position: center center !important;
67+
top: 2px;
68+
position: relative;
69+
left: 24px;
70+
}
71+
72+
.e-bigger .e-spinner-icon {
73+
top: 4px;
74+
}
75+
76+
.e-spinner-icon {
77+
border: none;
78+
}
79+
</style>

‎src/multiselect/data-binding.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* MultiSelect Remote Data & Local Data Samples
3+
*/
4+
import { MultiSelect } from '@syncfusion/ej2-dropdowns';
5+
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
6+
7+
8+
this.default = () => {
9+
10+
let countries: { [key: string]: Object; }[] = [
11+
{ Name: 'Australia', Code: 'AU' },
12+
{ Name: 'Bermuda', Code: 'BM' },
13+
{ Name: 'Canada', Code: 'CA' },
14+
{ Name: 'Cameroon', Code: 'CM' },
15+
{ Name: 'Denmark', Code: 'DK' },
16+
{ Name: 'France', Code: 'FR' },
17+
{ Name: 'Finland', Code: 'FI' },
18+
{ Name: 'Germany', Code: 'DE' },
19+
{ Name: 'Greenland', Code: 'GL' },
20+
{ Name: 'Hong Kong', Code: 'HK' },
21+
{ Name: 'India', Code: 'IN' },
22+
{ Name: 'Italy', Code: 'IT' },
23+
{ Name: 'Japan', Code: 'JP' },
24+
{ Name: 'Mexico', Code: 'MX' },
25+
{ Name: 'Norway', Code: 'NO' },
26+
{ Name: 'Poland', Code: 'PL' },
27+
{ Name: 'Switzerland', Code: 'CH' },
28+
{ Name: 'United Kingdom', Code: 'GB' },
29+
{ Name: 'United States', Code: 'US' }
30+
];
31+
32+
33+
let listObj: MultiSelect = new MultiSelect({
34+
dataSource: new DataManager({
35+
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Customers',
36+
adaptor: new ODataV4Adaptor,
37+
crossDomain: true
38+
}),
39+
query: new Query().select(['ContactName', 'CustomerID']).take(25),
40+
fields: { text: 'ContactName', value: 'CustomerID' },
41+
placeholder: 'Select customer',
42+
sortOrder: 'Ascending',
43+
actionBegin: () => {
44+
let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>
45+
document.querySelector('.control-section').querySelectorAll('.e-chips-close.e-icon');
46+
element[1].classList.remove('e-close-hooker');
47+
element[1].classList.add('e-spinner-icon');
48+
element[1].style.display = 'block';
49+
},
50+
actionComplete: () => {
51+
removeIcon();
52+
},
53+
actionFailure: () => {
54+
removeIcon();
55+
}
56+
});
57+
listObj.appendTo('#remote');
58+
59+
let games: MultiSelect = new MultiSelect({
60+
dataSource: countries,
61+
fields: { text: 'Name', value: 'Code'},
62+
placeholder: 'Select countries',
63+
});
64+
games.appendTo('#local');
65+
function removeIcon(): void {
66+
let element: HTMLElement[] = <HTMLElement[] & NodeListOf<Element>>
67+
document.querySelector('.control-section').querySelectorAll('.e-chips-close.e-icon');
68+
element[1].classList.add('e-close-hooker');
69+
element[1].classList.remove('e-spinner-icon');
70+
element[1].style.display = 'none';
71+
}
72+
};

0 commit comments

Comments
 (0)