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

RibbonNumberBoxItem Class

A ribbon number box item.

#Declaration

TypeScript
export class RibbonNumberBoxItem extends RibbonItemBase

#Remarks

var ribbonNumberBox = new DevExpress.RichEdit.RibbonNumberBoxItem;
ribbonNumberBox.id = "myNumberBox";
ribbonNumberBox.beginGroup = true;
ribbonNumberBox.min = 10;
ribbonNumberBox.max = 100;
ribbonNumberBox.step = 5;
ribbonNumberBox.text = "Indent";
ribbonNumberBox.width = 150;

var options = DevExpress.RichEdit.createOptions();
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home).insertItem(ribbonNumberBox,3);
options.events.customCommandExecuted.addHandler(function(s, e) {
  switch (e.commandName) {
    case 'myNumberBox':
      console.log(e.parameter);
  }
});

#Inherited Members

#Inheritance

RibbonItemBase
RibbonNumberBoxItem
See Also

#constructor(id, text)

Initializes a new instance of the RibbonNumberBoxItem class with specified settings.

#Declaration

TypeScript
constructor(
    id: RibbonItemId,
    text: string,
    options?: RibbonNumberBoxItemOptions
)

#Parameters

Name Type Description
id RibbonItemId

The item identifier.

text string

The item text.

options RibbonNumberBoxItemOptions

The item options.

#Properties

#format Property

Specifies the item value’s display format and controls user input accordingly.

#Declaration

TypeScript
format?: string

#Property Value

Type Description
string

The format. Default value: “text #0.#”.

#Remarks

Show predefined formats
Format Value Formatted Value
“fixedPoint” 100.11 100
“decimal” 100.11 100.11
“percent” 0.1011 10%
“currency” 100.11 $100
var ribbonNumberBox = new DevExpress.RichEdit.RibbonNumberBoxItem();
ribbonNumberBox.format = 'currency';
Show custom formats

A custom format is a string that contains wildcard characters. The table below list the supported characters:

Character Description
0 A digit. Displays ‘0’ if it is not specified in the UI.
# A digit or nothing. One symbol can denote several integer digits, but only one decimal digit.
. A decimal separator. Displayed according to the specified locale.
, A group separator. Displayed according to the specified locale.
% The percent sign. Multiplies the input value by 100.
; Separates formats for positive and negative values.
Other characters Any character. Should be placed only at the format string’s beginning or end.

Enclose a wildcard character in single quotes (‘%’) to add this sign to the input value.

The table below demonstrates how you can format numeric values.

Format Value Formatted Value
“$ #,##0.##” 14500.55 $ 14,500.55
“$ #,##0.##;($ #,##0.##)” -2314.12
2314.12
($ 2,314.12)
$ 2,314.12
“#0%” 0.15 15%
“#,##0.00” 13415.24 13,415.24
“#0.## kg” 3.14 3.14 kg

#localizationId Property

Specifies an identifier that allows you to localize the item’s text.

#Declaration

TypeScript
localizationId?: string

#Property Value

Type Description
string

The item’s localization identifier.

#Remarks

If the text property is specified, the item is not localized.

See Also

#max Property

Specifies the maximum acceptable value in the number box.

#Declaration

TypeScript
max?: number

#Property Value

Type Description
number

The maximum value.

#min Property

Specifies the minimum acceptable value in the number box.

#Declaration

TypeScript
min?: number

#Property Value

Type Description
number

The minimum value.

#step Property

Specifies how much the item’s value changes when a user clicks the spin buttons.

#Declaration

TypeScript
step: number

#Property Value

Type Description
number

The incremental step.

#text Property

Specifies the item text.

#Declaration

TypeScript
text: string

#Property Value

Type Description
string

The item text.

#type Property

Returns the item’s type.

#Declaration

TypeScript
readonly type = RibbonItemType.NumberBox

#Property Value

Type Description
NumberBox

Identifies the NumberBox item type.

#value Property

Specifies the current item value.

#Declaration

TypeScript
value?: number

#Property Value

Type Description
number

The item value.

#width Property

Specifies the item width.

#Declaration

TypeScript
width?: any

#Property Value

Type Description
any

The item width.