Domino View design Part3: Freezing first column

Column locking using CSS and Javascript.
In web, multiple columns views are displayed with horizontal scroll bar. When you move the scroll bar to the right, the left side columns will start disappear and most of the times the first column will be a key column and you want to see other column values with respective to the key column. In Microsoft excel sheet you can use the 'freeze pane' feature to lock a column. Similarly this design tip will help you to freeze the first column.

Steps:

1.Create a $$ViewTemplateDefault form

2.Create a DIV tag with name "ViewBody"

3.Embed a view or create a $$ViewBody field

4.End the DIV tag

5.In the 'JSHeader' event copy paste the javascript below

var columnlengthmax = 5; // Maximum column length configuration.

function freezecolumn()
{
var tableElements = document.all.ViewBody.getElementsByTagName('table');
var table = tableElements[tableElements.length - 1] ;
table.cellSpacing = '0' ;
table.border=1
headers = table.getElementsByTagName("th") ;
columnlength = headers.length; // Number of columns in the view
for( i = 0; i < headers.length; i++) {
headers[i].bgColor = '#cccccc' ;
}
rows = table.getElementsByTagName("tr") ;
var counter = 0
for( i = 0; i < rows.length; i++) {
//LOCK THE FIRST COLUMN IF THE COLUMN WIDTH EXCEEDS
if(columnlength >= columnlengthmax) {
var tr = rows.item(i);
// SET THE FIRST COLUMN CLASS NAME as 'locked'
tr.cells[0].className = 'locked';
}
}
}

6.Call 'freezecolumn()' javascript function in the 'onLoad()' event.


7.Link to style.css in the Head event
(Refer the screenshot of blog entry 'Domino View design Part2: Freezing Column Headers')


8. Create a page with name "style.css" and paste the the css style tags


div#ViewBody {
width: 100%;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

div#ViewBody table th {
width: 100px;
background-color: lightblue;
position:relative;
top: expression(document.getElementById("ViewBody").scrollTop-1);
z-index: 30;
}

div#ViewBody th.locked {
background-color: lightblue;
border-right: 2px solid silver;
position:relative;
cursor: default;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
z-index: 40;
}

div#ViewBody td.locked {
background-color: #efefef;
border-right: 2px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
z-index: 10;
}


Note: by changing height parameter, you can control the height of the view display,
Also by changing the z-index, you can the change the column header starting position.

7. Open the view in web browser
If you scroll the view using horizontal scroll bar, you can see the first column is in freeze mode.