On sorting style of cell not updating

posted on January 8th, 2024

Answered

baskar asked on January 8, 2024

I'm validating data on server side, i need to highlight the cell based on invalid data got through api call response, on initial render i set style for invalid data, but on sort cell label values getting sort but styles doesn't update, how to achieve this

compare status column and lead source type column on 2 images i have attached

Attachments:
1.png
2.png

9 answers

Public

Nadia Khodakivska ⋅ Flexmonster ⋅ January 8, 2024

Hello,

Thank you for contacting us.

We could not reproduce the described behavior on our side. Could you please specify how the style for the cells is applied? It would greatly help us.

Looking forward to hearing from you.

Kind regards,
Nadia

Public

baskar ⋅ January 8, 2024

With customized cell function I'm setting class name to the cell

let importPreview = new Flexmonster({
...
customizeCell: customizeCellFunction,
...
});

function customizeCellFunction(cell, data) {
        ...
        cell.addClass('error-cell');
        ...
}

Public

Nadia Khodakivska ⋅ Flexmonster ⋅ January 9, 2024

Hello,

Thank you for the response.

We recommend using the "rowIndex" property of the CellDataObject to ensure that the customizeCell method highlights necessary cells. You are welcome to check the following JSFiddle for illustration: https://jsfiddle.net/flexmonster/3kqdj2c1/. Feel free to customize it for your needs.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public

baskar ⋅ January 10, 2024

i have attached JSFiddle: https://jsfiddle.net/BaskarR/ud8pcbax/1/. in this i have reproduced the issue that i have faced.

i'm comparing my original array of object reponse data from api call (datavalue) with (getData())
Based on this i highlight the invalid cells, but on sort or filter label values working fine, but styles doesn't updating on sort or filter

I need to get the index value of original array of object data (datavalue) to compare and highlight the invalid cells through customizeCell method
Do you have any solutions?

Public

Nadia Khodakivska ⋅ Flexmonster ⋅ January 11, 2024

Hello,

Thank you for reaching out to us.

The reason for such behavior, when style doesn't update on sort, is that the datavalue array has a constant order of the records while the order of rows in the pivot is changed on sort. We recommend changing the logic of the customizeCell function. For example, you can add the new "recordID" field for each record and compare this unique "recordID" value instead of rowId from your JSFiddle.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public

baskar ⋅ January 11, 2024

It's working good as you said, JSFiddle: https://jsfiddle.net/BaskarR/ud8pcbax/19/

But in my application, i have 50 columns whenever i try to scroll in flexmonster, customizeCell function is re-rendering and i try to get s.no. but s.no. column value is not getting within the customizeCell function but in JSFiddle this scenario not happening any ideas?

I have attached 3 images

In first image: Every invalid cells properly updated with error style
In second image: Check with 8th row, when i try to scroll ( column - 13, row - 8 ) has a invalid data
In third image: After scroll to column 7th, customizeCell function re-rendering and i can't get s.no. column values, so the styles is not updating

Attachments:
1.jpg
2.jpg
3.jpg

Public

Nadia Khodakivska ⋅ Flexmonster ⋅ January 12, 2024

Hello,

Thank you for the response.

We recommend setting the type of the "recordId" field to "id" using Mapping. For example,

report: {
    dataSource: {
      data: getData(),
      mapping: {
        "recordId": {
          type: "id"
        }
      }
   },
   ...
}

Then, you can get the id value of the record using the data.recordId property of the CellDataObject. Please check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/k8wxLab1/.

Please let us know if it works for you. Looking forward to hearing from you.

Kind regards,
Nadia

Public

baskar ⋅ January 13, 2024

Hello Nadia Khodakivska,
Thank you for you support, It's working great

Public

Nadia Khodakivska ⋅ Flexmonster ⋅ January 15, 2024

Hello Baskar,

Thank you for the feedback.

We are glad to hear that it works for you.

Feel free to contact us in case other other questions arise.

Kind regards,
Nadia

On sorting style of cell not updating

9 answers

Please login or Register to Submit Answer