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	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.