Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

An exception after updating the table data

Answered
Zander 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.😿

3 answers

Public
Vera Didenko Flexmonster 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: 

  1. Defining the mapping object:

    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" },
    }
    }
    }
  2. Resetting the slice via runQuery() after 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

Public
Zander 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.

Public
Vera Didenko Flexmonster 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

Please login or Register to Submit Answer