This discussion is archived
1 2 3 4 Previous Next 57 Replies Latest reply: Oct 25, 2010 12:57 PM by Sc0tt RSS

Does anyone know how to freeze column headings?

greich Newbie
Currently Being Moderated
I have been tasked to freeze the column heading of a report, sort of like you can freeze cells in excel.

The end user would like to scroll through the report data and still see the heading.

They would also like to see the row identifier field, in my case the employee name, when they scroll to the right.

Any one know how to do this? If so, I would love some examples.
  • 1. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi,

    Have a look at: Re: How to implement fixed column headers and [http://apex.oracle.com/pls/otn/f?p=267:5]

    Andy
  • 2. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    I see that your example worked for you, but I could not get it to work for me.

    My result had no scroll bar and my headings were all over the place.
  • 3. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi,

    Here's the settings that I have for my report template on my sample page:

    Before Rows:
    <table cellpadding="0" border="0" cellspacing="0" summary=""  class="t18Standard">
    <tr><td>
    <div style="border:1px solid silver; padding:0px; margin:0px; background-color:#EFEFEF;">
    <table id="reportheadings" class="t18Standard">
    Before Column Headings:
    (this is blank)
    Column Heading Template:
    <th class="t18ReportHeader" #ALIGNMENT# id="#COLUMN_HEADER_NAME#">#COLUMN_HEADER#</th>
    After Column Heading:
    </tr></table></div>
    <div id="reportdiv" style="overflow-y:scroll; border:1px solid silver; padding:0px; margin:0px;">
    <table id="reportbody" class="t18Standard">
    Before Each Row:
    <tr #HIGHLIGHT_ROW#>
    Column Template 1:
    <td #ALIGNMENT# headers="#COLUMN_HEADER#" class="t18data">#COLUMN_VALUE#</td>
    (No conditions set for this template as it is used by all rows)

    After Each Row:
    </tr>
    After Rows:
    </table>
    </div>
    <div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div><script type="text/javascript">
    function setwidths(w)
    {
     var t1 = document.getElementById("reportheadings");
     var t2 = document.getElementById("reportbody");
     var t1rows = t1.rows;
     var t2rows = t2.rows;
     var t1cells;
     var t2cells;
     var k;
     var r;
     for (r = 0; r < t1rows.length; r++)
     {
      t1cells = t1rows[r].cells;
      for (k = 0; k < t1cells.length; k++)
      {
       if (w[k] == 0)
       {
        t1cells[k].style.display = 'none';
       }
       else
       {
        t1cells[k].style.width = w[k];
       }
      }
     }
     for (r = 0; r < t2rows.length; r++)
     {
      t2cells = t2rows[r].cells;
      for (k = 0; k < t2cells.length; k++)
      {
       if (w[k] == 0)
       {
        t2cells[k].style.display = 'none';
       }
       else
       {
        t2cells[k].style.width = w[k];
       }
      }
     }
    }
    function setdivheight(h)
    {
     var d = document.getElementById("reportdiv");
     d.style.height = h;
    }
    </script>
    </td></tr><tr><td>#PAGINATION#</td></tr></table>
    On my page's region, in the Region Footer:
    <script type="text/javascript">
    setwidths(new Array(75, 200, 75, 0, 200));
    setdivheight(250);
    </script>
    Adjust the setwidths(....) entry to specify the widths of the columns in your table - in this one, there are 5 columns and column 4 is hidden (width=0). Adjust the setdivheight() value to the height you want for the div that wraps the data part of the table.

    Andy
  • 4. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    ps - for the report, make sure that it displays ALL records in the report on one page. Pagination should not be required, so you can disable this as well.

    Andy
  • 5. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    Thanks for your help. I got the report to scroll. I am having problems getting the column headers to the correct width. I was able to get the columns to be the correct widths.

    Please help.
  • 6. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    Why do I have to set width?
  • 7. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi,

    The setwidths() function will set the widths of both the data and the headings at the same time. The width of each column should be set to be as wide as is needed for both. If you set a width as, say, 100 and the data in the column is wider than that, then the data table's column width will be forced to be wider by the browser. The column heading, however, will stay at 100.

    If need be, you can use css to fix the data column width, but I would suggest just increasing the width of the column.

    Andy
  • 8. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    the column width are definitely changing, but the headers are not.

    I am confused. I have copied your code, almost verbatim. The only changes are to the theme number itself.



    :(
  • 9. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi,

    I can't see what you're doing on your page, of course, so it's difficult to see exactly what's happening!

    One thing to try...

    My report uses:

    setwidths(new Array(75, 200, 75, 0, 200));

    I don't know how many columns you have, but make sure that the new Array() contains that many. Make each parameter in the Array() function, say, 200 - this will set every column to 200 pixels. Assuming you don't have some very wide columns in your report, then everything should fit ok. Now just start reducing the 200's for each column until you get a column width that you're comfortable with.

    The only other thing to note is that, in your report definition, tick Show for all columns - the setwidths() function will hide any column that has a width of 0.

    Andy
  • 10. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    ps - I'm logging out for the day now. If you want, you can sent me screenshots to ..................... of your page and your region and template settings and I'll have another look tomorrow.

    Andy

    Edited by: ATD on Jan 12, 2009 8:18 PM
  • 11. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    It seems my text fields with a defined element width are causing me the issue. I eliminated about half of my field by setting them to length 0, and my headers would only go as wide as the column widths. Any suggestions on how I can utilize element width and still have a flexible cell width?
  • 12. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    I might be hitting the width limitation of the web page. Any thoughts?
  • 13. Re: Does anyone know how to freeze column headings?
    ATD Guru
    Currently Being Moderated
    Hi,

    One thing you didn't send in your email was a screenshot of the setwidths() function call. No matter.

    As you are using this functionality for a tabular form (you hadn't mentoned that before!!!), you need to take into account more things when determining the column widths. For standard report columns, you only have to worry about the padding style within each cell. For tabular forms, you also have to allow for the margin, border and padding on the input fields.

    Additioinally, most of your headings are wider than the input fields due to the amount of text in the heading.

    I think, in your case, you should use the headings as the guide to the widths. To try and keep the data entry parts consistent (columns Start Time onwards), I would suggest starting with a width setting of 75 for these fields. Perhaps 50 for Shift and perhaps 150 for both Employee Name and Job Title.

    On a web page, there is no maximum width limit (or, if there is, it's so far to the right you'd never find enough data to use it). Obviously, if the data does extend too far the right for a typical screen width, the user will see horizontal scrollbars. I have recently seen a thread that suggests that it is possible to scroll reports horizontally and vertically within a DIV and keep the left/top static. However, for now, I would suggest just getting the headings correct.

    It is difficult to see from your page if the headings widths are actually being set - can you set, say, the Employee Name column to be 500 just to prove that the headings are being set.

    Andy
  • 14. Re: Does anyone know how to freeze column headings?
    greich Newbie
    Currently Being Moderated
    I have been experimenting with really large widths.

    This is my recent attempt. I really think I am hitting a width maximum.

    <script>
    setwidths(new Array(0,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,150,0,0,0));
    setdivheight(285);
    </script>
1 2 3 4 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points