Get Free Trial

How to load data using a custom method

visualbbasic asked on February 13, 2020

I’m using Flexmonster Vue pivot table component and need to populate data using a custom method instead of pointing to a data source using a URL. 

data: Object = {
dataSource: {
type: 'json',
filename: 'localhost:13500/zzzz?a=2020-02-20&b=2020-02-21',

instead of doing this, is it possible to give a method such as:

data: Object = {
dataSource: {
type: 'json',
filename: () => { return ajaxCall() },


3 answers

Illia Yatsyshyn Illia Yatsyshyn Flexmonster February 14, 2020

Thank you for reaching out to us.
Our team would like to kindly inform you that the described implementation is possible. In order to achieve that, the data property of the dataSource object should be used instead of the filename property. The filename property is dedicated to specifying the URL of the file containing a data set or script generating it. In turn, the data property serves to point to inline JSON or the function providing it.
More information about the dataSource object and its properties, including the data property, can be found following the link: Data Source Object.
Please note that due to asynchronous nature of Ajax functions the data may not be generated and returned before Flexmonster tries to load it. Therefore we recommend connecting to the data source after the component is created with an empty report and the Vue itself is mounted. It is achievable using the following structure:

mounted() {
    ajaxData((data) => {
        this.$refs.pivot.flexmonster.connectTo({ data });

where the connectTo API call serves in order to connect to the generated data set.
More information about the method can be found following the link.
We hope it works for you.
Best regards,

visualbbasic March 19, 2020

hey thanks for the reply.
If I want to use a streaming endpoint, does Flexmonster support it?

Illia Yatsyshyn Illia Yatsyshyn Flexmonster March 20, 2020

Thank you for your question.
If I understand you correctly, the data source you are using is going to update the data set needed to be displayed by Flexmonster.
We would like to kindly explain that being loaded to Flexmonster, the data set is not going to be updated until it is not done manually.
Our team would like to kindly draw your attention to the updateData API provided by Flexmonster. Such a method allows updating the data for the report without cleaning the report itself. Only the dataSource is updated, whereas the slice, all defined options, number, and conditional formatting, the scroll position stay the same.
In case such a method is triggered every time the data set is updated, the streaming effect can be achieved.
Please check out an example demonstrating such approach.
More about updateData method in our documentation.
We hope it helps.
Please contact us in case additional questions occur.
Kind regards,

Please login or Register to Submit Answer