Menu
Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.
Enterprise
Open source
Cascader class
Signature
typescript
export declare class Cascader extends React.PureComponent<CascaderProps, CascaderState>
Import
typescript
import { Cascader } from '@grafana/ui';
Constructors
Constructor | Modifiers | Description |
---|---|---|
constructor(props) | Constructs a new instance of the Cascader class |
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
defaultProps | static | { changeOnSelect: boolean; } | |
flattenOptions | (options: CascaderOption[], optionPath?: CascaderOption[]) => SelectableValue<string[]>[] | ||
getSearchableOptions | import("memoize-one").MemoizedFn<(options: CascaderOption[]) => SelectableValue<string[]>[]> | ||
onBlur | () => void | ||
onBlurCascade | () => void | ||
onChange | (value: string[], selectedOptions: CascaderOption[]) => void | ||
onCreateOption | (value: string) => void | ||
onInputKeyDown | (e: React.KeyboardEvent<HTMLInputElement>) => void | ||
onSelect | (obj: SelectableValue<string[]>) => void |
Methods
Method | Modifiers | Description |
---|---|---|
render() | ||
setInitialValue(searchableOptions, initValue) |
constructor(props)
Constructs a new instance of the Cascader
class
Signature
typescript
constructor(props: CascaderProps);
Parameters
Parameter | Type | Description |
---|---|---|
props | CascaderProps |
defaultProps property
Signature
typescript
static defaultProps: {
changeOnSelect: boolean;
};
flattenOptions property
Signature
typescript
flattenOptions: (options: CascaderOption[], optionPath?: CascaderOption[]) => SelectableValue<string[]>[];
getSearchableOptions property
Signature
typescript
getSearchableOptions: import("memoize-one").MemoizedFn<(options: CascaderOption[]) => SelectableValue<string[]>[]>;
onBlur property
Signature
typescript
onBlur: () => void;
onBlurCascade property
Signature
typescript
onBlurCascade: () => void;
onChange property
Signature
typescript
onChange: (value: string[], selectedOptions: CascaderOption[]) => void;
onCreateOption property
Signature
typescript
onCreateOption: (value: string) => void;
onInputKeyDown property
Signature
typescript
onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
onSelect property
Signature
typescript
onSelect: (obj: SelectableValue<string[]>) => void;
render method
Signature
typescript
render(): JSX.Element;
Returns:
JSX.Element
setInitialValue method
Signature
typescript
setInitialValue(searchableOptions: Array<SelectableValue<string[]>>, initValue?: string): {
rcValue: string[];
activeLabel: any;
};
Parameters
Parameter | Type | Description |
---|---|---|
searchableOptions | Array<SelectableValue<string[]>> | |
initValue | string |
Returns:
{
rcValue: string[];
activeLabel: any;
}
Was this page helpful?
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:

Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.

Getting started with Grafana dashboard design (EMEA Timezone)
In this webinar, you'll learn how to design stylish and easily accessible Grafana dashboards that tell a story.

Unify your data with Grafana plugins: Datadog, Splunk, MongoDB, and more
In this webinar, learn how to leverage Grafana's plugin ecosystem for access to 80+ data sources, including plugins for Datadog, Splunk, MongoDB, and more.