Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

RibbonSelectBoxItem Class

A ribbon select box item.

#Declaration

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
dataSource: any[]

#Property Value

Type Description
any[]

The data source.

#displayExpr Property

Specifies the data field whose values should be displayed.

#Declaration

TypeScript
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

TypeScript
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

TypeScript
placeholder?: string

#Property Value

Type Description
string

The placeholder text.

#showClearButton Property

Specifies whether to display the Clear button in the item.

#Declaration

TypeScript
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

TypeScript

#Property Value

Type Description
RibbonItemTextOptions

An object that contains text options.

#type Property

Returns the item’s type.

#Declaration

TypeScript
readonly type = RibbonItemType.SelectBox

#Property Value

Type Description
SelectBox

Identifies the SelectBox item type.

#value Property

Specifies the currently selected value.

#Declaration

TypeScript
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

TypeScript
valueExpr?: string

#Property Value

Type Description
string

The name of the data field.

#valueType Property

#Declaration

TypeScript
valueType?: string

#Property Value

Type
string

#width Property

Specifies the item width.

#Declaration

TypeScript
width?: any

#Property Value

Type Description
any

The item width.