Skip to content

Commit 163fa15

Browse files
author
pipeline
committed
bug(EJ2-5495): Multiselect icon sample modified
1 parent 62e9f96 commit 163fa15

File tree

5 files changed

+3
-17
lines changed

5 files changed

+3
-17
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * ComboBox Filtering Samples\n */\nimport { ComboBox, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query } from '@syncfusion/ej2-data';\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 ];\n // initialize ComboBox component\n let comboBoxObj: ComboBox = new ComboBox({\n //set the local data to dataSource property\n dataSource: countries,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '300px',\n // set the width of the ComboBox element\n width: '300px',\n // set true for enable the filtering support\n allowFiltering: true,\n // set the template content when the typed character(s) is not present in the list\n noRecordsTemplate:\n '<div><div id=\"nodata\"> No matched item, do you want to add it as new item in list?</div>'\n + '<button id=\"btn\" class=\"e-control e-btn\">Add New Item</button></div>',\n // bind the filtering event\n filtering: (e: FilteringEventArgs) => {\n let query: Query = new Query();\n // frame the query based on search string with filter type.\n query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(countries, query);\n if (document.getElementById('nodata')) {\n // bind click event to button which is shown in popup element when the typed character(s) is not present in the list\n document.getElementById('btn').onclick = () => {\n // get the typed characters\n let customValue: string = (document.getElementById('country') as HTMLInputElement).value;\n // make new object based on typed characters\n let newItem: { [key: string]: Object; } = {'Name': customValue, 'Code': customValue };\n // new object added to data source.\n (comboBoxObj.dataSource as Object[]).push(newItem);\n // close the popup element.\n comboBoxObj.hidePopup();\n // pass new object to addItem method.\n comboBoxObj.addItem(newItem);\n // select the newly added item.\n comboBoxObj.value = customValue;\n };\n }\n }\n });\n comboBoxObj.appendTo('#country');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 style=\"padding-top:75px;\">\n <input type=\"text\" tabindex=\"1\" id=\"country\">\n </div>\n </div>\n</div>\n\n\n \n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 250px;\n }\n #nodata {\n height: 55px;\n opacity: .7;\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 \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * ComboBox Filtering Samples\n */\nimport { ComboBox, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query } from '@syncfusion/ej2-data';\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 ];\n // initialize ComboBox component\n let comboBoxObj: ComboBox = new ComboBox({\n //set the local data to dataSource property\n dataSource: countries,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code' },\n // set the placeholder to ComboBox input element\n placeholder: 'Select a country',\n // set the height of the popup element\n popupHeight: '300px',\n // set true for enable the filtering support\n allowFiltering: true,\n // set the template content when the typed character(s) is not present in the list\n noRecordsTemplate:\n '<div><div id=\"nodata\"> No matched item, do you want to add it as new item in list?</div>'\n + '<button id=\"btn\" class=\"e-control e-btn\">Add New Item</button></div>',\n // bind the filtering event\n filtering: (e: FilteringEventArgs) => {\n let query: Query = new Query();\n // frame the query based on search string with filter type.\n query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;\n // pass the filter data source, filter query to updateData method.\n e.updateData(countries, query);\n if (document.getElementById('nodata')) {\n // bind click event to button which is shown in popup element when the typed character(s) is not present in the list\n document.getElementById('btn').onclick = () => {\n // get the typed characters\n let customValue: string = (document.getElementById('country') as HTMLInputElement).value;\n // make new object based on typed characters\n let newItem: { [key: string]: Object; } = {'Name': customValue, 'Code': customValue };\n // new object added to data source.\n (comboBoxObj.dataSource as Object[]).push(newItem);\n // close the popup element.\n comboBoxObj.hidePopup();\n // pass new object to addItem method.\n comboBoxObj.addItem(newItem);\n // select the newly added item.\n comboBoxObj.value = customValue;\n };\n }\n }\n });\n comboBoxObj.appendTo('#country');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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 style=\"padding-top:75px;\">\n <input type=\"text\" tabindex=\"1\" id=\"country\">\n </div>\n </div>\n</div>\n\n\n \n\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 270px;\n }\n #nodata {\n height: 55px;\n opacity: .7;\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 \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/combobox/custom-value.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<style>
2222
.control-wrapper {
2323
margin: 0 auto;
24-
width: 250px;
24+
width: 270px;
2525
}
2626
#nodata {
2727
height: 55px;

‎src/combobox/custom-value.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ this.default = () => {
2929
placeholder: 'Select a country',
3030
// set the height of the popup element
3131
popupHeight: '300px',
32-
// set the width of the ComboBox element
33-
width: '300px',
3432
// set true for enable the filtering support
3533
allowFiltering: true,
3634
// set the template content when the typed character(s) is not present in the list

0 commit comments

Comments
 (0)