MultiDropdownView
Description
The MultiDropdown view displays a dropdown list with a set of choices. The list can be bound to a search manager, but can also be used as a standard HTML dropdown list that emits change events. The MultiDropdown view returns one or more values in an array.
Documentation
Library path
splunkjs/mvc/multidropdownview
Simple XML wrapper
Properties
Name | Default value | Description |
id | | Required. The unique ID for this control. |
choices | [] | A static dictionary of choices for the dropdown list. Must be set in JavaScript. If bound to a managerid, the static choices specified here are prepended to the dynamic choices from the search. For example:var mychoices = [
{label:"text1", value: "value1"},
{label:"text2", value: "value2"},
{label:"text3", value: "value3"}
]; |
default | | The value of the choices that are selected by default. Multiple default choices can only be set in JavaScript as an array. |
disabled | false | Indicates whether to disable the view. |
labelField | "" | The UI label to display for each choice. |
managerid | null | The ID of the search manager to bind this view to. |
showClearButton | true | Indicates whether to display that "x" next to choices, allowing a selection to be cleared. |
value | | The value of the current choice. |
valueField | "" | The value or search field for each choice. |
width | 200 | The width of the view, in pixels. |
Methods
Name | Description |
render | Draws the view to the screen. Called only when you create the view manually in JavaScript. |
val | Returns the view's value if passed no parameters. Sets the view's value if passed a single parameter. |
Events
Name | Description |
change | Fired when the value of the view changes. |
Example (Django tag)
{% multidropdown id="example-multidropdown" managerid="example-search" default="main" %}
Example (JavaScript)
<script>
var deps = [
"splunkjs/ready!",
"splunkjs/mvc/multidropdownview",
"splunkjs/mvc/searchmanager"
];
require(deps, function(mvc) {
var MultiDropdownView = require("splunkjs/mvc/multidropdownview");
var SearchManager = require("splunkjs/mvc/searchmanager");
// Instantiate components
new MultiDropdownView({
id: "example-multidropdown",
managerid: "example-search",
default: "main",
labelField: "index",
valueField: "index",
el: $("#mymultidropdownview")
}).render();
new SearchManager({
id: "example-search",
search: "| eventcount summarize=false index=* index=_* | dedup index | fields index"
});
});
</script>
Code examples