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

Inherited Members

Inheritance

RibbonItemBase
RibbonSelectBoxItem
See Also

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.

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