Using the Popup methods

Wijmo has a Popup control, that is a part of wijmo.input module. Aside from the control, Wijmo core provides a couple methods that let you show and hide a popups with whatever content you want. Thees methods are not tied to the Popup control. You can use them with any HTML elements.

The methods are simple:

• showPopup()
• hidePopup()

Show

To show a popup, you must pass a HTML element as an argument. This HTML is the popup that you want to display.

For example, if you want to show a control like the ListBox as a popup, you must create the control template and instantiate the control. Then you can call the showPopup method passing this as argument.

Example

import * as wijmo from '@grapecity/wijmo';
import * as wjInput from '@grapecity/wijmo.input';

let listbox = new wjInput.ListBox('#myListbox', {
    itemsSource: data,
    checkedMemberPath: 'visible',
    displayMemberPath: 'country'
});

...
// Show the popup
wijmo.showPopup(listbox.hostElement);

Hide

To hide the Popup, invoke the hidePopup method with the HTMLElement passed as the argument.

// Hide the popup
wijmo.hidePopup(listbox.hostElement);