Webix UI pivot afterloadevent

Webix JS
#1

I want to automatically show the configuration settings panel after webix UI PIVOT loaded data or ideally it shows up even without loading data from server. i found the old version seems have onAfterLoad event, but the latest pro version has none. i am doing a work to let a client to select some rows and columns first, then fetch data from server, so it would be nicer to show the settings first.

#2

Good day!

The Pivot and most of our complex widgets (except Kanban and Spreadsheet) are built as modularized apps on Webix Jet, and the user can customize existing modules or add new ones.

Modules are implemented as JetViews (ES6 classes) where any UI element, data-related service, or feature can be customized by the same rules. For more details about this architecture, please check the following blog article, which describes the general idea and reasons for this structure.

Please note that complex modifications may require observing the source code of the tool in order to build the most feasible solution that will correctly alter/extend the original logic.

At first, you need to cancel automatic data download. This can be done by customizing Jet Service: create a class (MyBackend , as example) which extending pivot.services.Backend. Inside this class, we customize the data loading logic. We add a custom variable, which helps us to decide if the data should be actually loaded. By default, this variable is set to false, so an empty array will be returned.

To reload Pivot with the actual dataset, you can change this value and reload data (only the data, without resetting the structure as clearAll would do). After forced reload, you need also to refresh the UI to calculate and render new data. The actual data refresh is performed by calling the getData() method of the Local service with the force flag active (see our docs for more info).

In order to manipulate the configuration window, you can use the property config: true.
Or call $$("pivot").getState().config = true if the settings window needs to be opened not on the init, but at some other moment. Please, check out the docs.

At the end, replace default view and service via the override map:

webix.ui({
    view: "pivot",
    url: "https://docs.webix.com/pivot-backend/",
    override: new Map([[pivot.services.Backend, MyBackend]]),
});

Please, check out the snippet with example: Code Snippet

#3

this is nice. for the backend override part, i did saw some examples but for the config part, seems after a few upgrades, there is some version inconsistency, so i cant make it work. but this code snippet is wonderful, thanks so much

1 Like
#4

You are always welcome :slight_smile: