Skip to content

Commit 8ef35bc

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
TagBox/SelectBox: Update onCustomItemCreating (DevExpress#7825) (DevExpress#7832)
1 parent 39e6b64 commit 8ef35bc

File tree

2 files changed

+230
-308
lines changed

2 files changed

+230
-308
lines changed

‎api-reference/10 UI Components/dxSelectBox/1 Configuration/onCustomItemCreating.md‎

Lines changed: 118 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Information about the event.
1414
The UI component's instance.
1515

1616
##### field(e.customItem): String | Object | Promise<any>
17-
The field where to place a custom item.
17+
The custom item. Set this field to `null` to cancel custom item creation.
1818

1919
##### field(e.element): DxElement
2020
#include common-ref-elementparam with { element: "UI component" }
@@ -32,48 +32,40 @@ You can specify DOM events after which the component calls this function. Use th
3232
The following code shows how to create custom items when the **Space** key is pressed:
3333

3434
---
35+
3536
##### jQuery
3637

3738
<!-- tab: index.js -->
3839
$(function() {
39-
$("#{widgetName}").dx{WidgetName}({
40-
// ...
41-
items: [{ id: 1, text: 'item 1'}],
40+
$("#{widget-name}").dx{WidgetName}({
41+
dataSource: [{ id: 1, text: 'item 1'}],
4242
acceptCustomValue: true,
43-
displayExpr: 'text',
44-
onCustomItemCreating: (args) => {
45-
if (!args.text) {
46-
args.customItem = null;
43+
onCustomItemCreating(e) {
44+
if (!e.text) {
45+
e.customItem = null; // cancels custom item creation
4746
return;
4847
}
49-
50-
const { component, text } = args;
51-
const currentItems = component.option('items');
5248

53-
const newId = currentItems.at(-1).id + 1;
54-
const newItem = {
55-
id: newId,
56-
text: text.trim(),
57-
};
49+
const dataSource = e.component.option('dataSource');
50+
const itemExists = dataSource.find((item) => item.text === e.text.trim())
5851

59-
const itemInDataSource = currentItems.find((item) => item.text === newItem.text)
60-
if (itemInDataSource) {
61-
args.customItem = itemInDataSource;
62-
} else {
63-
currentItems.push(newItem);
64-
component.option('items', currentItems);
65-
args.customItem = newItem;
52+
if (itemExists) {
53+
e.customItem = null;
54+
} else {
55+
const newItem = {
56+
id: dataSource.length + 1,
57+
text: e.text.trim(),
58+
};
59+
60+
dataSource.push(newItem);
61+
e.component.option('dataSource', dataSource);
62+
e.customItem = newItem;
6663
}
6764
},
68-
onKeyDown: (e) => {
65+
onKeyDown(e) {
6966
if (e.event.code === 'Space') {
70-
const event = new KeyboardEvent('keydown', {
71-
key: 'Enter',
72-
keyCode: 13,
73-
which: 13,
74-
});
75-
const target = e.event.target;
76-
target.dispatchEvent(event);
67+
const event = new KeyboardEvent('keydown', { key: 'Enter' });
68+
e.event.target.dispatchEvent(event);
7769
}
7870
}
7971
});
@@ -83,181 +75,150 @@ The following code shows how to create custom items when the **Space** key is pr
8375

8476
<!-- tab: app.component.html -->
8577
<dx-{widget-name} ...
86-
[items]="itemsArray"
87-
displayExpr="text"
78+
[dataSource]="dataSource"
8879
[acceptCustomValue]="true"
8980
(onCustomItemCreating)="onCustomItemCreating($event)"
9081
(onKeyDown)="onKeyDown($event)"
91-
>
92-
</dx-{widget-name}>
82+
></dx-{widget-name}>
9383

9484
<!-- tab: app.component.ts -->
85+
import { Dx{WidgetName}Component, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
86+
9587
// ...
9688
export class AppComponent {
9789
itemsArray = [{ id: 1, text: 'item 1'}];
9890

99-
onCustomItemCreating(args) {
100-
if (!args.text) {
101-
args.customItem = null;
91+
onCustomItemCreating(e: Dx{WidgetName}Types.CustomItemCreatingEvent) {
92+
if (!e.text) {
93+
e.customItem = null; // cancels custom item creation
10294
return;
10395
}
104-
105-
const { component, text } = args;
106-
const currentItems = component.option('items');
10796

108-
const newId = currentItems.at(-1).id + 1;
109-
const newItem = {
110-
id: newId,
111-
text: text.trim(),
112-
};
97+
const dataSource = e.component.option('dataSource');
98+
const itemExists = dataSource.find((item) => item.text === e.text.trim())
99+
100+
if (itemExists) {
101+
e.customItem = null;
102+
} else {
103+
const newItem = {
104+
id: dataSource.length + 1,
105+
text: e.text.trim(),
106+
};
113107

114-
const itemInDataSource = currentItems.find((item) => item.text === newItem.text)
115-
if (itemInDataSource) {
116-
args.customItem = itemInDataSource;
117-
} else {
118-
currentItems.push(newItem);
119-
component.option('items', currentItems);
120-
args.customItem = newItem;
108+
dataSource.push(newItem);
109+
e.component.option('dataSource', dataSource);
110+
e.customItem = newItem;
121111
}
122112
}
123-
onKeyDown(e) {
113+
114+
onKeyDown(e: Dx{WidgetName}Types.KeyDownEvent) {
124115
if (e.event.code === 'Space') {
125-
const event = new KeyboardEvent('keydown', {
126-
key: 'Enter',
127-
keyCode: 13,
128-
which: 13,
129-
});
130-
const target = e.event.target;
131-
target.dispatchEvent(event);
116+
const event = new KeyboardEvent('keydown', { key: 'Enter' });
117+
e.event.target.dispatchEvent(event);
132118
}
133119
}
134120
}
135121

136122
##### Vue
137123

138124
<!-- tab: App.vue -->
139-
<template>
140-
<Dx{WidgetName} ...
141-
:items="itemsArray"
142-
display-expr="text"
143-
:accept-custom-value="true"
144-
@customItemCreating="onCustomItemCreating"
145-
@keyDown="onKeyDown"
146-
>
147-
</Dx{WidgetName}>
148-
</template>
125+
<script setup lang="ts">
126+
import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
149127

150-
<script>
151-
// ...
152-
export default {
153-
components: {
154-
Dx{WidgetName}
155-
},
156-
data() {
157-
return {
158-
itemsArray: [{ id: 1, text: 'item 1'}]
159-
}
160-
},
161-
methods: {
162-
onCustomItemCreating(args) {
163-
if (!args.text) {
164-
args.customItem = null;
165-
return;
166-
}
167-
168-
const { component, text } = args;
169-
const currentItems = component.option('items');
128+
const itemsArray = [{ id: 1, text: 'item 1'}];
170129

171-
const newId = currentItems.at(-1).id + 1;
172-
const newItem = {
173-
id: newId,
174-
text: text.trim(),
175-
};
130+
function onCustomItemCreating(e: Dx{WidgetName}Types.CustomItemCreatingEvent) {
131+
if (!e.text) {
132+
e.customItem = null; // cancels custom item creation
133+
return;
134+
}
176135

177-
const itemInDataSource = currentItems.find((item) => item.text === newItem.text)
178-
if (itemInDataSource) {
179-
args.customItem = itemInDataSource;
180-
} else {
181-
currentItems.push(newItem);
182-
component.option('items', currentItems);
183-
args.customItem = newItem;
184-
}
185-
},
186-
onKeyDown(e) {
187-
if (e.event.code === 'Space') {
188-
const event = new KeyboardEvent('keydown', {
189-
key: 'Enter',
190-
keyCode: 13,
191-
which: 13,
192-
});
193-
const target = e.event.target;
194-
target.dispatchEvent(event);
195-
}
196-
}
136+
const dataSource = e.component.option('dataSource');
137+
const itemExists = dataSource.find((item) => item.text === e.text.trim())
138+
139+
if (itemExists) {
140+
e.customItem = null;
141+
} else {
142+
const newItem = {
143+
id: dataSource.length + 1,
144+
text: e.text.trim(),
145+
};
146+
147+
dataSource.push(newItem);
148+
e.component.option('dataSource', dataSource);
149+
e.customItem = newItem;
150+
}
151+
}
152+
153+
function onKeyDown(e: Dx{WidgetName}Types.KeyDownEvent) {
154+
if (e.event.code === 'Space') {
155+
const event = new KeyboardEvent('keydown', { key: 'Enter' });
156+
e.event.target.dispatchEvent(event);
197157
}
198158
}
159+
199160
</script>
200161

162+
<template>
163+
<Dx{WidgetName} ...
164+
:data-source="itemsArray"
165+
:accept-custom-value="true"
166+
@custom-item-creating="onCustomItemCreating"
167+
@key-down="onKeyDown"
168+
/>
169+
</template>
170+
201171
##### React
202172

203-
<!-- tab: App.js -->
204-
// ...
173+
<!-- tab: App.tsx -->
174+
import { {WidgetName}, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
175+
205176
const itemsArray = [{ id: 1, text: 'item 1'}];
206177

207-
const onCustomItemCreating = (args) => {
208-
if (!args.text) {
209-
args.customItem = null;
178+
function onCustomItemCreating(e: {WidgetName}Types.CustomItemCreatingEvent) {
179+
if (!e.text) {
180+
e.customItem = null; // cancels custom item creation
210181
return;
211182
}
212-
213-
const { component, text } = args;
214-
const currentItems = component.option('items');
215-
216-
const newId = currentItems.at(-1).id + 1;
217-
const newItem = {
218-
id: newId,
219-
text: text.trim(),
220-
};
221-
222-
const itemInDataSource = currentItems.find((item) => item.text === newItem.text)
223-
if (itemInDataSource) {
224-
args.customItem = itemInDataSource;
225-
} else {
226-
currentItems.push(newItem);
227-
component.option('items', currentItems);
228-
args.customItem = newItem;
183+
184+
const dataSource = e.component.option('dataSource');
185+
const itemExists = dataSource.find((item) => item.text === e.text.trim())
186+
187+
if (itemExists) {
188+
e.customItem = null;
189+
} else {
190+
const newItem = {
191+
id: dataSource.length + 1,
192+
text: e.text.trim(),
193+
};
194+
195+
dataSource.push(newItem);
196+
e.component.option('dataSource', dataSource);
197+
e.customItem = newItem;
229198
}
230199
}
231-
232-
const onKeyDown = (e) => {
200+
201+
function onKeyDown(e: Dx{WidgetName}Types.KeyDownEvent) {
233202
if (e.event.code === 'Space') {
234-
const event = new KeyboardEvent('keydown', {
235-
key: 'Enter',
236-
keyCode: 13,
237-
which: 13,
238-
});
239-
const target = e.event.target;
240-
target.dispatchEvent(event);
203+
const event = new KeyboardEvent('keydown', { key: 'Enter' });
204+
e.event.target.dispatchEvent(event);
241205
}
242206
}
243207

244208
function App() {
245209
return (
246210
<{WidgetName} ...
247-
items={itemsArray}
248-
displayExpr="text"
211+
dataSource={itemsArray}
249212
acceptCustomValue={true}
250213
onCustomItemCreating={onCustomItemCreating}
251214
onKeyDown={onKeyDown}
252215
/>
253216
);
254217
}
255218

256-
export default App;
257-
258219
---
259220

260-
To allows users to add custom items without updating the component [dataSource](/api-reference/10%20UI%20Components/dxSelectBox/1%20Configuration/dataSource.md '{basewidgetpath}/Configuration/#dataSource'), integrate the following **onCustomItemCreating** implementation:
221+
To add custom items without updating the component [dataSource](/api-reference/10%20UI%20Components/dxSelectBox/1%20Configuration/dataSource.md '{basewidgetpath}/Configuration/#dataSource'), integrate the following **onCustomItemCreating** implementation:
261222

262223
---
263224

@@ -270,7 +231,7 @@ To allows users to add custom items without updating the component [dataSource](
270231
displayExpr: "Name",
271232
acceptCustomValue: true,
272233
onCustomItemCreating(e) {
273-
e.customItem = { Name: e.text };
234+
e.customItem = { text: e.text };
274235
}
275236
})
276237
})
@@ -290,7 +251,7 @@ To allows users to add custom items without updating the component [dataSource](
290251
// ...
291252
export class App {
292253
onCustomItemCreating(e: Dx{WidgetName}Types.CustomItemCreatingEvent) {
293-
e.customItem = { Name: e.text };
254+
e.customItem = { text: e.text };
294255
}
295256
}
296257

@@ -301,7 +262,7 @@ To allows users to add custom items without updating the component [dataSource](
301262
import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
302263

303264
function onCustomItemCreating(e: Dx{WidgetName}Types.CustomItemCreatingEvent) {
304-
e.customItem = { Name: e.text };
265+
e.customItem = { text: e.text };
305266
}
306267
</script>
307268

@@ -320,7 +281,7 @@ To allows users to add custom items without updating the component [dataSource](
320281

321282
function App() {
322283
function onCustomItemCreating(e: {WidgetName}Types.CustomItemCreatingEvent) {
323-
e.customItem = { Name: e.text };
284+
e.customItem = { text: e.text };
324285
}
325286

326287
return (
@@ -337,4 +298,4 @@ To allows users to add custom items without updating the component [dataSource](
337298
---
338299

339300
#####See Also#####
340-
- [Create a User-Defined Item](/concepts/05%20UI%20Components/SelectBox/15%20Create%20a%20User-Defined%20Item.md '/Documentation/Guide/UI_Components/{WidgetName}/Create_a_User-Defined_Item/')
301+
- [Create a User-Defined Item](/concepts/05%20UI%20Components/SelectBox/15%20Create%20a%20User-Defined%20Item.md '/Documentation/Guide/UI_Components/{WidgetName}/Create_a_User-Defined_Item/')

0 commit comments

Comments
 (0)