Filter Dropdown
This component can be used when an input is required from the users and the users are allowed to select from the dropdown.
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Infinity Origination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- width, left, and top as per design requirements
- height: "preferred"
- Insert the component in the flex and write the following code in the respective form’s onBreakPointChange function.
this.view.filterDropdown.onBreakpointChange(width);
APIs
setDataToDropdown
It sets the data to the dropdown segment. Use the following code in the form controller.
this.view.filterDropdown.setData(data);
The data is set to the segment where the country options are shown in the dropdown. data is of the following format.
[{
lblCountryNameKA: "India",
lblLeftBracketKA: "(",
lblCountryCodeKA: "+91",
lblRightBracketKA: ")",
btnRowClick: "-"
}]
setFilterMode
Sets the filter mode in order to show the options in the dropdown. Set the mode through the form controller in the following way.
this.view.filterDropdown.setFilterMode(mode); // Mode is expected as either 0 or 1.
- When mode is set as 0: It sets the filter to the data to display the options that start with the input given by the user in the textbox
- When mode is set as 1: It sets the filter to the data to display the options that contain the input given by the user in the textbox.
mapErrorComp
Binds the sectionError component with the following code in the controller
this.view.filterDropdown.mapErrorComp(errorWidget); // errorWidget is the setion level error component.
getSelectedOption
Retrieves the selected option
this.view.filterDropdown.getSelectedOption();
selectOption
Selects an option in the component
this.view.filterDropdown.selectOption(opt) //opt is the selected key to be set
Callbacks
rowClickCallback
Invoked whenever the user selects one of the options. Assign the callback in the form controller using the following code.
this.view.filterDropdown.rowClickCallback = <function to be invoked in form controller>
onKeyUpCallback
Invoked on the onKeyUp event of the textbox. Assign the callback in the form controller using the following code
this.view.filterDropdown.onKeyUpCallback = < function to be invoked in form controller>
In this topic