asked on November 4, 2020
Hello, I use Flexmonster in Vue project.
When I initialized the report, I defined it as a piece of data.
So, I use this API when I need to update table data:
this.flexmonster.updateData({ data: this.dailyData });
Although it does work under normal circumstances, it is possible to update the data empty, and then update to a non-empty data table is not normal, missing a lot of header content.
Of course, it’s fine if I reinitialize the table every time I update the data, but I don’t want to do that.?
⋅ November 4, 2020
Hello, Zander,
Thank you for writing to us.
If we understand correctly when data is set to empty and then reset to non-empty the report slice is not restored: the default slice is shown instead.
If this is the case, our team kindly recommends one of the following approaches:
With this approach, the table headers will remain when the data is set to empty.
After setting the data to non-empty, the empty grid cells will be set to the corresponding values and the slice will not be reset.
The mapping object needs to be set in the dataSource property of the report object.
For example:
report: {
dataSource: {
mapping: {
"Category": { type: "string" },
"Size": { type: "string" },
"Color": { type: "string" },
"Destination": { type: "string" },
"Business Type": { type: "string" },
"Country": { type: "string" },
"Price": { type: "number" },
"Quantity": { type: "number" },
"Discount": { type: "number" },
}
}
}
updateData():
With this approach, when the data is set to empty, an empty data table will be shown.
After setting the data to non-empty, the slice will need to be restored.
This can be achieved by saving the slice before updating the data to empty. Then after the data is updated to non-empty, restoring the slice with the runQuery() API call.
We have prepared a sample Vue Flexmonster project illustrating the above approaches (please see "pivot-vue-data-update.zip" in the attachments).
After unpacking the project, please run the following commands to start the application:
npm i
npm start
The project will be available at http://localhost:8080/
In the example, select the "Updating data + mapping" or "Updating data + runQuery" side menu tab to switch between the examples.
Please let us know if one of the suggested approaches works for you.
Looking forward to your reply.
Kind regards,
Vera
⋅ November 5, 2020
Thanks for your reply, it is so useful to me.??
So the main problem is to store the slice persistently. We need to ensure that there are correct slices in any situation.
⋅ November 5, 2020
Hello, Zander,
Thank you for your response.
We are glad to hear that you found our suggestions helpful.
Should any further questions arise, please feel free to reach out.
Kind regards,
Vera