@syncfusion/ej2-dropdowns 18.2.44-4568 → 18.2.44-4569

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (169) hide show
  1. package/.eslintrc.json +244 -0
  2. package/CHANGELOG.md +1524 -1524
  3. package/README.md +118 -118
  4. package/dist/ej2-dropdowns.umd.min.js +1 -1
  5. package/dist/ej2-dropdowns.umd.min.js.map +1 -1
  6. package/dist/es6/ej2-dropdowns.es2015.js +99 -60
  7. package/dist/es6/ej2-dropdowns.es2015.js.map +1 -1
  8. package/dist/es6/ej2-dropdowns.es5.js +191 -151
  9. package/dist/es6/ej2-dropdowns.es5.js.map +1 -1
  10. package/dist/global/ej2-dropdowns.min.js +1 -1
  11. package/dist/global/ej2-dropdowns.min.js.map +1 -1
  12. package/dist/ts/auto-complete/auto-complete.ts +527 -0
  13. package/dist/ts/combo-box/combo-box.ts +957 -0
  14. package/dist/ts/common/highlight-search.ts +47 -0
  15. package/dist/ts/common/incremental-search.ts +81 -0
  16. package/dist/ts/drop-down-base/drop-down-base.ts +1572 -0
  17. package/dist/ts/drop-down-list/drop-down-list.ts +2993 -0
  18. package/dist/ts/drop-down-tree/drop-down-tree.ts +3066 -0
  19. package/dist/ts/list-box/list-box.ts +2317 -0
  20. package/dist/ts/multi-select/checkbox-selection.ts +528 -0
  21. package/dist/ts/multi-select/float-label.ts +155 -0
  22. package/dist/ts/multi-select/interface.ts +66 -0
  23. package/dist/ts/multi-select/multi-select.ts +4216 -0
  24. package/helpers/e2e/index.js +3 -3
  25. package/license +2 -2
  26. package/package.json +77 -78
  27. package/src/auto-complete/auto-complete-model.d.ts +179 -179
  28. package/src/auto-complete/auto-complete.js +19 -19
  29. package/src/combo-box/combo-box-model.d.ts +212 -212
  30. package/src/combo-box/combo-box.js +19 -19
  31. package/src/drop-down-base/drop-down-base-model.d.ts +191 -191
  32. package/src/drop-down-base/drop-down-base.js +19 -19
  33. package/src/drop-down-list/drop-down-list-model.d.ts +222 -222
  34. package/src/drop-down-list/drop-down-list.js +19 -19
  35. package/src/drop-down-tree/drop-down-tree-model.d.ts +344 -344
  36. package/src/drop-down-tree/drop-down-tree.js +19 -19
  37. package/src/list-box/list-box-model.d.ts +156 -156
  38. package/src/list-box/list-box.js +19 -19
  39. package/src/multi-select/multi-select-model.d.ts +452 -452
  40. package/src/multi-select/multi-select.d.ts +2 -0
  41. package/src/multi-select/multi-select.js +73 -36
  42. package/styles/_all.scss +3 -3
  43. package/styles/auto-complete/_bootstrap-dark-definition.scss +3 -3
  44. package/styles/auto-complete/_bootstrap4-definition.scss +11 -11
  45. package/styles/auto-complete/_fabric-dark-definition.scss +2 -2
  46. package/styles/auto-complete/_highcontrast-light-definition.scss +2 -2
  47. package/styles/auto-complete/_material-dark-definition.scss +2 -2
  48. package/styles/bootstrap-dark.css +13 -16
  49. package/styles/bootstrap.css +12 -15
  50. package/styles/bootstrap4.css +6 -10
  51. package/styles/combo-box/_bootstrap-dark-definition.scss +2 -2
  52. package/styles/combo-box/_bootstrap4-definition.scss +11 -11
  53. package/styles/combo-box/_fabric-dark-definition.scss +2 -2
  54. package/styles/combo-box/_highcontrast-light-definition.scss +3 -3
  55. package/styles/combo-box/_material-dark-definition.scss +2 -2
  56. package/styles/drop-down-base/_all.scss +2 -2
  57. package/styles/drop-down-base/_bootstrap-dark-definition.scss +64 -64
  58. package/styles/drop-down-base/_bootstrap-definition.scss +64 -64
  59. package/styles/drop-down-base/_bootstrap4-definition.scss +78 -78
  60. package/styles/drop-down-base/_definition.scss +23 -23
  61. package/styles/drop-down-base/_fabric-dark-definition.scss +68 -68
  62. package/styles/drop-down-base/_fabric-definition.scss +66 -66
  63. package/styles/drop-down-base/_highcontrast-definition.scss +82 -82
  64. package/styles/drop-down-base/_highcontrast-light-definition.scss +81 -81
  65. package/styles/drop-down-base/_layout.scss +108 -108
  66. package/styles/drop-down-base/_material-dark-definition.scss +67 -67
  67. package/styles/drop-down-base/_material-definition.scss +65 -65
  68. package/styles/drop-down-base/_theme.scss +242 -242
  69. package/styles/drop-down-list/_all.scss +2 -2
  70. package/styles/drop-down-list/_bootstrap-dark-definition.scss +157 -157
  71. package/styles/drop-down-list/_bootstrap-definition.scss +156 -156
  72. package/styles/drop-down-list/_bootstrap4-definition.scss +184 -184
  73. package/styles/drop-down-list/_fabric-dark-definition.scss +127 -127
  74. package/styles/drop-down-list/_fabric-definition.scss +122 -122
  75. package/styles/drop-down-list/_highcontrast-definition.scss +131 -131
  76. package/styles/drop-down-list/_highcontrast-light-definition.scss +133 -133
  77. package/styles/drop-down-list/_layout.scss +218 -218
  78. package/styles/drop-down-list/_material-dark-definition.scss +143 -143
  79. package/styles/drop-down-list/_material-definition.scss +166 -166
  80. package/styles/drop-down-list/_theme.scss +10 -10
  81. package/styles/drop-down-list/icons/_bootstrap-dark.scss +14 -14
  82. package/styles/drop-down-list/icons/_bootstrap.scss +14 -14
  83. package/styles/drop-down-list/icons/_bootstrap4.scss +14 -14
  84. package/styles/drop-down-list/icons/_fabric-dark.scss +14 -14
  85. package/styles/drop-down-list/icons/_fabric.scss +14 -14
  86. package/styles/drop-down-list/icons/_highcontrast-light.scss +14 -14
  87. package/styles/drop-down-list/icons/_highcontrast.scss +14 -14
  88. package/styles/drop-down-list/icons/_material-dark.scss +14 -14
  89. package/styles/drop-down-list/icons/_material.scss +14 -14
  90. package/styles/drop-down-list/material.css +9 -0
  91. package/styles/drop-down-tree/_all.scss +2 -2
  92. package/styles/drop-down-tree/_bootstrap-dark-definition.scss +61 -61
  93. package/styles/drop-down-tree/_bootstrap-definition.scss +61 -61
  94. package/styles/drop-down-tree/_bootstrap4-definition.scss +62 -62
  95. package/styles/drop-down-tree/_fabric-dark-definition.scss +62 -62
  96. package/styles/drop-down-tree/_fabric-definition.scss +62 -62
  97. package/styles/drop-down-tree/_highcontrast-definition.scss +62 -62
  98. package/styles/drop-down-tree/_highcontrast-light-definition.scss +62 -62
  99. package/styles/drop-down-tree/_layout.scss +437 -437
  100. package/styles/drop-down-tree/_material-dark-definition.scss +60 -60
  101. package/styles/drop-down-tree/_material-definition.scss +60 -60
  102. package/styles/drop-down-tree/_theme.scss +68 -68
  103. package/styles/drop-down-tree/icons/_bootstrap-dark.scss +11 -11
  104. package/styles/drop-down-tree/icons/_bootstrap.scss +11 -11
  105. package/styles/drop-down-tree/icons/_bootstrap4.scss +11 -11
  106. package/styles/drop-down-tree/icons/_fabric-dark.scss +11 -11
  107. package/styles/drop-down-tree/icons/_fabric.scss +11 -11
  108. package/styles/drop-down-tree/icons/_highcontrast-light.scss +11 -11
  109. package/styles/drop-down-tree/icons/_highcontrast.scss +11 -11
  110. package/styles/drop-down-tree/icons/_material-dark.scss +11 -11
  111. package/styles/drop-down-tree/icons/_material.scss +11 -11
  112. package/styles/drop-down-tree/material.css +9 -0
  113. package/styles/fabric-dark.css +2 -5
  114. package/styles/fabric.css +1 -4
  115. package/styles/highcontrast-light.css +2 -5
  116. package/styles/highcontrast.css +2 -7
  117. package/styles/list-box/_all.scss +2 -2
  118. package/styles/list-box/_bootstrap-dark-definition.scss +118 -118
  119. package/styles/list-box/_bootstrap-definition.scss +112 -112
  120. package/styles/list-box/_bootstrap4-definition.scss +118 -118
  121. package/styles/list-box/_fabric-dark-definition.scss +118 -118
  122. package/styles/list-box/_fabric-definition.scss +112 -112
  123. package/styles/list-box/_highcontrast-definition.scss +112 -112
  124. package/styles/list-box/_highcontrast-light-definition.scss +118 -118
  125. package/styles/list-box/_layout.scss +458 -458
  126. package/styles/list-box/_material-dark-definition.scss +118 -118
  127. package/styles/list-box/_material-definition.scss +112 -112
  128. package/styles/list-box/_theme.scss +273 -273
  129. package/styles/list-box/icons/_bootstrap-dark.scss +25 -25
  130. package/styles/list-box/icons/_bootstrap.scss +25 -25
  131. package/styles/list-box/icons/_bootstrap4.scss +25 -25
  132. package/styles/list-box/icons/_fabric-dark.scss +25 -25
  133. package/styles/list-box/icons/_fabric.scss +25 -25
  134. package/styles/list-box/icons/_highcontrast-light.scss +25 -25
  135. package/styles/list-box/icons/_highcontrast.scss +25 -25
  136. package/styles/list-box/icons/_material-dark.scss +25 -25
  137. package/styles/list-box/icons/_material.scss +25 -25
  138. package/styles/material-dark.css +8 -11
  139. package/styles/material.css +34 -10
  140. package/styles/multi-select/_all.scss +2 -2
  141. package/styles/multi-select/_bootstrap-dark-definition.scss +171 -171
  142. package/styles/multi-select/_bootstrap-definition.scss +166 -166
  143. package/styles/multi-select/_bootstrap4-definition.scss +233 -233
  144. package/styles/multi-select/_fabric-dark-definition.scss +170 -170
  145. package/styles/multi-select/_fabric-definition.scss +167 -167
  146. package/styles/multi-select/_highcontrast-definition.scss +257 -259
  147. package/styles/multi-select/_highcontrast-light-definition.scss +258 -258
  148. package/styles/multi-select/_layout.scss +1153 -1153
  149. package/styles/multi-select/_material-dark-definition.scss +186 -186
  150. package/styles/multi-select/_material-definition.scss +191 -191
  151. package/styles/multi-select/_theme.scss +384 -389
  152. package/styles/multi-select/bootstrap-dark.css +13 -16
  153. package/styles/multi-select/bootstrap.css +12 -15
  154. package/styles/multi-select/bootstrap4.css +6 -10
  155. package/styles/multi-select/fabric-dark.css +2 -5
  156. package/styles/multi-select/fabric.css +1 -4
  157. package/styles/multi-select/highcontrast-light.css +2 -5
  158. package/styles/multi-select/highcontrast.css +2 -7
  159. package/styles/multi-select/icons/_bootstrap-dark.scss +26 -26
  160. package/styles/multi-select/icons/_bootstrap.scss +26 -26
  161. package/styles/multi-select/icons/_bootstrap4.scss +37 -37
  162. package/styles/multi-select/icons/_fabric-dark.scss +26 -26
  163. package/styles/multi-select/icons/_fabric.scss +26 -26
  164. package/styles/multi-select/icons/_highcontrast-light.scss +26 -26
  165. package/styles/multi-select/icons/_highcontrast.scss +26 -26
  166. package/styles/multi-select/icons/_material-dark.scss +26 -26
  167. package/styles/multi-select/icons/_material.scss +324 -324
  168. package/styles/multi-select/material-dark.css +8 -11
  169. package/styles/multi-select/material.css +16 -10
@@ -1,4 +1,4 @@
1
- import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';import { createCheckBox } from '@syncfusion/ej2-buttons';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { Component, EventHandler, attributes, formatUnit, ChildProperty, remove, L10n, extend } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, prepend, Complex, closest, setValue, getValue, compile, append } from '@syncfusion/ej2-base';import { select, selectAll, isNullOrUndefined as isNOU, matches, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';import { Popup } from '@syncfusion/ej2-popups';import { updateBlazorTemplate, resetBlazorTemplate, isBlazor} from '@syncfusion/ej2-base';import { TreeView, NodeSelectEventArgs, DataBoundEventArgs, FieldsSettingsModel, NodeClickEventArgs } from '@syncfusion/ej2-navigations';import { NodeCheckEventArgs, FailureEventArgs} from '@syncfusion/ej2-navigations';
1
+ import { Input, InputObject, FloatLabelType, TextBox, InputEventArgs } from '@syncfusion/ej2-inputs';
2
2
  import {Mode,ExpandOn,TreeFilterType,SortOrder,DdtBeforeOpenEventArgs,DdtChangeEventArgs,DdtPopupEventArgs,DdtDataBoundEventArgs,DdtFilteringEventArgs,DdtFocusEventArgs,DdtKeyPressEventArgs,DdtSelectEventArgs} from "./drop-down-tree";
3
3
  import {ComponentModel} from '@syncfusion/ej2-base';
4
4
 
@@ -8,77 +8,77 @@ import {ComponentModel} from '@syncfusion/ej2-base';
8
8
  export interface FieldsModel {
9
9
 
10
10
  /**
11
- * This field specifies the child items or mapping field for the nested child items that contains an array of JSON objects.
12
- */
13
- child?: string | FieldsModel;
11
+ * This field specifies the child items or mapping field for the nested child items that contains an array of JSON objects.
12
+ */
13
+ child?: string | FieldsModel;
14
14
 
15
15
  /**
16
- * Specifies the array of JavaScript objects or instance of Data Manager to populate the dropdown tree items.
17
- * @default []
18
- */
19
- dataSource?: DataManager | { [key: string]: Object }[];
16
+ * Specifies the array of JavaScript objects or instance of Data Manager to populate the dropdown tree items.
17
+ * @default []
18
+ */
19
+ dataSource?: DataManager | { [key: string]: Object }[];
20
20
 
21
21
  /**
22
- * This fields specifies the mapping field to define the expanded state of a Dropdown tree item.
23
- */
24
- expanded?: string;
22
+ * This fields specifies the mapping field to define the expanded state of a Dropdown tree item.
23
+ */
24
+ expanded?: string;
25
25
 
26
26
  /**
27
- * This field specifies the mapping field to indicate whether the Dropdown tree item has children or not.
28
- */
29
- hasChildren?: string;
27
+ * This field specifies the mapping field to indicate whether the Dropdown tree item has children or not.
28
+ */
29
+ hasChildren?: string;
30
30
 
31
31
  /**
32
- * Specifies the mapping field for htmlAttributes to be added to the Dropdown Tree item.
33
- */
34
- htmlAttributes?: string;
32
+ * Specifies the mapping field for htmlAttributes to be added to the Dropdown Tree item.
33
+ */
34
+ htmlAttributes?: string;
35
35
 
36
36
  /**
37
- * Specifies the mapping field for icon class of each Dropdown Tree item that will be added before the text.
38
- */
39
- iconCss?: string;
37
+ * Specifies the mapping field for icon class of each Dropdown Tree item that will be added before the text.
38
+ */
39
+ iconCss?: string;
40
40
 
41
41
  /**
42
- * Specifies the mapping field for image URL of each Dropdown Tree item where image will be added before the text.
43
- */
44
- imageUrl?: string;
42
+ * Specifies the mapping field for image URL of each Dropdown Tree item where image will be added before the text.
43
+ */
44
+ imageUrl?: string;
45
45
 
46
46
  /**
47
- * Specifies the parent value field mapped in the data source.
48
- */
49
- parentValue?: string;
47
+ * Specifies the parent value field mapped in the data source.
48
+ */
49
+ parentValue?: string;
50
50
 
51
51
  /**
52
- * Defines the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
53
- * that will execute along with the data processing.
54
- * @default null
55
- */
56
- query?: Query;
52
+ * Defines the external [`Query`](http://ej2.syncfusion.com/documentation/data/api-query.html)
53
+ * that will execute along with the data processing.
54
+ * @default null
55
+ */
56
+ query?: Query;
57
57
 
58
58
  /**
59
- * Specifies the mapping field for the selected state of the Dropdown Tree item.
60
- */
61
- selected?: string;
59
+ * Specifies the mapping field for the selected state of the Dropdown Tree item.
60
+ */
61
+ selected?: string;
62
62
 
63
63
  /**
64
- * Specifies the table name used to fetch data from a specific table in the server.
65
- */
66
- tableName?: string;
64
+ * Specifies the table name used to fetch data from a specific table in the server.
65
+ */
66
+ tableName?: string;
67
67
 
68
68
  /**
69
- * Specifies the mapping field for text displayed as Dropdown Tree items display text.
70
- */
71
- text?: string;
69
+ * Specifies the mapping field for text displayed as Dropdown Tree items display text.
70
+ */
71
+ text?: string;
72
72
 
73
73
  /**
74
- * Specifies the mapping field for tooltip that will be displayed as hovering text of the Dropdown Tree item.
75
- */
76
- tooltip?: string;
74
+ * Specifies the mapping field for tooltip that will be displayed as hovering text of the Dropdown Tree item.
75
+ */
76
+ tooltip?: string;
77
77
 
78
78
  /**
79
- * Specifies the value(ID) field mapped in the data source.
80
- */
81
- value?: string;
79
+ * Specifies the value(ID) field mapped in the data source.
80
+ */
81
+ value?: string;
82
82
 
83
83
  }
84
84
 
@@ -88,33 +88,33 @@ export interface FieldsModel {
88
88
  export interface TreeSettingsModel {
89
89
 
90
90
  /**
91
- * Specifies whether the child and parent tree items check states are dependent over each other when checkboxes are enabled.
92
- * @default false
93
- */
94
-
95
- autoCheck?: boolean;
91
+ * Specifies whether the child and parent tree items check states are dependent over each other when checkboxes are enabled.
92
+ * @default false
93
+ */
94
+
95
+ autoCheck?: boolean;
96
96
 
97
97
  /**
98
- * Specifies the action on which the parent items in the pop-up should expand or collapse. The available actions are
99
- * * `Auto` - In desktop, the expand or collapse operation happens when you double-click the node,
100
- * and in mobile devices it happens on single-tap.
101
- * * `Click` - The expand or collapse operation happens when you perform single-click/tap
102
- * on the pop-up item in both desktop and mobile devices.
103
- * * `DblClick` - The expand or collapse operation happens when you perform a double-click/tap
104
- * on the pop-up item in both desktop and mobile devices.
105
- * * `None` - The expand or collapse operation will not happen when you perform single-click/tap
106
- * or double-click/tap on the pop-up items in both desktop and mobile devices.
107
- * @default 'Auto'
108
- */
109
- expandOn?: ExpandOn;
98
+ * Specifies the action on which the parent items in the pop-up should expand or collapse. The available actions are
99
+ * * `Auto` - In desktop, the expand or collapse operation happens when you double-click the node,
100
+ * and in mobile devices it happens on single-tap.
101
+ * * `Click` - The expand or collapse operation happens when you perform single-click/tap
102
+ * on the pop-up item in both desktop and mobile devices.
103
+ * * `DblClick` - The expand or collapse operation happens when you perform a double-click/tap
104
+ * on the pop-up item in both desktop and mobile devices.
105
+ * * `None` - The expand or collapse operation will not happen when you perform single-click/tap
106
+ * or double-click/tap on the pop-up items in both desktop and mobile devices.
107
+ * @default 'Auto'
108
+ */
109
+ expandOn?: ExpandOn;
110
110
 
111
111
  /**
112
- * By default, the load on demand (Lazy load) is set to false.
113
- * Enabling this property will render only the parent tree items in the popup and
114
- * the child items will be rendered on demand when expanding the corresponding parent node.
115
- * @default false
116
- */
117
- loadOnDemand?: boolean;
112
+ * By default, the load on demand (Lazy load) is set to false.
113
+ * Enabling this property will render only the parent tree items in the popup and
114
+ * the child items will be rendered on demand when expanding the corresponding parent node.
115
+ * @default false
116
+ */
117
+ loadOnDemand?: boolean;
118
118
 
119
119
  }
120
120
 
@@ -124,355 +124,355 @@ export interface TreeSettingsModel {
124
124
  export interface DropDownTreeModel extends ComponentModel{
125
125
 
126
126
  /**
127
- * Specifies the template that renders to the popup list content of the
128
- * Dropdown Tree component when the data fetch request from the remote server fails.
129
- * @default 'The Request Failed'
130
- */
131
- actionFailureTemplate?: string;
132
-
133
- /**
134
- * When allowFiltering is set to true, it shows the filter bar (search text box) of the component.
135
- * The filter action retrieves matched items through the **filtering** event based on the characters typed in the search text box.
136
- * If no match is found, the value of the **noRecordsTemplate** property will be displayed.
137
- *
138
- * @default false
139
- */
140
- allowFiltering?: boolean;
141
-
142
- /**
143
- * Enables or disables the multi-selection of items. To select multiple items:
144
- * * Select the items by holding down the **CTRL** key when clicking on the items.
145
- * * Select consecutive items by clicking the first item to select and hold down the **SHIFT** key and click the last item to select.
146
- *
147
- * @default false
148
- */
149
- allowMultiSelection?: boolean;
150
-
151
- /**
152
- * By default, the Dropdown Tree component fires the change event while focusing out the component.
153
- * If you want to fire the change event on every value selection and remove, then disable this property.
154
- *
155
- * @default true
156
- */
157
- changeOnBlur?: boolean;
158
-
159
- /**
160
- * Specifies the CSS classes to be added with the root and popup element of the Dropdown Tree component.
161
- * that allows customization of appearance.
162
- * @default ''
163
- */
164
- cssClass?: string;
165
-
166
- /**
167
- * Defines the value separator character in the input element when multi-selection or checkbox is enabled in the Dropdown Tree.
168
- * The delimiter character is applicable only for **default** and **delimiter** visibility modes.
169
- * @default ","
170
- */
171
- delimiterChar?: string;
172
-
173
- /**
174
- * Specifies a value that indicates whether the Dropdown Tree component is enabled or not.
175
- * @default true
176
- */
177
- enabled?: boolean;
178
-
179
- /**
180
- * Specifies the data source and mapping fields to render Dropdown Tree items.
181
- * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
182
- * expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
183
- * query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
184
- */
185
- fields?: FieldsModel;
186
-
187
- /**
188
- * Accepts the value to be displayed as a watermark text on the filter bar.
189
- * @default null
190
- */
191
- filterBarPlaceholder?: string;
192
-
193
- /**
194
- * Determines on which filter type, the component needs to be considered on search action.
195
- * The **TreeFilterType** and its supported data types are,
196
- *
197
- * <table>
198
- * <tr>
199
- * <td colSpan=1 rowSpan=1><b>
200
- * TreeFilterType</b></td><td colSpan=1 rowSpan=1><b>
201
- * Description</b></td><td colSpan=1 rowSpan=1><b>
202
- * Supported Types</b></td></tr>
203
- * <tr>
204
- * <td colSpan=1 rowSpan=1>
205
- * StartsWith<br/></td><td colSpan=1 rowSpan=1>
206
- * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
207
- * String<br/></td></tr>
208
- * <tr>
209
- * <td colSpan=1 rowSpan=1>
210
- * EndsWith<br/></td><td colSpan=1 rowSpan=1>
211
- * Checks whether a value ends with the specified value.<br/></td><td colSpan=1 rowSpan=1>
212
- * String<br/></td></tr>
213
- * <tr>
214
- * <td colSpan=1 rowSpan=1>
215
- * Contains<br/></td><td colSpan=1 rowSpan=1>
216
- * Checks whether a value contains with specified value.<br/></td><td colSpan=1 rowSpan=1>
217
- * String<br/></td></tr>
218
- * </table>
219
- *
220
- * The default value set to **StartsWith**, all the suggestion items which starts with typed characters to listed in the
221
- * suggestion popup.
222
- * @default 'StartsWith'
223
- */
224
- filterType?: TreeFilterType;
127
+ * Specifies the template that renders to the popup list content of the
128
+ * Dropdown Tree component when the data fetch request from the remote server fails.
129
+ * @default 'The Request Failed'
130
+ */
131
+ actionFailureTemplate?: string;
132
+
133
+ /**
134
+ * When allowFiltering is set to true, it shows the filter bar (search text box) of the component.
135
+ * The filter action retrieves matched items through the **filtering** event based on the characters typed in the search text box.
136
+ * If no match is found, the value of the **noRecordsTemplate** property will be displayed.
137
+ *
138
+ * @default false
139
+ */
140
+ allowFiltering?: boolean;
141
+
142
+ /**
143
+ * Enables or disables the multi-selection of items. To select multiple items:
144
+ * * Select the items by holding down the **CTRL** key when clicking on the items.
145
+ * * Select consecutive items by clicking the first item to select and hold down the **SHIFT** key and click the last item to select.
146
+ *
147
+ * @default false
148
+ */
149
+ allowMultiSelection?: boolean;
150
+
151
+ /**
152
+ * By default, the Dropdown Tree component fires the change event while focusing out the component.
153
+ * If you want to fire the change event on every value selection and remove, then disable this property.
154
+ *
155
+ * @default true
156
+ */
157
+ changeOnBlur?: boolean;
158
+
159
+ /**
160
+ * Specifies the CSS classes to be added with the root and popup element of the Dropdown Tree component.
161
+ * that allows customization of appearance.
162
+ * @default ''
163
+ */
164
+ cssClass?: string;
165
+
166
+ /**
167
+ * Defines the value separator character in the input element when multi-selection or checkbox is enabled in the Dropdown Tree.
168
+ * The delimiter character is applicable only for **default** and **delimiter** visibility modes.
169
+ * @default ","
170
+ */
171
+ delimiterChar?: string;
172
+
173
+ /**
174
+ * Specifies a value that indicates whether the Dropdown Tree component is enabled or not.
175
+ * @default true
176
+ */
177
+ enabled?: boolean;
178
+
179
+ /**
180
+ * Specifies the data source and mapping fields to render Dropdown Tree items.
181
+ * @default {value: 'value', text: 'text', dataSource: [], child: 'child', parentValue: 'parentValue', hasChildren: 'hasChildren',
182
+ * expanded: 'expanded', htmlAttributes: 'htmlAttributes', iconCss: 'iconCss', imageUrl: 'imageUrl',
183
+ * query: null, selected: 'selected', tableName: null, tooltip: 'tooltip'}
184
+ */
185
+ fields?: FieldsModel;
186
+
187
+ /**
188
+ * Accepts the value to be displayed as a watermark text on the filter bar.
189
+ * @default null
190
+ */
191
+ filterBarPlaceholder?: string;
192
+
193
+ /**
194
+ * Determines on which filter type, the component needs to be considered on search action.
195
+ * The **TreeFilterType** and its supported data types are,
196
+ *
197
+ * <table>
198
+ * <tr>
199
+ * <td colSpan=1 rowSpan=1><b>
200
+ * TreeFilterType</b></td><td colSpan=1 rowSpan=1><b>
201
+ * Description</b></td><td colSpan=1 rowSpan=1><b>
202
+ * Supported Types</b></td></tr>
203
+ * <tr>
204
+ * <td colSpan=1 rowSpan=1>
205
+ * StartsWith<br/></td><td colSpan=1 rowSpan=1>
206
+ * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
207
+ * String<br/></td></tr>
208
+ * <tr>
209
+ * <td colSpan=1 rowSpan=1>
210
+ * EndsWith<br/></td><td colSpan=1 rowSpan=1>
211
+ * Checks whether a value ends with the specified value.<br/></td><td colSpan=1 rowSpan=1>
212
+ * String<br/></td></tr>
213
+ * <tr>
214
+ * <td colSpan=1 rowSpan=1>
215
+ * Contains<br/></td><td colSpan=1 rowSpan=1>
216
+ * Checks whether a value contains with specified value.<br/></td><td colSpan=1 rowSpan=1>
217
+ * String<br/></td></tr>
218
+ * </table>
219
+ *
220
+ * The default value set to **StartsWith**, all the suggestion items which starts with typed characters to listed in the
221
+ * suggestion popup.
222
+ * @default 'StartsWith'
223
+ */
224
+ filterType?: TreeFilterType;
225
225
 
226
- /**
227
- * Specifies whether to display the floating label above the input element.
228
- * Possible values are:
229
- * * Never: The label will never float in the input when the placeholder is available.
230
- * * Always: The floating label will always float above the input.
231
- * * Auto: The floating label will float above the input after focusing or entering a value in the input.
232
- * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
233
- * @isEnumeration true
234
- */
235
- floatLabelType?: FloatLabelType;
226
+ /**
227
+ * Specifies whether to display the floating label above the input element.
228
+ * Possible values are:
229
+ * * Never: The label will never float in the input when the placeholder is available.
230
+ * * Always: The floating label will always float above the input.
231
+ * * Auto: The floating label will float above the input after focusing or entering a value in the input.
232
+ * @default Syncfusion.EJ2.Inputs.FloatLabelType.Never
233
+ * @isEnumeration true
234
+ */
235
+ floatLabelType?: FloatLabelType;
236
236
 
237
237
  /**
238
- * Specifies the template that renders a customized footer container at the bottom of the pop-up list.
239
- * By default, the footerTemplate will be null and there will be no footer container for the pop-up list.
240
- * @default null
241
- */
242
- footerTemplate?: string;
238
+ * Specifies the template that renders a customized footer container at the bottom of the pop-up list.
239
+ * By default, the footerTemplate will be null and there will be no footer container for the pop-up list.
240
+ * @default null
241
+ */
242
+ footerTemplate?: string;
243
243
 
244
244
  /**
245
- * When **ignoreAccent** is set to true, then it ignores the diacritic characters or accents when filtering.
246
- */
247
- ignoreAccent?: boolean;
245
+ * When **ignoreAccent** is set to true, then it ignores the diacritic characters or accents when filtering.
246
+ */
247
+ ignoreAccent?: boolean;
248
248
 
249
249
  /**
250
- * When set to false, consider the case-sensitive on performing the search to find suggestions. By default, consider the casing.
251
- * @default true
252
- */
253
- ignoreCase?: boolean;
250
+ * When set to false, consider the case-sensitive on performing the search to find suggestions. By default, consider the casing.
251
+ * @default true
252
+ */
253
+ ignoreCase?: boolean;
254
254
 
255
255
  /**
256
- * Specifies the template that renders a customized header container at the top of the pop-up list.
257
- * By default, the headerTemplate will be null and there will be no header container for the pop-up list.
258
- * @default null
259
- */
260
- headerTemplate?: string;
256
+ * Specifies the template that renders a customized header container at the top of the pop-up list.
257
+ * By default, the headerTemplate will be null and there will be no header container for the pop-up list.
258
+ * @default null
259
+ */
260
+ headerTemplate?: string;
261
261
 
262
262
  /**
263
- * Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
264
- * @default {}
265
- */
266
- htmlAttributes?: { [key: string]: string; };
263
+ * Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.
264
+ * @default {}
265
+ */
266
+ htmlAttributes?: { [key: string]: string; };
267
267
 
268
268
  /**
269
- * Specifies a template to render customized content for all the items.
270
- * If the **itemTemplate** property is set, the template content overrides the displayed item text.
271
- * The property accepts [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html)
272
- * or HTML element ID holding the content.
273
- * @default null
274
- */
275
- itemTemplate?: string;
269
+ * Specifies a template to render customized content for all the items.
270
+ * If the **itemTemplate** property is set, the template content overrides the displayed item text.
271
+ * The property accepts [template string](http://ej2.syncfusion.com/documentation/base/template-engine.html)
272
+ * or HTML element ID holding the content.
273
+ * @default null
274
+ */
275
+ itemTemplate?: string;
276
276
 
277
277
  /**
278
- * Configures visibility mode for component interaction when allowMultiSelection or checkbox is enabled.
279
- * Different modes are:
280
- * * Box : Selected items will be visualized in chip.
281
- * * Delimiter : Selected items will be visualized in the text content.
282
- * * Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
283
- */
284
- mode?: Mode;
278
+ * Configures visibility mode for component interaction when allowMultiSelection or checkbox is enabled.
279
+ * Different modes are:
280
+ * * Box : Selected items will be visualized in chip.
281
+ * * Delimiter : Selected items will be visualized in the text content.
282
+ * * Default : On focus in component will act in the box mode. On blur component will act in the delimiter mode.
283
+ */
284
+ mode?: Mode;
285
285
 
286
286
  /**
287
- * Specifies the template that renders a customized pop-up list content when there is no data available
288
- * to be displayed within the pop-up.
289
- * @default 'No Records Found'
290
- */
291
- noRecordsTemplate?: string;
287
+ * Specifies the template that renders a customized pop-up list content when there is no data available
288
+ * to be displayed within the pop-up.
289
+ * @default 'No Records Found'
290
+ */
291
+ noRecordsTemplate?: string;
292
292
 
293
293
  /**
294
- * Specifies a short hint that describes the expected value of the Dropdown Tree component.
295
- * @default null
296
- */
297
- placeholder?: string;
294
+ * Specifies a short hint that describes the expected value of the Dropdown Tree component.
295
+ * @default null
296
+ */
297
+ placeholder?: string;
298
298
 
299
299
  /**
300
- * Specifies the height of the pop-up list.
301
- * @default '300px'
302
- */
303
- popupHeight?: string | number;
300
+ * Specifies the height of the pop-up list.
301
+ * @default '300px'
302
+ */
303
+ popupHeight?: string | number;
304
304
 
305
305
  /**
306
- * Specifies the width of the popup list. By default, the popup width sets based on the width of the Dropdown Tree element.
307
- * @default '100%'
308
- */
309
- popupWidth?: string | number;
306
+ * Specifies the width of the popup list. By default, the popup width sets based on the width of the Dropdown Tree element.
307
+ * @default '100%'
308
+ */
309
+ popupWidth?: string | number;
310
310
 
311
311
  /**
312
- * When set to true, the user interactions on the component will be disabled.
313
- * @default false
314
- */
315
- readonly?: boolean;
312
+ * When set to true, the user interactions on the component will be disabled.
313
+ * @default false
314
+ */
315
+ readonly?: boolean;
316
316
 
317
317
  /**
318
- * Specifies whether to show or hide the selectAll checkbox in the pop-up which allows you to select all the items in the pop-up.
319
- * @default false
320
- */
321
- showSelectAll?: boolean;
318
+ * Specifies whether to show or hide the selectAll checkbox in the pop-up which allows you to select all the items in the pop-up.
319
+ * @default false
320
+ */
321
+ showSelectAll?: boolean;
322
322
 
323
323
  /**
324
- * Specifies the display text for the selectAll checkbox in the pop-up.
325
- * @default 'Select All'
326
- */
327
- selectAllText?: string;
324
+ * Specifies the display text for the selectAll checkbox in the pop-up.
325
+ * @default 'Select All'
326
+ */
327
+ selectAllText?: string;
328
328
 
329
329
  /**
330
- * Enables or disables the checkbox option in the Dropdown Tree component.
331
- * If enabled, the Checkbox will be displayed next to the expand or collapse icon of the tree items.
332
- * @default false
333
- */
334
- showCheckBox?: boolean;
330
+ * Enables or disables the checkbox option in the Dropdown Tree component.
331
+ * If enabled, the Checkbox will be displayed next to the expand or collapse icon of the tree items.
332
+ * @default false
333
+ */
334
+ showCheckBox?: boolean;
335
335
 
336
336
  /**
337
- * Specifies whether to show or hide the clear icon in textbox.
338
- * When the clear button is clicked, `value`, `text` properties will be reset to null.
339
- * @default true
340
- */
341
- showClearButton?: boolean;
337
+ * Specifies whether to show or hide the clear icon in textbox.
338
+ * When the clear button is clicked, `value`, `text` properties will be reset to null.
339
+ * @default true
340
+ */
341
+ showClearButton?: boolean;
342
342
 
343
343
  /**
344
- * Specifies whether to show or hide the Dropdown button.
345
- *
346
- * @default true
347
- */
348
- showDropDownIcon?: boolean;
344
+ * Specifies whether to show or hide the Dropdown button.
345
+ *
346
+ * @default true
347
+ */
348
+ showDropDownIcon?: boolean;
349
349
 
350
350
  /**
351
- * Specifies a value that indicates whether the items are sorted in the ascending or descending order, or not sorted at all.
352
- * The available types of sort order are,
353
- * * `None` - The items are not sorted.
354
- * * `Ascending` - The items are sorted in the ascending order.
355
- * * `Descending` - The items are sorted in the descending order.
356
- * @default 'None'
357
- */
358
- sortOrder?: SortOrder;
351
+ * Specifies a value that indicates whether the items are sorted in the ascending or descending order, or not sorted at all.
352
+ * The available types of sort order are,
353
+ * * `None` - The items are not sorted.
354
+ * * `Ascending` - The items are sorted in the ascending order.
355
+ * * `Descending` - The items are sorted in the descending order.
356
+ * @default 'None'
357
+ */
358
+ sortOrder?: SortOrder;
359
359
 
360
360
  /**
361
- * Gets or sets the display text of the selected item which maps the data **text** field in the component.
362
- * @default null
363
- */
364
- text?: string;
361
+ * Gets or sets the display text of the selected item which maps the data **text** field in the component.
362
+ * @default null
363
+ */
364
+ text?: string;
365
365
 
366
366
  /**
367
- * Configures the pop-up tree settings.
368
- * @default {autoCheck: false, loadOnDemand: true}
369
- */
370
- treeSettings?: TreeSettingsModel;
367
+ * Configures the pop-up tree settings.
368
+ * @default {autoCheck: false, loadOnDemand: true}
369
+ */
370
+ treeSettings?: TreeSettingsModel;
371
371
 
372
372
  /**
373
- * Specifies the display text for the unselect all checkbox in the pop-up.
374
- * @default 'Unselect All'
375
- */
376
- unSelectAllText?: string;
373
+ * Specifies the display text for the unselect all checkbox in the pop-up.
374
+ * @default 'Unselect All'
375
+ */
376
+ unSelectAllText?: string;
377
377
 
378
378
  /**
379
- * Gets or sets the value of selected item(s) which maps the data **value** field in the component.
380
- * @default null
381
- * @aspType Object
382
- */
383
- value?: string[];
379
+ * Gets or sets the value of selected item(s) which maps the data **value** field in the component.
380
+ * @default null
381
+ * @aspType Object
382
+ */
383
+ value?: string[];
384
384
 
385
385
  /**
386
- * Specifies the width of the component. By default, the component width sets based on the width of its parent container.
387
- * You can also set the width in pixel values.
388
- * @default '100%'
389
- */
390
- width?: string | number;
386
+ * Specifies the width of the component. By default, the component width sets based on the width of its parent container.
387
+ * You can also set the width in pixel values.
388
+ * @default '100%'
389
+ */
390
+ width?: string | number;
391
391
 
392
392
  /**
393
- * Specifies the z-index value of the pop-up element.
394
- * @default 1000
395
- */
396
- zIndex?: number;
393
+ * Specifies the z-index value of the pop-up element.
394
+ * @default 1000
395
+ */
396
+ zIndex?: number;
397
397
 
398
398
  /**
399
- * Triggers when the data fetch request from the remote server fails.
400
- * @event
401
- */
402
- actionFailure?: EmitType<Object>;
399
+ * Triggers when the data fetch request from the remote server fails.
400
+ * @event
401
+ */
402
+ actionFailure?: EmitType<Object>;
403
403
 
404
404
  /**
405
- * Fires when popup opens before animation.
406
- * @event
407
- */
408
- beforeOpen?: EmitType<DdtBeforeOpenEventArgs>;
405
+ * Fires when popup opens before animation.
406
+ * @event
407
+ */
408
+ beforeOpen?: EmitType<DdtBeforeOpenEventArgs>;
409
409
 
410
410
  /**
411
- * Triggers when an item in a popup is selected or when the model value is changed by user.
412
- * @event
413
- */
414
- change?: EmitType<DdtChangeEventArgs>;
411
+ * Triggers when an item in a popup is selected or when the model value is changed by user.
412
+ * @event
413
+ */
414
+ change?: EmitType<DdtChangeEventArgs>;
415
415
 
416
416
  /**
417
- * Fires when popup close after animation completion.
418
- * @event
419
- */
420
- close?: EmitType<DdtPopupEventArgs>;
417
+ * Fires when popup close after animation completion.
418
+ * @event
419
+ */
420
+ close?: EmitType<DdtPopupEventArgs>;
421
421
 
422
422
  /**
423
- * Triggers when the Dropdown Tree input element gets focus-out.
424
- * @event
425
- */
426
- blur?: EmitType<Object>;
423
+ * Triggers when the Dropdown Tree input element gets focus-out.
424
+ * @event
425
+ */
426
+ blur?: EmitType<Object>;
427
427
 
428
428
  /**
429
- * Triggers when the Dropdown Tree is created successfully.
430
- * @event
431
- */
432
- created?: EmitType<Object>;
429
+ * Triggers when the Dropdown Tree is created successfully.
430
+ * @event
431
+ */
432
+ created?: EmitType<Object>;
433
433
 
434
434
  /**
435
-      * Triggers when data source is populated in the Dropdown Tree.
436
-      * @event
437
-      */
438
- dataBound?: EmitType<DdtDataBoundEventArgs>;
435
+      * Triggers when data source is populated in the Dropdown Tree.
436
+      * @event
437
+      */
438
+ dataBound?: EmitType<DdtDataBoundEventArgs>;
439
439
 
440
440
  /**
441
- * Triggers when the Dropdown Tree is destroyed successfully.
442
- * @event
443
- */
444
- destroyed?: EmitType<Object>;
441
+ * Triggers when the Dropdown Tree is destroyed successfully.
442
+ * @event
443
+ */
444
+ destroyed?: EmitType<Object>;
445
445
 
446
446
  /**
447
- * Triggers on typing a character in the filter bar when the **allowFiltering** is enabled.
448
- *
449
- * @event
450
- * @blazorProperty 'Filtering'
451
- */
452
- filtering?: EmitType<DdtFilteringEventArgs>;
447
+ * Triggers on typing a character in the filter bar when the **allowFiltering** is enabled.
448
+ *
449
+ * @event
450
+ * @blazorProperty 'Filtering'
451
+ */
452
+ filtering?: EmitType<DdtFilteringEventArgs>;
453
453
 
454
454
  /**
455
- * Triggers when the Dropdown Tree input element is focused.
456
- * @event
457
- */
458
- focus?: EmitType<DdtFocusEventArgs>;
455
+ * Triggers when the Dropdown Tree input element is focused.
456
+ * @event
457
+ */
458
+ focus?: EmitType<DdtFocusEventArgs>;
459
459
 
460
460
  /**
461
- * Triggers when key press is successful. It helps to customize the operations at key press.
462
- * @event
463
- */
464
- keyPress?: EmitType<DdtKeyPressEventArgs>;
461
+ * Triggers when key press is successful. It helps to customize the operations at key press.
462
+ * @event
463
+ */
464
+ keyPress?: EmitType<DdtKeyPressEventArgs>;
465
465
 
466
466
  /**
467
- * Fires when popup opens after animation completion.
468
- * @event
469
- */
470
- open?: EmitType<DdtPopupEventArgs>;
467
+ * Fires when popup opens after animation completion.
468
+ * @event
469
+ */
470
+ open?: EmitType<DdtPopupEventArgs>;
471
471
 
472
472
  /**
473
- * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
474
- * @event
475
- */
476
- select?: EmitType<DdtSelectEventArgs>;
473
+ * Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
474
+ * @event
475
+ */
476
+ select?: EmitType<DdtSelectEventArgs>;
477
477
 
478
478
  }