Question

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 🙂

Answer 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 !!!