DevExtreme jQuery - Get and Set Options
All operations with widget options are carried out using the option() method. You can use it to do the following.
Get All Options
JavaScript
var menuInstance = $("#menuContainer").dxMenu("instance");
var menuOptions = menuInstance.option();
// ---------- or ----------
var menuOptions = $("#menuContainer").dxMenu("option");Get the Value of a Single Option
JavaScript
var menuInstance = $("#menuContainer").dxMenu("instance");
var menuDataSource = menuInstance.option("dataSource");
var submenuMode = menuInstance.option("showSubmenuMode.name");
// ---------- or ----------
var menuDataSource = $("#menuContainer").dxMenu("option", "dataSource");
var submenuMode = $("#menuContainer").dxMenu("option", "showSubmenuMode.name");Set a Single Option
JavaScript
var menuInstance = $("#menuContainer").dxMenu("instance");
menuInstance.option("dataSource", []);
menuInstance.option("showSubmenuMode.name", 'onClick');
// ---------- or ----------
$("#menuContainer").dxMenu("option", "dataSource", []);
$("#menuContainer").dxMenu("option", "showSubmenuMode.name", 'onClick');NOTE
If you perform several option changes, wrap them with the beginUpdate() and endUpdate() method calls. This prevents the widget from being unnecessarily refreshed and from events being raised. Use an object instead if you need to change several options at once.
Set Several Options
JavaScript
var menuInstance = $("#menuContainer").dxMenu("instance");
menuInstance.option({
dataSource: [],
showSubmenuMode: {
name: 'onClick'
}
});
// ---------- or ----------
$("#menuContainer").dxMenu({
dataSource: [],
showSubmenuMode: {
name: 'onClick'
}
});NOTE
When you pass an object to the option(options) method or to the jQuery plugin at runtime as shown in the previous code, options specified in this object will be merged with the options that were specified at design time.
This works properly unless the options were specified as arrays. If the latter is true, set new options between beginUpdate() and endUpdate() method calls. The following code sample demonstrates the described technique using an example of the valueAxis array in the Chart widget:
JavaScript
var chart = $("#chartContainer").dxChart({
// ...
valueAxis: [{
name: "axis1",
// ...
}, {
name: "axis2",
// ...
}]
}).dxChart("instance");
chart.beginUpdate();
chart.option("valueAxis[0].visible", false);
chart.option("valueAxis[1].grid.visible", false);
chart.endUpdate();See Also
- API Reference.WidgetName.Configuration, for example, API Reference.Menu.Configuration
- Create and Configure a Widget - jQuery
Feedback