JavaScript (ES5) Menu Bar API control

JavaScript (ES5)

Base

Accordion

Accumulation Chart

Ai Assistview

Appbar

AutoComplete

Barcode

Blockeditor

Breadcrumb

Bullet Chart

Button

Calendar

Carousel

Chart

Chart3d

Chat Ui

CheckBox

Chips

Circular Gauge

Circular3d

Circularchart3d

ColorPicker

ComboBox

Compression

ContextMenu

Dashboard Layout

DataManager

DatePicker

DateRangePicker

DateTimePicker

Diagram

Dialog

Document Editor Container

DocumentEditor

Drawing

DropDownButton

DropDownList

Dropdown Tree

ExcelExport

FileManager

File Utils

Floating Action Button

Form Validator

Gantt

Grid Chart

Grid

HeatMap

Image Editor

In-place Editor

Kanban

Linear Gauge

ListBox

ListView

Maps

MaskedTextBox

Mention

Menu Bar

Message

MultiSelect

Multicolumn Combobox

NumericTextBox

Office Chart

Otp Input

Overview

Pager

Pdf Export

PDF

PDF Viewer

Pivotfieldlist

Pivot Table

Popup

ProgressButton

Progressbar Components

Progressbar

QueryBuilder

RadioButton

Range Navigator

Rating

Recurrence Editor

Ribbon

RichTextEditor

Ruler

Schedule

Sidebar

Signature

Skeleton

Slider

Smith Chart

Sparkline

Speech To Text

Speed Dial

SplitButton

Splitter

Spreadsheet

Stepper

Stock Chart

Switch

Tabs

Textarea

TextBox

Timeline

TimePicker

Toast

Toolbar

Tooltip

TreeGrid

TreeMap

TreeView

Uploader

Search results

The Menu is a graphical user interface that serve as navigation headers for your application or site.

<ul id = 'menu'></ul>

<script>
var menuObj = new Menu({ items: [{ text: 'Home' }, { text: 'Contact Us' },{ text: 'Login' }]});
menuObj.appendTo("#menu");
</script>

Properties

animationSettings
`MenuAnimationSettingsModel`

Specifies the animation settings for the sub menu open.

Defaults to { duration: 400, easing: ‘ease’, effect: ‘SlideDown’ }

cssClass
`string`

Defines class/multiple classes separated by a space in the Menu wrapper.

Defaults to ”

enableHtmlSanitizer
`boolean`

Specifies whether to enable the rendering of untrusted HTML values in the Menu component. If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

Defaults to true

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enableScrolling
`boolean`

Specifies whether to enable / disable the scrollable option in Menu.

Defaults to false

fields
`FieldSettingsModel`

Specifies mapping fields from the dataSource.

Defaults to { itemId: “id”, text: “text”, parentId: “parentId”, iconCss: “iconCss”, url: “url”, separator: “separator”,children: “items” }

hamburgerMode
`boolean`

Specifies whether to enable / disable the hamburger mode in Menu.

Defaults to false

hoverDelay
`number`

If hoverDelay is set by particular number, the menu will open after that period.

Defaults to 0

items
`MenuItemModel[]` | { : }`[]`

Specifies menu items with its properties which will be rendered as Menu.

Defaults to []

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

orientation
`Orientation`

Specified the orientation of Menu whether it can be horizontal or vertical.

Defaults to ‘Horizontal’

showItemOnClick
`boolean`

Specifies whether to show the sub menu or not on click. When set to true, the sub menu will open only on mouse click.

Defaults to false

target
`string`

Specifies target element to open/close Menu while click in Hamburger mode.

Defaults to ”

template
`string` | `Function`

Specifies the template for Menu item.

Defaults to null

title
`string`

Specifies the title text for hamburger mode in Menu.

Defaults to ‘Menu’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

close

Closes the Menu if it is opened in hamburger mode.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the widget.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

enableItems

This method is used to enable or disable the menu items in the Menu based on the items and enable argument.

Parameter	Type	Description
items	`string[]`	Text items that needs to be enabled/disabled.
enable	`boolean`	Set `true`/`false` to enable/disable the list items.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

getItemIndex

This method is used to get the index of the menu item in the Menu based on the argument.

Parameter	Type	Description
item	`MenuItem` \| `string`	item be passed to get the index
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns number[]

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideItems

This method is used to hide the menu items in the Menu based on the items text.

Parameter	Type	Description
items	`string[]`	Text items that needs to be hidden.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

insertAfter

It is used to insert the menu items after the specified menu item text.

Parameter	Type	Description
items	`MenuItemModel[]`	Items that needs to be inserted.
text	`string`	Text item after that the element to be inserted.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

insertBefore

It is used to insert the menu items before the specified menu item text.

Parameter	Type	Description
items	`MenuItemModel[]`	Items that needs to be inserted.
text	`string`	Text item before that the element to be inserted.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

open

This method is used to open the Menu in hamburger mode.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

removeItems

It is used to remove the menu items from the Menu based on the items text.

Parameter	Type	Description
items	`string[]`	Text items that needs to be removed.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

setItem

This method is used to set the menu item in the Menu based on the argument.

Parameter	Type	Description
item	`MenuItem`	item need to be updated.
id (optional)	`string`	id / text to be passed to update the item.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

showItems

This method is used to show the menu items in the Menu based on the items text.

Parameter	Type	Description
items	`string[]`	Text items that needs to be shown.
isUniqueId (optional)	`boolean`	Set `true` if it is a unique id.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

Returns void

Events

beforeClose
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before closing the menu.

beforeItemRender
`EmitType<MenuEventArgs>`

Triggers while rendering each menu item.

beforeOpen
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before opening the menu item.

created
`EmitType<Event>`

Triggers once the component rendering is completed.

onClose
`EmitType<OpenCloseMenuEventArgs>`

Triggers while closing the menu.

onOpen
`EmitType<OpenCloseMenuEventArgs>`

Triggers while opening the menu item.

select
`EmitType<MenuEventArgs>`

Triggers while selecting menu item.

Mention / MentionModel

Menu Bar / HScroll

Menu

Properties

animationSettings MenuAnimationSettingsModel

cssClass string

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

enableScrolling boolean

fields FieldSettingsModel

hamburgerMode boolean

hoverDelay number

items MenuItemModel[] | { : }[]

locale string

orientation Orientation

showItemOnClick boolean

target string

template string | Function

title string

Methods

addEventListener

appendTo

attachUnloadEvent

close

dataBind

destroy

detachUnloadEvent

enableItems

getItemIndex

getLocalData

getRootElement

handleUnload

hideItems

insertAfter

insertBefore

open

refresh

removeEventListener

removeItems

setItem

showItems

Inject

Events

beforeClose EmitType<BeforeOpenCloseMenuEventArgs>

beforeItemRender EmitType<MenuEventArgs>

beforeOpen EmitType<BeforeOpenCloseMenuEventArgs>

created EmitType<Event>

onClose EmitType<OpenCloseMenuEventArgs>

onOpen EmitType<OpenCloseMenuEventArgs>

select EmitType<MenuEventArgs>

animationSettings
`MenuAnimationSettingsModel`

cssClass
`string`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enableScrolling
`boolean`

fields
`FieldSettingsModel`

hamburgerMode
`boolean`

hoverDelay
`number`

items
`MenuItemModel[]` | { : }`[]`

locale
`string`

orientation
`Orientation`

showItemOnClick
`boolean`

target
`string`

template
`string` | `Function`

title
`string`

beforeClose
`EmitType<BeforeOpenCloseMenuEventArgs>`

beforeItemRender
`EmitType<MenuEventArgs>`

beforeOpen
`EmitType<BeforeOpenCloseMenuEventArgs>`

created
`EmitType<Event>`

onClose
`EmitType<OpenCloseMenuEventArgs>`

onOpen
`EmitType<OpenCloseMenuEventArgs>`

select
`EmitType<MenuEventArgs>`