customization Hide/Format groups in tabular datapage

[NickO]

I have a tabular datapage which essentially has the columns of Group, Name, Calc 1, Calc 2, Calc 3 and an Aggregation of Agg1 . The grouping is done by Group field and Agg 1 is shown at that level. Is there a way I can hide the entire grouping if Agg 1 does not meet a certain criteria? Likewise I would like to highlight specific rows in the expanded group based on values in one of the calc fields (varies depending on situation). In the example below, I would want to hide all of Group 1 (Group 1 row w/Agg1 as well as Name 1.1 and Name 1.2 rows) if Agg 1 is less than a designated threshold value. Is there a way to do this?

Group 1		Agg 1
	Name 1.1	Calc 1	Calc2	Calc 3
	Name 1.2	Calc 1	Calc2	Calc 3
Group 2		Agg 1
	Name 2.1	Calc 1	Calc2	Calc 3
	Name 2.2	Calc 1	Calc2	Calc 3

[NickO]

Anybody have any ideas on this one? I'm open to alternative approaches as long as I can get to the same net result.

[Vitalikssssss]

Hi @NickO,

It looks like it possible only with Collapsible group  --> Collapsed by default settings enabled:

You may use the following JS if you have the same type in your Datapage:

<script type="text/javascript">

document.addEventListener('DataPageReady', hideRows);

function hideRows () {

document.querySelectorAll("td[class*='cbResultSetGroup1LabelCellNumberDate']").forEach(function (el) {
    
    if (el.innerHTML < 1000) { //replace this value with the one which you would like to set as target
        
        el.parentNode.style.display = 'none';
   
    }

});

document.removeEventListener('DataPageReady', hideRows);

}
</script>

Hope it helps.

Regards,

vitalikssssss

[NickO]

Apologies for the late reply @Vitalikssssss ... I am not sure how I missed this one. I have successfully hidden individual rows in the datapage where the value is zero, but the groups still show up. So, to illustrate. Instead of

Group 1		Agg 1
	Name 1.1	Calc 1	Calc2	Calc 3
	Name 1.2	Calc 1	Calc2	Calc 3
Group 2		Agg 1
	Name 2.1	Calc 1	Calc2	Calc 3
	Name 2.2	Calc 1	Calc2	Calc 3

 

I have

Group 1		Agg 1
Group 2		Agg 1

I am trying to hide those aggregate lines of the datapage as well. Even with collapsible groups, it still shows the "group" level even if the individual rows are not visible. If there were a way to hide the aggregate row based on the value of the aggregate, I would be golden.

[Vitalikssssss]

@NickO hi!

I think you have a different setup on the Datapage compare to mine test page. 

Perhaps, you can send a screenshot of the table (without JS), so I could build something similar and test the JS further.

Regards,

vitalikssssss

[NickO]

@Vitalikssssss Hopefully the info below clarifies a little. The first is a screenshot of the report with no criteria selected (and the JS to hide empty rows disabled). The second is a report with criteria selected. 

I am currently able to hide rows in the "Solution Name" column based on criteria in hidden rows in the datapage. I would like to be able to hide rows at the Category Name and Product level conditionally based on the associated aggregate value (hiding it with CSS in second screenshot so it only shows aggregate at the product level, but it's there).

 

[Vitalikssssss]

Hi @NickO,

It would not be possible to write some generic code which would be easy to tweak, because Datapages with Groupping enabled has difference in HTML structure.

I have created a sample based on your screenshots and my understanding of the HTML structure. I have added a Total and Aggregation field which would be used as a criteria for hiding.

The report looks like the following without Javascript:

I have set the criteria in JS code to hide Category name and all rows within a group if Total is less than 70, so the Datapage looks like the following:

The JavaScript solution has been modified slightly compare to the first version:

<script type="text/javascript">

document.addEventListener('DataPageReady', hideRows);

function hideRows () {

document.querySelectorAll("td[class*='cbResultSetGroup1LabelCellNumberDate']").forEach(function (el) {
    

    if (el.innerHTML < 70) { //replace this value with the one which you would like to set as target
        
        el.parentNode.firstChild.click();
        el.parentNode.style.display = 'none';        
    }
});

document.removeEventListener('DataPageReady', hideRows);

}
</script>

Regards,

vitalikssssss 

[NickO]

Late thank you @Vitalikssssss. For some reason I didn't get notified of your reply. I will work with this some after I get through the current iteration and see what I can come up with. At first blush this looks very similar to what I am trying to do. I appreciate it.