asked on October 31, 2022
What needs to be done?
When specific column (measure) has a value that satisfies the condition to be able to do one of the following:
We ended up retrofitting flexmonster.on('aftergriddraw', myFunction); but it only affects the viewport. Formatting is lost for any export and on large tables there is a "jumpy" behavior when scrolling through the records.
Is there any way to obtain the record a particular cell belongs to? Here is a very simple example
We use JSON to pass all data to flexmonster. Below is a sample of two records
[{
"accountId": 23,
"name": "My test acccount XYZ",
"status": "Active",
"address": "321 Michigan Sq., #55"
}, {
"accountId": 32,
"name": "My test acccount ABC",
"status": "Inactive",
"address": "123 Oxford Av., #23"
}]
It would be a lot simpler if the code would allow to "see" the current record and specific measure. Something like this:
function customizeCellFunction(cell, data) {
if ( data.measure ) {
if ( [dataobj][data.recordId].measure['status'] == 'Active' ) cell.addClass = 'active-item'
}
};
================================
Just to mention in the flat view there is a recordId associated with data variable but it is blank.
⋅ November 1, 2022
Any advise @flexmonster?
⋅ November 1, 2022
Hello!
Thank you for reaching out to us.
Kindly note that the desired behavior can be achieved by using customizeCell() function.
The idea lies in the following:
1. Duplicate the 'Status' field with the same value:
{
accountId: 23,
name: "My test acccount XYZ",
status: "Active",
statusId: "Active",
address: "321 Michigan Sq., #55"
}
2. Set the 'id' data type to the new field using mapping:
dataSource: {
data: ...,
mapping: {
"statusId": {
type: "id"
}
}
}
The field with the 'id' type is not shown in the Field List or on the grid but is assigned to the recordId property of the data object in customizeCell function.
3. Having the data.recordId field with 'Active' or 'Inactive' values, we can assign styles and attributes using customizeCell:
function customizeCellFunction(cell, data) {
if (data.recordId == 'Active') {
//Add class to a row where column satisfied the condition
cell.addClass("row-class");
//Add attribute to a row where column satisfied the condition
cell.attr["myattribute"] = data.label;
}
};
We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/acbrhs18/.
Hope you will find our answer helpful.
Feel free to contact us in case of any other questions.
Regards,
Solomiia
⋅ November 1, 2022
Thank you for reply. We will try it later today.
⋅ November 2, 2022
The solution worked. However, it is not exactly what we were looking for. Shortly said we have solution that reads all visible rows and looks for "pattern." Proposed solution "hacks" the recordId for something that is actually a formatting issue.
Please consider to add option to access row of the cell more directly, specifically for the formatting. With row index in place it should not be that hard and we did it internally, but performance dropped and on large tables and 34 inch monitors it is painful to watch 🙁
Good option would be to add formatting to the row, instead of the individual cells. This can open a lot of options, including special type within the data structure. The following code would be easy to manage and will make FM a much more flexible tool.
{
"style": [{
"cell": [{
"measure": "isActive",
"value": "Inactive",
"inline": "font-color: #cccccc;background-color:#333333",
"class": "inactiveCell"
}],
"row": [{
"measure": "isActive",
"value": "Inactive",
"inline": "font-color: #cccccc",
"class": "inactiveRow"
}]
}]
}
Data should not be altered to satisfy visuals.
⋅ November 4, 2022
Hello!
Thank you for your detailed feedback.
We will consider the approach you suggested when implementing new styling features.
Regarding the initial question about highlighting the rows on the flat view, our team will research possible solutions.
We will let you know if we would come up with another approach.
Feel free to contact us in case of any other questions.
Regards,
Solomiia
⋅ November 22, 2022
Hello!
Hope you are doing well.
Our team wants to suggest one more example of highlighting the rows in the flat view based on the column value.
The idea is connected to Flexmonster's virtual scroll feature, which renders not all the rows present in the dataset, but only those visible on the grid, with a small reserve of rows above and below the visible area.
Here is the detailed guide:
1. Using the beforegriddraw event, which is triggered before grid rendering, get the columnIndex of the needed conditionHierarchy field:
while (flexmonster.getCell(0, colIdx) != null) {
if (flexmonster.getCell(0, colIdx).hierarchy.uniqueName == conditionHierarchy) {
return colIdx;
}
colIdx++;
}
2. Then, still in the beforegriddraw event handler, get indexes of all the rows present on the DOM tree using document.querySelectorAll():
let rowIndexes = [...document.querySelectorAll(".fm-row")].map(row => row.getAttribute('data-r'));
3. Filter all row indexes with the necessary value(conditionMember) in the colIdx from step 1:
for (let i of rowIndexes) {
if (flexmonster.getCell(i, colIdx).label == conditionMember) {
rowsWithCondition.push(+i);
}
}
4. Using the aftergriddraw event, add the styles to the rows with the needed condition:
for (let i of rowsWithCondition) {
document.querySelectorAll(`.fm-cell[data-r="${i}"]`).forEach(function(node) {
node.style.backgroundColor = "#AEC670";
});
}
Here is a JSFiddle sample with highlighted rows for green member of the Color hierarchy: https://jsfiddle.net/flexmonster/9a4o8ne6/.
Please note this is the example approach, and your implementation may differ.
Let us know if the suggested approach works for your case.
Regards,
Solomiia
⋅ November 30, 2022
Hello!
Hope you are doing well.
Our team is wondering if you had a chance to look through our previous message.
Could you please let us know if the suggested approach satisfies your needs?
Looking forward to hearing from you.
Regards,
Solomiia
⋅ December 7, 2022
Hello!
Hope you are having a great week.
Just checked in to ask if the last suggested approach works for your case.
Looking forward to hearing from you.
Regards,
Solomiia