Vue SPA Framework - Markup Components - Command - Methods

This section describes members used to manipulate the command.

beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

The beginUpdate() and endUpdate() methods prevent the widget from excessive updates when you are changing multiple widget settings at once. After the beginUpdate() method is called, the widget does not update its UI until the endUpdate() method is called.

See Also

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

Parameters:
rule:

Object

The component's default device options.

Object structure:
Name Type Description
options

Object

Options to be applied.
device

Device

|

Array<Device>

|

Function

Device parameters.
When specifying a function, get information about the current device from the argument. Return true if the options should be applied to the device.

defaultOptions is a static method that the widget class supports. The following code demonstrates how to specify default options for all instances of the Markup Components widget in an application executed on the desktop.

jQuery
JavaScript
DevExpress.ui.dxMarkup Components.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the Markup Components options
    }
});
Angular
TypeScript
import Markup Components from "devextreme/ui/markup components";
// ...
export class AppComponent {
    constructor () {
        Markup Components.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the Markup Components options
            }
        });
    }
}
Vue
<template>
    <div>
        <dx-markup components id="markup Components1" />
        <dx-markup components id="markup Components2" />
    </div>
</template>
<script>
import DxMarkup Components from "devextreme-vue/markup components";
import Markup Components from "devextreme/ui/markup components";

Markup Components.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the Markup Components options
    }
});

export default {
    components: {
        DxMarkup Components
    }
}
</script>
React
import React from "react";
import dxMarkup Components from "devextreme/ui/markup components";
import Markup Components from "devextreme-react/markup components";

class App extends React.Component {
    render () {
        dxMarkup Components.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the Markup Components options
            }
        })
        return (
            <div>
                <Markup Components id="markup Components1" />
                <Markup Components id="markup Components2" />
            </div>
        )
    }
}

export default App;

dispose()

Disposes of all the resources allocated to the dxCommand instance.

The following code disposes of an Markup Components instance that corresponds to the element ID (or reference variable in Angular) and removes the element from the DOM:

jQuery
JavaScript
$("#myMarkup Components").dxMarkup Components("dispose");
$("#myMarkup Components").remove();
Angular
HTML
<dx-markup components #markup ComponentsVar id="myMarkup Components"></dx-markup components>
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxMarkup ComponentsComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild("markup ComponentsVar") markup Components: DxMarkup ComponentsComponent;

    removeMarkup Components (e) {
        this.markup Components.instance.dispose();
        document.getElementById("myMarkup Components").remove();
    }
}

element()

Gets the root widget element.

Return Value:

HTMLElement | jQuery

An HTML element or a jQuery element when you use jQuery.

See Also

endUpdate()

Refreshes the widget after a call of the beginUpdate() method.

Main article: beginUpdate()

See Also

execute()

Executes the action associated with this command.

Depending on the layout used for the current view, specific command containers will be available for commands added to this view. Depending on how you define command mapping, the command will be displayed by a specific item of the widget that serves as a command container. When clicking the widget item, the execute() method will be be called for the associated command. This method performs the function assigned to the onExecute command option or calls the navigate() function to navigate to the URL specified for the onExecute command option.

getInstance(element)

Gets the instance of a widget found using its DOM node.

Parameters:
element:

DOM Node

|

jQuery

The widget's container.

Return Value:

Object

The widget's instance.

getInstance is a static method that the widget class supports. The following code demonstrates how to get the Markup Components instance found in an element with the myMarkup Components ID:

// Modular approach
import Markup Components from "devextreme/ui/markup components";
...
let element = document.getElementById("myMarkup Components");
let instance = Markup Components.getInstance(element) as Markup Components;

// Non-modular approach
let element = document.getElementById("myMarkup Components");
let instance = DevExpress.ui.dxMarkup Components.getInstance(element);
See Also

instance()

Gets the widget's instance. Use it to access other methods of the widget.

Return Value: Markup Components

This widget's instance.

See Also

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value: Markup Components

The object for which this method is called.

See Also

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value: Markup Components

The object for which this method is called.

See Also

on(eventName, eventHandler)

Subscribes to an event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value: Markup Components

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

See Also

on(events)

Subscribes to events.

Parameters:
events:

Object

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value: Markup Components

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

See Also

option()

Gets all widget options.

Return Value:

Object

The widget's options.

See Also

option(optionName)

Gets the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

Return Value: any

This option's value.

See Also

option(optionName, optionValue)

Updates the value of a single option.

Parameters:
optionName:

String

The option's name or full path.

optionValue: any

This option's new value.

See Also

option(options)

Updates the values of several options.

Parameters:
options:

Object

Options with their new values.

See Also