RE: Fix the Header of Datatable

[Nikita Shah]

Hello all

I have found a post on the same issue, where this problem is solved..
http://www.mail-archive.com/users%40myfaces.apache.org/msg16386.html

But I am not able to yet solve this issue ...
My whole jsp code and css is as below, can anyone plzz help on this issue ..?

<t:dataTable id="dTable"
                        styleClass="detailsTable"
                        rowClasses="detailsTable_Row1,detailsTable_Row2"
                        var="nodes"
                        width="100%"
                        columnClasses="detailsTable_newNodeColumn,detailsTable_newGroupColumn"
                        value="#{detailsData.nodes}">
                       
                         
                        <t:column>
                                <h:outputText value="#{nodes.name}" />
                      &nbs p; </t:column>
                        <t:column >
                            <f:verbatim><DIV  class="dv_scrollTable" style="height:4em;"></f:verbatim>
                            <h:panelGroup >
                                <h:dataTable id="taTable" border="1"
                                            styleClass="sortable,dv_scrollTable"
                                            headerClass="groupTable_Header"
                                            rowClasses="groupTable_Row"
                                            columnClasses="groupTable_Column"
                                            var="groups"
                                            value="#{nodes.groups}"
                                            cellpadding="0"
                                            cellspacing="0">           
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Group"  />
                                    </f:facet>
                                    <h:outputText value="#{groups.name} " />
              &n bsp;                     <h:outputText value="(#{groups.unit})" rendered="#{groups.unit != null}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Target" />
                                    </f:facet>
                                    <h:outputText value="#{groups.target}" />
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Actual" />
                                    </f:facet>
                                    <h:outputText value="#{groups.actual}" />
                                </h:column>
          &nb sp;                     </h:dataTable>
                            </h:panelGroup>
                            <f:verbatim></DIV></f:verbatim>
                        </t:column>
                        </t:dataTable>


and my css is --

.dv_scrollTable
{
width: 250px;
height: 50px;
overflow: auto;
}

/* -----------------------------------------------
Sort Table
----------------------------------------------- */


.sort_table tr td {
    width: 100%;
    border-color:#B7BDC2 ;
    border-style: solid;
    border-width: 0ex;   
    margin            : 0em;
    padding-top        : 0em;

}
.sort_table_header {
    color: #F0F3F4;
    text-align          : center;
    font-family         : arial;
    font-size           : 1.4ex;
    background-color: #8E969D;
    text-align: center;
    height: 1em;

    border-top-color : #B7BDC2;
    border-left-color: #B7BDC2;
    border-bottom-color : gray;
    border-right-color: gray;
   
    border-bottom-style: solid;
    border-right-style: solid;
    border-top-style: solid;
    border-left-style: solid;
}

.sort_table_row {
    color                : black;
    text-align          : center;
    font-family         : arial;
    font-size           : 1.4ex;
    background-color    : #E6EAEC;
    border-color    : #B7BDC2;
    border-width: 0ex;
   
}
.sort_table_column {
    color                : black;
    text-align          : center;
    font-family         : arial;
    font-size           : 2ex;
    background-color    : #E6EAEC;
    text-align            : center;
    height                : 1em;
    border-color    : #B7BDC2;
    border-width: 0ex;   
}

The class sortable is used for column sorting in table . ..?
Where do i apply the overflo auto in such case ... ?

Any type of help will be appreciated..

TIA
~Nikita


Michael Heinen <[EMAIL PROTECTED]> wrote:

You can easily achieve this with css.

 

For IE check these links:

http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

 

For mozilla you can define an overflow:auto style and a fixed height for the tbody element.

 

 

 

---

From: Nikita Shah [mailto:[EMAIL PROTECTED]
Sent: Freitag, 17. März 2006 13:06
To: users@myfaces.apache.org
Subject: Fix the Header of Datatable

 

Hi all

As mentioned in the earlier post of this subject, I want to make the header of the DataTable fixed.

Below is the jsp code :

<h:dataTable id="taTable" border="1"
                                            styleClass="sortable"
                                            headerClass="groupTable_Header"
                                            rowClasses="groupTable_Row"
     &nbs p;                                      columnClasses="groupTable_Column"
                                            var="groups"
                                            value="#{nodes.groups}"
                                            cellpadding="0"
               ;                 ;              cellspacing="0">           
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Group"  />
                                    </f:facet>
                                    <h:outputText value="#{groups.name} " />
                                   
                                </h:column>
                                <h:column>
                                    <f:facet name="header"&g t;
                                        <h:outputText value="Target" />
                                    </f:facet>
                                    <h:outputText value="#{groups.target}" />
                                </h:column>
                                 <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Actual" />
                                    </f:facet>
                                    <h:outputText value="#{groups.actual}" />
  &nbs p;                             </h:column>
                                </h:dataTable>
                            </h:panelGroup>
                            <f:verbatim></DIV></f:verbatim>
                        </t:column>                         </t:dataTable>   


This table i have placed inside the DIV element with auto overflow.

How do i manipulate so as to prevent the scrolling of headers..?
Are there any possible solutions to this .. ?

Any help would be appreciated.

TIA
~Nikita Shah

---

Jiyo cricket on Yahoo! India cricket
Yahoo! Messenger Mobile Stay in touch with your buddies all the time.

---

Jiyo cricket on Yahoo! India cricket
Yahoo! Messenger Mobile Stay in touch with your buddies all the time.