RibbonSelectBoxItem Class
A ribbon select box item.
#Declaration
export class RibbonSelectBoxItem extends RibbonItemBase
#Remarks
var commandId = "mySelectBox";
var ribbonSelectBox = new DevExpress.RichEdit.RibbonSelectBoxItem(
commandId,
new DevExpress.data.ArrayStore({ data: products, key: "ID" }),
{
beginGroup: true,
width: 150,
displayExpr: "Name",
valueExpr: "ID",
});
var options = DevExpress.RichEdit.createOptions();
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home).insertItem(ribbonSelectBox, 3);
options.events.customCommandExecuted.addHandler(function(s, e) {
switch (e.commandName) {
case commandId:
console.log(e.parameter);
}
});
#Inheritance
#constructor(id, dataSource)
Initializes a new instance of the RibbonSelectBoxItem
class with specified settings.
#Declaration
constructor(
id: RibbonItemId,
dataSource: any[] | any,
options?: RibbonSelectBoxItemOptions
)
#Parameters
Name | Type | Description |
---|---|---|
id | Ribbon |
The item identifier. |
data |
any | The data source. |
options | Ribbon |
The item options. |
#Properties
#acceptCustomValue Property
Specifies whether the item accepts custom values.
#Declaration
acceptCustomValue?: boolean
#Property Value
Type | Description |
---|---|
boolean | true to accept custom values; otherwise, false. |
#Remarks
Set the acceptCustomValue property to true
to allow a user to add new values to the select box. Note that in this case, you should implement the onCustomItemCreating handler to create a new data source entry.
var years = [2018, 2019, 2020];
var postfix = ' year';
var createItem = function(year) {
return { text: year.toString() + postfix, value: year};
};
var dataSource = years.map(createItem);
richEdit.updateRibbon(function(ribbon) {
ribbon.getTab(0).insertItem(new DevExpress.RichEdit.RibbonSelectBoxItem(
'CustomDateSelectId', dataSource, {
displayExpr: "text",
valueExpr: "value",
acceptCustomValue: true,
onCustomItemCreating: function (e) {
if (!e.customItem) {
var item = createItem(parseInt(e.text));
e.customItem = item;
dataSource.push(item);
}
}
}));
});
richEdit.events.customCommandExecuted.addHandler(function(s, e) {
console.log(e);
});
#dataSource Property
Binds the select box to a data source.
#Declaration
dataSource: any[]
#Property Value
Type | Description |
---|---|
any[] | The data source. |
#displayExpr Property
Specifies the data field whose values should be displayed.
#Declaration
displayExpr?: string
#Property Value
Type | Description |
---|---|
string | The name of the data field. |
#onCustomItemCreating Property
Specifies a function that is executed when a user adds a custom item.
#Declaration
onCustomItemCreating?: any
#Property Value
Type | Description |
---|---|
any | A function that creates a new data source entry. |
#Remarks
When the acceptCustomValue property is set to true, a user is allowed to add new values to the select box. Write the onCustomItemCreating function code to create a new data source entry.
var years = [2018, 2019, 2020];
var postfix = ' year';
var createItem = function(year) {
return { text: year.toString() + postfix, value: year};
};
var dataSource = years.map(createItem);
richEdit.updateRibbon(function(ribbon) {
ribbon.getTab(0).insertItem(new DevExpress.RichEdit.RibbonSelectBoxItem(
'CustomDateSelectId', dataSource, {
displayExpr: "text",
valueExpr: "value",
acceptCustomValue: true,
onCustomItemCreating: function (e) {
if (!e.customItem) {
var item = createItem(parseInt(e.text));
e.customItem = item;
dataSource.push(item);
}
}
}));
});
richEdit.events.customCommandExecuted.addHandler(function(s, e) {
console.log(e);
});
#placeholder Property
Specifies the text displayed by the item when its value is empty.
#Declaration
placeholder?: string
#Property Value
Type | Description |
---|---|
string | The placeholder text. |
#showClearButton Property
Specifies whether to display the Clear button in the item.
#Declaration
showClearButton: boolean
#Property Value
Type | Description |
---|---|
boolean | true to display the Clear button; otherwise, false. |
#textOptions Property
Specifies options of the text displayed next to the item.
#Declaration
textOptions: RibbonItemTextOptions
#Property Value
Type | Description |
---|---|
Ribbon |
An object that contains text options. |
#type Property
Returns the item’s type.
#Declaration
readonly type = RibbonItemType.SelectBox
#Property Value
Type | Description |
---|---|
Select |
Identifies the Select |
#value Property
Specifies the currently selected value.
#Declaration
value?: any
#Property Value
Type | Description |
---|---|
any | The currently selected value. |
#valueExpr Property
Specifies the data field that provides values for the editor items.
#Declaration
valueExpr?: string
#Property Value
Type | Description |
---|---|
string | The name of the data field. |
#valueType Property
#Declaration
valueType?: string
#Property Value
Type |
---|
string |
#width Property
Specifies the item width.
#Declaration
width?: any
#Property Value
Type | Description |
---|---|
any | The item width. |