RibbonSelectBoxItem Class

A ribbon select box item.

Declaration

export class RibbonSelectBoxItem extends RibbonItemBase

Remarks

JS

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);
    }
});

data.js

var products = [{
    "ID": 1,
    "Name": "HD Video Player",
}, {
    "ID": 2,
    "Name": "SuperHD Player",
}, {
    "ID": 3,
    "Name": "SuperPlasma 50",
}, {
    "ID": 4,
    "Name": "SuperLED 50",
}, {
    "ID": 5,
    "Name": "SuperLED 42",
}, {
    "ID": 6,
    "Name": "SuperLCD 55",
}];

Inherited Members

beginGroup

id

Inheritance

RibbonItemBase

RibbonSelectBoxItem

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	RibbonItemId	The item identifier.
dataSource	any[] | any	The data source.
options	RibbonSelectBoxItemOptions	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.

JS

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.

JS

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
RibbonItemTextOptions	An object that contains text options.

type Property

Returns the item’s type.

Declaration

readonly type: RibbonItemType

Property Value

Type	Description
RibbonItemType	Identifies the SelectBox item type.

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.

width Property

Specifies the item width.

Declaration

width?: any

Property Value

Type	Description
any	The item width.