CODEWITHSUNDEEP
xpages
user1590386
user1590386

Reputation: 77

XPages - Is it possible to make view column header fixed?

Just checking to see if there is a very simple way to make the view header fixed so that as you page down in the view in XPages, the header stays where it is. position=Fixed is not a property of xp:viewColumnHeader.

Upvotes: 0

Views: 1333

Answers (3)

Julian Buss
Julian Buss

Reputation: 1114

yes, it is possible, but requires some JavaScript coding. I solved it for a customer recently using with the following code. The basic idea is to geht the width of the columns out of the first line of TDs, then apply this with to the THs ad set the THs to fixed afterwards. You need to run this function after a partial update, too. Good luck. 

var fixTableHeaders = function() { 
    var thead = dojo.query("thead")[0]; 
    if (!thead) return;
    thead.style.position = "static";
    var THs = dojo.query('.xspDataTable th'); 
    var firstTDs = dojo.query('.xspDataTable tr:first-child td');
    var secondTDs = null;
    if (firstTDs.length < 2) {
        // categorized view, first line is a category with only one cell
        // -> we need the second line
        secondTDs = dojo.query('.xspDataTable tr:nth-child(2) td');         
    }
    var w = 0; 
    for (var i = 0; i < THs.length; i++) {
            w = dojo.coords(THs[i], true).w;                
            // console.log(i+" w="+w);
            THs[i].style.width = (w)+"px";
            if (firstTDs[i]) { 
                //if (secondTDs && secondTDs[i]) secondTDs[i].style.width = w+"px";
                //else firstTDs[i].style.width = w+"px";
                firstTDs[i].style.paddingTop = "3em";
            } 
    } 
   thead.style.position = "fixed";                        
}     
dojo.addOnLoad(fixTableHeaders);

Upvotes: 1

David Leedy
David Leedy

Reputation: 3593

I saw some jQuery code the other day that could make a Table Header fixed. Don't remember where it was but something that can help you should be out there.

Upvotes: 0

Naveen
Naveen

Reputation: 6936

If you want to add the attribute of position to xp:viewColumnHeader you can use the attrs property to do that (works on 8.5.3). You code would look something like this:

<xp:viewColumnHeader ......>
    <xp:this.attrs>
        <xp:attr name="position" value="fixed"></xp:attr>
    </xp:this.attrs>
</xp:viewColumnHeader>

But I don't think that alone would do the trick. Some time back I created a CSS snippet to make floating Banner, Title Bar and Place Bar in Application Layout control of Extension Library. You can get some ideas from that.

Upvotes: 1

Related Questions