Create and Configure a UI Component
To create a UI component, call its constructor passing the target element and a configuration object. You may need to set additional properties for the target element (for example, the display property of data visualization UI components should be set to "block").
- import Accordion from "devextreme/ui/accordion";
- ...
- let container = document.getElementById("root");
- let element = document.createElement("div");
- container.appendChild(element);
- let instance = new Accordion(element, options);
- ...
If you do not use modules, you can use the DevExpress.ui namespace to access constructors of most of the UI components. The exceptions are data visualization components: VectorMap, RangeSelector, and all types of Charts and Gauges. These components belong to the DevExpress.viz namespace.
- let instance = new DevExpress.ui.dxAccordion(element, options);
- let dataVizInstance = new DevExpress.viz.dxPolarChart(element, options);
Change Component Properties and Handle Events
A specific UI component instance is required to call methods and subscribe to events. Call the UI component class's static getInstance(element) method to retrieve the existing UI component instance.
- // Modular approach
- import Accordion from "devextreme/ui/accordion";
- ...
- let element = document.getElementById("myAccordion");
- let instance = Accordion.getInstance(element) as Accordion;
- // Non-modular approach:
- let element = document.getElementById("myAccordion");
- let instance = DevExpress.ui.dxAccordion.getInstance(element);
You can get and set UI component properties at runtime using the option() method.
- // Get a property value
- let isVisible = instance.option("visible");
- // Set a property value
- instance.option("visible", false);
To subscribe to an event, you can use a property whose name starts with "on" (for example, "onItemClick").
- Accordion(element, {
- ...,
- onItemClick: function(e){
- alert("An item is clicked!");
- }
- })
Alternatively, you can use the "on()" method.
- instance.on("itemClick", function(e){
- alert("An item is clicked!");
- })
Advanced Configuration
Specify the UI component's integrationOptions property to provide two-way binding and template support.
- DevExpress.ui.dxAccordion(element, {
- ...
- integrationOptions: {
- watchMethod: ...
- templates: ...
- createTemplate: ...
- }
- })
The integrationOptions configuration object contains the following fields:
watchMethod
This field accepts the following function:
- function(expressionGetter, callback, watchOptions)
Where
expressionGetter - An expression being watched. Accepts a function or string.
callback - A callback is called when the watcher is first set and each time it detects a value is changed for the expressionGetter during the internal evaluation loop.
watchOptions - An object containing two Boolean fields:
skipImmediate - Specifies whether to skip the first value comparison.
deep - Specifies whether the watcher uses deep or shallow comparison.
The method should return a function that is called when watchers related to the UI component are deleted.
templates
This field holds a map of the templates that are added when the UI component is initialized. Item keys should correspond to template names. Item values should be objects that contain render functions.
- templates: {
- itemTemplate: {
- render: function (renderData){
- // 'renderData' includes the following fields:
- // 'model' - data to be applied on markup
- // 'itemIndex' - index of item in collection (or id in hierarchical collections)
- // 'container' - append rendered markup to this element
- ...
- }
- }
- }
The render function should return an HTML element containing the rendered template.
createTemplate
A function that processes a custom template. It accepts an HTML markup or a DOM node passed to a UI component's ...Template property and returns an object with a render function.
- createTemplate: function(source) {
- var template = Hogan.compile(source);
- return {
- render: function(args) {
- return template.render(args.data);
- }
- };
- }
In some cases, templates are removed at runtime, for example, when items are updated. To delete resources allocated to removed templates, handle to the dxremove event.
- integrationOptions: {
- templates: {
- "item": {
- render: function(args) {
- var div = document.createElement("div");
- new Button(div ,{
- text: args.model
- });
- var intervalId = setInterval(function() {
- console.log(args.model);
- }, 500);
- DevExpress.events.on(div, "dxremove", function() {
- clearInterval(intervalId);
- });
- args.container.appendChild(div);
- return div;
- }
- }
- }
- }
Remove a UI Component
Use a UI component's dispose() method to dispose of the resources allocated to it.
- let element = document.createElement("div");
- let instance = new Accordion(element, options);
- ...
- instance.dispose();
After the dispose method call, the HTML element associated with the UI component remains in the DOM. If you need to remove the element as well, use a native API call.
- element.remove();
If you have technical questions, please create a support ticket in the DevExpress Support Center.