This discussion is archived
1 8 9 10 11 12 Previous Next 168 Replies Latest reply: Feb 5, 2010 5:08 AM by 647686 Go to original post RSS
  • 135. Re: How to implement fixed column headers
    540155 Newbie
    Currently Being Moderated
    Clarification: you need to escape single quotes if you are using apex_iem to enter data if you are just dispalying data in the active widgets grid you should be fine.
  • 136. Re: How to implement fixed column headers
    540155 Newbie
    Currently Being Moderated
    see post
  • 137. Re: How to implement fixed column headers
    540155 Newbie
    Currently Being Moderated
    see post
  • 138. Re: How to implement fixed column headers
    sa Newbie
    Currently Being Moderated
    Dear Tim,

    Your solution worked!! Hurray!!

    After much head breaking by me and my husband we still couldn't get it working and your solution was my saviour.

    If you are ever in this part of my world (UK) give us a holler and we will buy you a drink, or two ;).

    Best regards,
    Sophia

    Edited by: sa on Dec 10, 2008 2:39 PM

    Edited by: sa on Dec 10, 2008 2:39 PM
  • 139. Re: How to implement fixed column headers
    431127 Newbie
    Currently Being Moderated
    Hello Erich and others,

    I tried viewing the example at [http://www.litotes.demon.co.uk/example_scripts/tableScroll.html|http://www.litotes.demon.co.uk/example_scripts/tableScroll.html] and it is coming up Page Not Found. Does anyone have an updated link? (Oh I hope so!)

    Erich,
    I tried getting your version to work, also, but I'm having problems with the Row Template. Has anyone found another way to do this? I noticed that it doesn't look like the newer versions of APEX even have a Row template available, unless you create one from scratch. I was able to get Linda's version working, but it would be nice to have it available in FF as well.

    Thanks,
    Janel
  • 140. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi All,

    Would need your help here, we have similar requirement.

    Do we have working solution for all the browsers , without column headers getting distorted ?

    Tried to implement this, but column headers get distorted and it doesn't look too good.

    Please suggest.

    Regards
    Ravijeet
  • 141. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi All

    Has any one got solution for this ?

    Regards,
    Ravijeet
  • 142. Re: How to implement fixed column headers
    ATD Guru
    Currently Being Moderated
    Hi,

    OK - this is not perfect by any means but it does show what can be done with not much more than a report template.

    See [http://htmldb.oracle.com/pls/otn/f?p=267:5]

    I have created a new report template based on my existing Standard template in my Theme 18 application (I'm sure the same principles would apply to all themes). In this template, I have made the following changes:

    Before Rows setting:

    Old:
    <table cellpadding="0" border="0" cellspacing="0" summary="">#TOP_PAGINATION#
    <tr><td><table cellpadding="0" border="0" cellspacing="0" summary="" class="t18Standard">
    New:
    <table cellpadding="0" border="0" cellspacing="0" summary=""  class="t18Standard">#TOP_PAGINATION#
    <tr><td><div style="border:1px solid silver; padding:0px; margin:0px; background-color:#EFEFEF;">
    <table id="reportheadings" class="t18Standard">
    After Column Heading setting:

    Old:
    (this was empty)
    New:
    </tr></table></div>
    <div id="reportdiv" style="overflow-y:scroll; border:1px solid silver; padding:0px; margin:0px;">
    <table id="reportbody" class="t18Standard">
    After Rows setting:

    Old:
    </table><div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    New:
    </table>
    </div>
    <div class="t18CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    <script type="text/javascript">
    function setwidths(w)
    {
     var t1 = document.getElementById("reportheadings").rows[0].cells;
     var t2 = document.getElementById("reportbody").rows[0].cells;
     var k;
     for (k = 0; k < t2.length; k++)
     {
      t1[k].style.width = w[k];
      t2[k].style.width = w[k];
     }
    }
    function setdivheight(h)
    {
     var d = document.getElementById("reportdiv");
     d.style.height = h;
    }
    </script>
    Finally, on the report's Region Footer, I have added:
    <script type="text/javascript">
    setwidths(new Array(75,200,75,75,200));
    setdivheight(300);
    </script>
    And I have switched off the Partial Page Refresh for the report (this reset columns widths for the headings and I couldn't get them back again!)

    Some of these changes are for styling purposes so may not apply for some themes.

    The old report template simply create a single table with TH cells for the headers followed immediately by TD cells for the data. I have changed this to close the table after the headings have been created and start a new table, wrapped in a DIV tag with a vertical scroll, for the data. I have also added a DIV tag around the headings table just to make the two tables appear consistent.

    As it is not easy to specify the width of a column and copying the widths from the data table to the headings table wouldn't work in IE and FireFox, I have added a setwidths javascript function which needs to be called in the Region Footer to set the widths. The width values are passed as an array so that the javascript function can loop through the columns and the widths easily.

    Finally, to make the report a bit customisable, I have added another function to specify the height of the DIV tag.

    Andy
  • 143. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi Andy


    I applied the solution by you in standard template for theme 20 and it worked like a charm. We got the tabular form as expected and columns headers are constant & are in correct shape.

    This solves the requirements as per the thread to have tabular form with constant headers, but In my case as we discussed on other threads, I have further complexities , have updated this thread:
    Re: OnClick Event on Standard Report/Tabular Form Row

    since we would have different region / report ids here, which we have used to hide the columns as discussed before in the thread mentioned and secondly in passing the row values when key up or down is pressed .

    Please suggest.

    Many thanks as usual again.

    Regards
    Ravijeet
  • 144. Re: How to implement fixed column headers
    ATD Guru
    Currently Being Moderated
    Hi,

    I've adjusted the After Rows setting to allow you to hide a column:
    </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>
    I am aware that pagination will not work with the above and nor will partial page refresh - in both cases that is because the setwidths() function is not being called as it is not included in the part of the page that is being rewritten. There's probably a way around this somewhere. However, given that this is for a scrollable report, it would seem strange to also have pagination???

    Andy
  • 145. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi Andy

    Many Thanks as usual for your time,With the New After Rows setting , it worked proper and I could hide the columns by passing width as '0'.it works as expected as in page 2 of below application.

    But in My case, as per the thread we worked on , there are further requirements/complexities:
    Re: OnClick Event on Standard Report/Tabular Form Row

    Application Reference:
    URL: http://apex.oracle.com/pls/otn/f?p=12190:3
    workspace: VCS
    Userid: **************
    password: **********

    Here On Page 3 on the application as per our previous discussion,it works all fine but fixed column header. I have put all the codes and it meets all the requirements including "on click" on report row and "cursor" movement to change the values in display region items at last & pending was constant column header.

    As you said if we get scrollable region it doesn't make sense to have pagination.In earlier case (page 3) , unchecking the reset pagination for unconditional branching & selecting pagination type as "search engine 1,2,3.. set based pagination", it worked proper.

    I tried to find solution on my local application but could not, so tried to replicate all on page 2 on OTN (Got stuck due to standrad focus error,would debug tomorrow), if you can suggest something here.

    I developed the page 2 on the same application with current solution as per this thread, was able to hide columns and got constant headers.But how we are going to achieve the onclick and cursor movement functionality on the row by passing the row values to our java script function "passvalues" ?

    Thanks as usual!

    Please suggest.

    Regards,
    Ravijeet

    Userid and passwords related to otn application changed...

    Edited by: Ravijeet on Jan 26, 2009 10:11 AM
  • 146. Re: How to implement fixed column headers
    ATD Guru
    Currently Being Moderated
    Hi Ravijeet,

    OK - I've made a few changes to your page 2 version. The report template itself was ok - but for completeness for other users, this as the following settings:

    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="t20Standard t20Report">
    Before Each Row:
    <tr onclick="javascript:passValues(this);" #HIGHLIGHT_ROW#>
    After Rows:
    </table>
    </div>
    <div class="t20CVS">#EXTERNAL_LINK##CSV_LINK#</div></td></tr>#PAGINATION#</table>
    <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><script language=JavaScript type=text/javascript>
    <!--
    init_htmlPPRReport('#REGION_ID#');
    
    //-->
    </script>
    </htmldb:#REGION_ID#>
    </div>
    Now, on page 2 itself, I have changed the page's HTML Header to:
    <script language="JavaScript" type="text/javascript">
    <!--
    
     htmldb_delete_message='"DELETE_CONFIRM_MSG"';
    
    //-->
    </script>
    <script type="text/javascript">
    function passValuesOld(ename, dname)
    {
     $x('P2_EMPNAME').value = ename;
     $x('P2_DEPARTMENTNAME').value = dname;
    }
    function passValues(r)
    {
     var d = r.getElementsByTagName("TD");
     var k;
     if (d)
     {
      for (k = 0; k < d.length; k++)
      {
        if (d[k].headers == 'Empname')
       {
        var s = d[k].getElementsByTagName('INPUT')[0];
        $x('P2_EMPNAME').value = s.value;
       }
       if (d[k].headers == 'Departmentname')
       {
        var s = d[k].getElementsByTagName('INPUT')[0];
        $x('P2_DEPARTMENTNAME').value = s.value;
       }
       if (d[k].headers == 'Salary')
       {
        var s = d[k].getElementsByTagName('INPUT');
        if (s)
        {
         $x('P2_SAL').value = s[0].id;
        }
       }
      }
     }
    }
    </script>
    <script language="JavaScript" type="text/javascript">
    //var z = document.getElementById("report_#REGION_ID#");
    //var s = z.getElementsByTagName("TABLE")[0];
    function moveUpDown(pThis, pEvent)
    {
      var keynum;
      var vCurrent;
      vCurrent = pThis.name;
      var vFields = document.getElementsByName(vCurrent);
      var r = pThis.parentNode;
      while (r.tagName != "TABLE")
      {
       r = r.parentNode;
      }
      var l = vFields.length;
      if(window.event) // IE
      {
        keynum = pEvent.keyCode;
      }
      else
      {
        if(pEvent.which) // Netscape/Firefox/Opera
        {
          keynum = pEvent.which;
        }
      }
      if (keynum == 40 || keynum == 38 || keynum == 13) // Key-Up or Key-Down
      {
        for (i=0; i < vFields.length; i++)
        {
          if (vFields.id == pThis.id) // This is current row
    {
    if ((keynum == 40 || keynum == 13) && i != l-1) // Move down
    {
    vFields[i+1].focus();
    passValues(r.rows[i+2]);
    }
    if(keynum == 38 && i !=0)
    {
    vFields[i-1].focus();
    passValues(r.rows[i]);
    }
    }
    }
    }
    }
    </script>
    The report's Region Footer is now:
    <script type="text/javascript">
    setwidths(new Array(10,50,0,110,150,0,0,0));
    setdivheight(100);
    </script>
    <script type="text/javascript">
    var t = document.getElementById("report_#REGION_ID#");
    var r = t.getElementsByTagName("TABLE")[0];
    </script>
    and the Region Footer for the region that contains your display items:
    <script type="text/javascript">
    var s;
    if ($v('P2_REQUEST') == 'SUBMIT')
    {
    s = $v('P2_SAL');
    }
    else
    {passValues(r.rows[1]);
    s = 'f03_0001';
    }
    var sal = document.getElementById(s);
    if (sal)
    {
    sal.focus();
    }
    </script>
    In the HTML Header javascript, the code wasn't triggering the passValues() function as the r variable wasn't properly defined - I've added in a few lines that starts from the row clicked and finds the parent table and the rows are based on this table.  The r variable could be made available from the setwidths function if the var declarations are moved outside of the function block.
    
    The cursor up/down function wasn't properly formatted, so the loop wasn't running correctly.  As you can see, I've reformatted the code - this helped identify that there was a missing }.  I've assigned the column containing the current item into a variable vFields collection and used that instead of repeatedly finding the collection - this is a bit more efficient.
    
    And, finally, I've increased the width of the Salary field from 100 to 110 to allow for the width of the input field plus padding - this is just to ensure that the columns line up correctly.
    
    As far as I can tell, page 2 now functions as you need.
    
    Andy                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  • 147. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi Andy

    Many Thanks for your time as usual, it works for most of the part exactly as we required.
    Noticed that, I was not getting the same behavior on my local application unless I changed the fields type as "Text Field" from "standard Report column" for departmentname and empname in the report,which we are hiding,
    as you have done on page 2, it works as required.

    The two things on page 2 which are differing from page 3( which meets all requirements other than fixed column header)
    is:
    1) Whenever Page is launched or refreshed i.e. say we come to page 2 from page 1,
    the default values in the display region items should be as per row 1. So other than when request is "SUBMIT"
    which we have set in the process for submit button => P2_REQUEST field,in all cases default value in the display items in last region should be as per first row.(i.e. empname as "Ravijeet" etc)
    Looks like the report footer scripts in the region where we have display items is not kicking in properly:

    <script type="text/javascript">
    var s;
    if ($v('P2_REQUEST') == 'SUBMIT')
    {
    s = $v('P2_SAL');
    }
    else
    {passValues(r.rows[1]);
    s = 'f03_0001';
    }
    var sal = document.getElementById(s);
    if (sal)
    {
    sal.focus();
    }
    </script>

    2) Why we are getting some cursor focus error whenever request/Process is not "SUBMIT" say we come to page 2 from page 1, we get the error:
    Error: can't move focus to the control because it is invisible, not enabled, or of a type that doesnot
    accept the focus

    Thanks again for your valuable time & resolving most of the issues.

    Regards
    Ravijeet
  • 148. Re: How to implement fixed column headers
    ATD Guru
    Currently Being Moderated
    Hi Ravijeet,

    There two issues with your code:

    1 - You have used $v('P2_SAL'). $v(..) returns the VALUE of the field not the field itself - you need to use $x('P2_SAL') or document.getElementById('P2_SAL') to return a reference to the field.

    2 - P2_SAL is a hidden field - the browser can not set the focus to a hidden field. Why do you need to set the focus to the P2_SAL field anyway?

    Andy
  • 149. Re: How to implement fixed column headers
    614588 Newbie
    Currently Being Moderated
    Hi Andy

    Many Thanks for your valuable inputs, it resolved the point 2),we don't get any cursor focus error now,
    as you said i was passing wrong id as 'f03_0001' rather than 'f04_0001' for the the focus to be in salary field on first row.Changed that on page 2, and it works good.

    Point 1) is still unresolved
    => Actually in P2_SAL field we are holding the ID as assigned in the page header
    function "passvalues" and we are using it in display region's footer to get its value ,which would be id.
    And again this is the case in which we submit the page using "Submit" button,where it works fine.

    Problem is How to pass the first row as parameter when the page is refreshed ?
    (say via emp id LOV or page is first launched)
    The requirement is that whenever we come to this for first time or page refreshed (other than via submit button)
    the focus should on first row(which happens) & the Items in display region should contain value as per corresponding
    value in first row (which doesnot happen on page 2, happens on page 3, value in display region items for first row,EMP Id,1,should be "Ravijeet" & "Corporate Application")

    Currently we are tring to do that in display region's footer by calling "Passvalues" as
    passValues(r.rows[1]) , but this is not working on page 2, which works on page 3.

    Please suggest here.

    Many Thanks again as usual for your help.

    Regards,
    Ravijeet