I have a method that uses jquery to modify the data in a cell directly. The problem is the data is refreshed by customizeCellFunction. The solution would be to modify the actual report data directly instead of just modifying the DOM. I want to know if modifying the cell data directly in the Report json is possible.
Hello, Amogh!
Thank you for reaching out to us.
Can you provide more details on your use case? Understanding what you are trying to achieve will help us suggest the best solution.
Looking forward to hearing from you.
Best Regards,
Maksym
Hello,
We have a remarks column where we allow users to enter any comments they need to for each line item (row).
Here you can see the first row has a remark saved already. When I click on the + icon it allows me to enter a remark :
To let the cell know that a comment is present and for it to change the icon/ method that is triggered on click of it, I am using customizeCellFunction. And checking for certain values in the row data. Problem is, these values are getting added to the cell using JQuery and Flexmonster has no idea about the updation. So when customizeCellFunction gets triggered again, the cell where a remark was just added reverts back to it's original state. We need a away to somehow update the data that is given as input to Flexmonster to fix this problem
Hello, Amogh!
Thank you for sharing more details about your use case.
Updating the data within the report is indeed necessary to ensure that Flexmonster reflects the changes in the "Remarks" column. This can be done using the updateData
method, which can update the data in runtime without changing other report settings. To add a single remark per update, we recommend using the partial update feature; however, note that it is only supported for JSON data sources. You can find more information and the example of partial data update in our documentation: https://www.flexmonster.com/api/updatedata/#example-4
Keep in mind that these changes only apply to the current visualization. You will need to implement custom logic to save the comments so that they persist after the page is reloaded or opened by other users.
Also, modifying cells directly via the DOM using jQuery is not recommended, as Flexmonster does not track those changes. This can lead to inconsistencies when the grid refreshes or re-renders.
Please let us know if you need any further assistance.
Best Regards,
Maksym
Hello, Amogh!
Hope you are doing well.
We are wondering if you were able to implement the "Remark" column using the suggested approach with the updateData
API call.
Please let us know if any further help is necessary.
Best Regards,
Maksym
Hello,
I am very close to getting this implemented. But right now I am facing two issues and had some doubts about how I can solve them.
1) The JSON array I am providing as the input to datasource is not used in the same order to render the rows. So is there a way I can get the correct JSON record of the row when I click on a cell in that row? (I noticed it uses the same order when it is a flat form instead of classic form. I am using classic form. Does updateData only work for flat form?)
2) I tried performing the update manually by calling updateData through the console and noticed that instead of editing the existing record, it added a new item to the input JSON. This caused the Pivot table to break.
I updated annotation and annotation_desc values
Hello, Amogh!
Thank you for sharing the details.
We looked through the provided input, and here are our recommendations to resolve the mentioned issues and implement the comments functionality:
Defining an ID column
The record IDs should be initially present in your data. You can use an existing field with unique values present in your dataset, or add an additional field for record identification after fetching the dataset. Then, the ID column type should be defined as "id"
via mapping using the type
attribute.
The updateData
method with partial: true
adds an additional record under one of the following conditions:
type: "id"
in the mapping.Otherwise, the existing record would be edited. For reference, see this example from our docs: https://www.flexmonster.com/api/updatedata/#example-4
Accessing the data based on the clicked cell
After defining the ID, it will be available in the recordId
property of CellDataObject. This object is passed to a range of methods and events, such as customizeCell
function and the cellcick
event. Using the ID, you can find the necessary record from your dataset. To do this effectively, your original data should be kept outside of Flexmonster for quick access - for example, in a variable.
Additionally, we’ve prepared a sample demonstrating this setup in action: https://jsfiddle.net/flexmonster/t2nqayus/. This example primarily focuses on showcasing the data preparation logic. The UI styling is kept minimal, but you can use this example as a reference for integrating partial data update with your custom comment handlers.
Feel free to contact us if you have any further questions.
Best Regards,
Maksym
Hello, Amogh!
Just checking in to ask if you had time to look through our recommendations regarding using the updateData
API call for implementing editable comments.
We are looking forward to hearing your feedback.
Best Regards,
Maksym
Hello Maksym,
Thank you for your recommendations. I was able to get it implemented like I wanted to. The recordId was exactly what I needed to find the correct row data and I found that one of the values being edited wasn't being updated correctly which is what was causing the duplicate entry instead of updating the existing one. I was able to resolve both issues.
Thank you
Hello, Amogh!
Thank you for your reply.
We are glad to hear that our recommendations helped you.
Please let us know if more questions arise.
Best Regards,
Maksym