Freeze Headers On Tabular Report

[ChrisCarlson]

I am trying to get the freeze headers in tablular report script to work and am unable to get it working. I have followed the instructions at the link below but it is still not working. Has anyone had success in getting this script to work? It is for a tabular report in an iframe inside an Caspio HTML datapage.

 

http://forums.caspio.com/index.php/topic/4678-j-freeze-header-in-a-tabular-report/

 

[Jan]

Hello ccarls3,

 

Please make sure, that your code in the Header section is:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.7/jquery.floatThead.min.js"></script>
<div id='cb_lib'>

There is a Note in instructions: To use "iframe deploy code" or "direct from Caspio link", place the above script in the HTML Header section of the Configure Results Page Fields of the DataPage using the Caspio Bridge DataPage Wizard.

 

On my DataPage, the Headers are Freezed, when I scroll the height of the frame, not of the whole page.

 

I hope, it helps.

[CollinCC]

Hello -

I was able to successfully use this script to freeze the headers, but now my results page is not allowing the grouping I had before I turned it on. I was previously grouping the results by two fields, Status first and then Schedule. Now Schedule is no longer grouped and it will not let me check it. Is there a way to fix this?

[Jan]

Hello CollinCC,

 

Welcome to Caspio Forum!

 

As far as I know, this script cannot disable the "Enable data grouping by this field" checkbox.

Please make sure that this field is not used in any Aggregate.

[ababcock]

I am trying to freeze a header on a Details page -- is there a way to adapt this to a Details page (rather than the results page)?

[Kronos]

Hi, leaving this here just in case you want to have a sticky header on a Calendar DataPage:

<style>
nav.cbResultSetCalendarStickyHeader {
position: sticky !important;
top:0;
} 

body {
 margin-top: 0px;
}
</style>

 

[cheonsa]

Hi All!

Since you will not be able to enable the sticky header if responsive option is enabled, you can just paste this code in the Header of the Results Page:

<style>
tr[class*="cbResultSetTableHeader"]{

position: sticky;
top: 0px;
z-index: 1000;

}
</style>

 

[cheonsa]

In addition, if the Totals and Aggregation is displayed on the top or above the data, you can use this code to freeze it as well:

tr[data-cb-name="grand_total"]{

position: sticky;
top: 30px;
z-index: 1000;

}

 

[IamBlossom]

You can enable the sticky header row in the DataPage if the responsive option is disabled. You can check this article for more details:

https://howto.caspio.com/datapages/reports/fixed-rows-and-columns/

[PotatoMato]

Hi! Just to update, Caspio has added a solution to have a sticky header on responsive datapages: https://howto.caspio.com/tech-tips-and-articles/enabling-sticky-headers-in-responsive-tabular-reports/