1

Ok wizards, someone knows how to do this ...

I have a very complex custom control that renders the availability information for x number of people (could be 1 could be 100). the calendar renders any given date range as specified in the control properties.

What this means is that the control has the potential to be very long and all this data is rendered as a html table.

With each persons name appearing in the first column im looking to fix that column and let the rest of the table scroll horizontally so the user can browser through the full range of dates but keep visible the people names.

so how do i fix the first column in place in table that looks something like the code below ...

<table> <tr><td></td><td colspan='31'>Jan</td><td colspan='28'>feb</td>...</tr> <tr><td></td><td>1</td><td>2</td><td>3</td> ...<tr/> <tr><td>Person 1</td><td></td><td></td><td>Busy</td> ...<tr/> <tr><td>Person 2</td><td></td><td>Busy</td><td>Busy</td> ...<tr/> </table>

In case it's helpful in any way this is a C# app (asp.net) and i am open to using javascript if required.

thanks guys :)

Improve this question
6
  • I see you're using ASP.Net, which bundles jQuery. Are you using jQuery? Commented Jul 26, 2011 at 8:37
  • i am yes ... do u know of a jquery solution ??? Commented Jul 26, 2011 at 9:18
  • i think i found a neat way of doing this by wrapping up the table in 2 div tags and setting up some css styles Commented Jul 26, 2011 at 9:18
  • @Wardy - please post your simple solution if you have one so that others can learn from it. Commented Jul 26, 2011 at 9:26
  • If you're using jQuery, this is a duplicate of How do I freeze the first and last columns of an html table in a scrollable div?, you'll find a solution there (you have to scroll down, because the OP answered his own question). Commented Jul 26, 2011 at 9:26

3 Answers 3

Reset to default
3

Here's a solution by Markku Uttula that does this with a combination of CSS and HTML (below). Works with reasonable performance even on IE6, to my surprise. V. impressive work. The scroll bars on Chrome, Opera, and Firefox end up underneath the frozen columns/rows for some reason, but hopefully the bars are big enough that that won't be a problem...

CSS:

body { margin: 0; height: 100% } .b { border-collapse: collapse } .b td { border: 1px solid #f80; vertical-align: top } p { margin: 1px; padding: 0; font-size: 9px; font-family: Arial } p.c { text-align: center; font-size: 12px } p span { font-size: 12px; white-space:nowrap; color: #888 } /* TopLeft fixed corner */ td.bg101 { background-color: #ffc } /* Top fixed rows */ td.bg000 { background-color: #f8c } td.bg001 { background-color: #f4c } /* Left fixed rows */ td.bg110 { background-color: #fcc } td.bg111 { background-color: #fcf } /* The scrollable content area */ td.bg010 { background-color: #fff } td.bg011 { background-color: #ff4 }

JavaScript:

var ieBug = ((document.all) && (!window.opera)); // IE doesn't really handle fixed elements well :) var fpElement = false; function fpCW() { return document.documentElement ? document.documentElement.clientWidth : document.clientWidth; } function fpCH() { return document.documentElement ? document.documentElement.clientHeight : document.clientHeight; } function fpTopLeft(elementNode, iTop, iLeft) { elementNode.style.top = (iTop)+"px"; elementNode.style.left = (iLeft)+"px"; } function fpDefaults(elementNode) { elementNode.style.position = ieBug ? "absolute" : "fixed"; fpTopLeft(elementNode,0,0); return elementNode; } function fpClone(elementNode, cloneZindex) { var clone = fpDefaults(elementNode.cloneNode(true)); clone.style.background = "#fff"; clone.style.overflow = "hidden"; clone.style.border = "none"; clone.style.zIndex = cloneZindex; return clone; } function fpInitFreezePanes(fpTableElementId, fpTableContainerDivElementId, fpPivotCellId, fpDisableBodyScrollbars) { if (fpElement !== false) { alert("Page already contains an element with fixed panes."); } else { var fpTableElement = document.getElementById(fpTableElementId); var fpTableContainerDivElement = document.getElementById(fpTableContainerDivElementId); var fpPivotCell = document.getElementById(fpPivotCellId); if ((!fpTableElement) || (!fpTableContainerDivElement) || (!fpPivotCell)) { alert("Unable to find table, container or pivoting cell?"); } else { fpElement = fpTableContainerDivElement; if (fpDisableBodyScrollbars) { var x = document.getElementsByTagName("body")[0]; x.style.overflow = "hidden"; x = document.getElementsByTagName("html")[0]; x.style.overflow = "hidden"; } fpTableContainerDivElement = fpDefaults(fpTableContainerDivElement); fpTableContainerDivElement.style.width = (fpCW()-2)+"px"; fpTableContainerDivElement.style.height = (fpCH()-2)+"px"; fpTableContainerDivElement.fpPT = fpPivotCell.offsetTop; fpTableContainerDivElement.fpPL = fpPivotCell.offsetLeft; var copy1 = fpClone(fpTableContainerDivElement, 4); copy1.style.width = (fpTableContainerDivElement.fpPL)+"px"; copy1.style.height = (fpTableContainerDivElement.fpPT)+"px"; var copy2 = fpClone(fpTableContainerDivElement, 3); copy2.style.width = (fpTableElement.offsetWidth)+"px"; copy2.style.height = (fpTableContainerDivElement.fpPT)+"px"; var copy3 = fpClone(fpTableContainerDivElement, 2); copy3.style.width = (fpTableContainerDivElement.fpPL)+"px"; copy3.style.height = (fpTableElement.offsetHeight)+"px"; fpTableContainerDivElement.style.zIndex = 1; fpTableContainerDivElement.appendChild(copy1); fpTableContainerDivElement.copy1 = copy1; fpTableContainerDivElement.appendChild(copy2); fpTableContainerDivElement.copy2 = copy2; fpTableContainerDivElement.appendChild(copy3); fpTableContainerDivElement.copy3 = copy3; fpTableContainerDivElement.repositioning = false; fpTableContainerDivElement.oldST = -1; fpTableContainerDivElement.oldSL = -1; fpTableContainerDivElement.style.overflow = "scroll"; /* JUST SOME STYLING HERE */ copy1.style.borderRight = "1px dashed #000"; copy1.style.borderCollapse = "collapse"; copy2.style.borderBottom = "1px dashed #000"; copy2.style.borderCollapse = "collapse"; copy3.style.borderRight = "1px dashed #000"; copy3.style.borderCollapse = "collapse"; /* JUST SOME STYLING HERE */ // if (ieBug) { if (fpTableContainerDivElement.style.setExpression) { function fpIeBugFix(elementNode, containerNodeId, arrayOfExpressionsToSet) { for (var i in arrayOfExpressionsToSet) { if (arrayOfExpressionsToSet[i][2]) { elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]+"document.getElementById('"+containerNodeId+"')."+arrayOfExpressionsToSet[i][2]+"+'px'"); } else { elementNode.style.setExpression(arrayOfExpressionsToSet[i][0], arrayOfExpressionsToSet[i][1]); } } } fpIeBugFix(fpTableContainerDivElement.copy3, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginTop","-","scrollTop"]]); fpIeBugFix(fpTableContainerDivElement.copy2, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"],["marginLeft","-","scrollLeft"]]); fpIeBugFix(fpTableContainerDivElement.copy1, fpTableContainerDivElementId, [["top","","scrollTop"],["left","","scrollLeft"]]); fpIeBugFix(fpTableContainerDivElement, fpTableContainerDivElementId, [["width","fpCW()+'px'"],["height","fpCH()+'px'"]]); document.recalc(true); } else { fpElement.onmousemove = fpElement.onscroll = function() { if (!this.repositioning) { this.repositioning = true; var st = this.scrollTop; var sl = this.scrollLeft; if ((this.oldST != st) || (this.oldSL != sl)) { this.oldST = st; this.oldSL = sl; // this.copy3.previousDisplay = this.copy3.style.display; // this.copy3.style.display = "none"; this.copy3.style.marginTop = "-"+(st)+"px"; // this.copy3.style.display = this.copy3.previousDisplay; // this.copy2.previousDisplay = this.copy2.style.display; // this.copy2.style.display = "none"; this.copy2.style.marginLeft = "-"+(sl)+"px"; // this.copy2.style.display = this.copy2.previousDisplay; } fpElement.repositioning = false; } }; window.onresize = function() { fpElement.style.width = fpCW()+"px"; fpElement.style.height = fpCH()+"px"; } } } } }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

um ok ... looks a bit ... involved ... why does it need the body and html elements ??? ... also it doesn't work on his page in IE8 ...
@Wardy: Follow the link, there's a full live demo there. In terms of incorporating it into your page, looks like the key call is fpInitFreezePanes, where you pass in the ID of the table, the ID of a div containing the table, and the ID of the cell on which you want to freeze panes.
lol yeh i noticed .. sry bout that ... i edited the comment to reflect that lol ... its pretty cool when it is actually working though
Re IE8: That's too bad, I see what you mean. The script is from 2007, no great surprise it would need some updating.
shame really ... it does what i would expect +1 for helping me out though :)
1

Ok so based on the table above that i already have i had to assume the fixed column would have a fixed width but i managed to do this ...

<div style="position:relative;"> <div style="width:100%; overflow:scroll; height:400px;"> <table style="margin-left:100px;"> <tr><td style="position:absolute;"></td><td colspan='31'>Jan</td><td colspan='28'>feb</td>...</tr> <tr><td style="position:absolute;"></td><td>1</td><td>2</td><td>3</td> ...<tr/> <tr><td style="position:absolute;">Person 1</td><td></td><td></td><td>Busy</td> ...<tr/> <tr><td style="position:absolute;">Person 2</td><td></td><td>Busy</td><td>Busy</td> ...<tr/> </table> </div> </div>

this results in the marked cells taking an absolute position on the left and the table remains scrollable ... A little work is required to clean it up and make it look pretty but essentially my code when extracted out looks like this ...

<style type="text/css"> .Calendar { max-height:400px; border-collapse:collapse; table-layout:fixed; margin-left:105px; } .Calendar .Resources { width:100px; position:absolute; left:0px; background:white; } .Calendar tr { vertical-align:top; } .Calendar td { border:solid 1px black; vertical-align:top; padding:2px; border:solid 1px #EFEFEF; } .Calendar .day { background:#FFFBD6; border:solid 1px #FEEFB3; } .Calendar .dayWithEvent { background:white; border:solid 1px #FEEFB3; border-top:solid 1px blue; } </style> <div style="position:relative;"> <div style="width:100%; overflow:scroll; height:400px;"> <table class="Calendar"> <asp:Repeater ID="ui_calMonths" runat="server" onitemdatabound="ui_calMonths_ItemDataBound"> <HeaderTemplate> <tr><td class="Resources" style="background:white; border:none;">&nbsp;</td> </HeaderTemplate> <ItemTemplate> <td colspan='<%# ((Month)Container.DataItem).Days.Length %>'><%# Eval("Name") %></td> </ItemTemplate> <FooterTemplate> </tr> <tr><td class="Resources" style="background:white; border:none;">&nbsp;</td> <asp:Repeater ID="ui_calDays" runat="server"> <ItemTemplate> <td><%# ((DateTime)Container.DataItem).ToString("dd") %></td> </ItemTemplate> </asp:Repeater> </tr> </FooterTemplate> </asp:Repeater> <asp:Repeater ID="ui_grdResources" runat="server"> <HeaderTemplate><tr></HeaderTemplate> <ItemTemplate> <td class="Resources"><%# Eval("Text") %></td> <%# ResourceEvents(((RowContext)Container.DataItem)) %> </ItemTemplate> <FooterTemplate></tr></FooterTemplate> </asp:Repeater> </table> </div> </div>

basically the codebehind figures out how many cells to render in each row (the repeaters are fundamental in this working but the result is essentially a nicely formatted table which contains the month names for the given date range in the first row, the days for those months in the second and in the third a fixed column containing the names and the dynamically populated from my internal API calendar items ... very cool !!!

Improve this answer

Comments

0

get the jquery datatables fixedcolumns plugin

http://datatables.net/extras/fixedcolumns/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.