RibbonNumberBoxItem Class

A ribbon number box item.

Declaration

export class RibbonNumberBoxItem extends RibbonItemBase

Remarks

JS

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

beginGroup

id

Inheritance

RibbonItemBase

RibbonNumberBoxItem

constructor(id, text)

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

Declaration

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

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

JS

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

localizationId?: string

Property Value

Type	Description
string	The item’s localization identifier.

Remarks

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

max Property

Specifies the maximum acceptable value in the number box.

Declaration

max?: number

Property Value

Type	Description
number	The maximum value.

min Property

Specifies the minimum acceptable value in the number box.

Declaration

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

step: number

Property Value

Type	Description
number	The incremental step.

text Property

Specifies the item text.

Declaration

text: string

Property Value

Type	Description
string	The item text.

type Property

Returns the item’s type.

Declaration

readonly type: RibbonItemType

Property Value

Type	Description
RibbonItemType	Identifies the NumberBox item type.

value Property

Specifies the current item value.

Declaration

value?: number

Property Value

Type	Description
number	The item value.

width Property

Specifies the item width.

Declaration

width?: any

Property Value

Type	Description
any	The item width.