9 Replies Latest reply on Oct 1, 2010 7:42 AM by Kriya Studio

    rich:column headerClass

    snax92 Newbie

      Hi,

       

      in witch headerClass can i put a width value in the rich:column.

       

      i have to use already defined width's

      CSS:

      .colStyleSmall {
          width: 100px;
      }
      .colStyleSmallMedium {
          width: 140px;
      }
      .colStyleMed {
          width: 200px;
      }
      

       

      I tryed it with columnClasses but when i let run this page it doesn't have the correct width, should be longer.

      PICTURE:

      width_V2.PNG

       

      CODE:

      <rich:extendedDataTable id="data_table_log" columnClasses="colStyleSmallMedium,colStyleSmall,colStyleSmallMedium"  value="#{log_Backing.allLogEntries}" var="entry" width="100%" height="320px" sortMode="single" selectionMode="none" rows="10" rowKeyVar="rkvar" reRender="scroll_log"  >
                          <!-- Date -->
                          <rich:column id="col_date" headerClass="extdt-cell-div" label="Date" sortable="true" sortBy="#{entry.logDate}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
                              <f:facet name="header">
                                  <h:outputText value="#{lbls.label_logDate}" id="header_logDate" />
                              </f:facet>
                              <h:outputText value="#{entry.logDate}" id="log_date" >
                                  <f:convertDateTime pattern="#{lbls.date_pattern}" timeZone="#{log_Backing.timeZone}" />
                              </h:outputText>
                          </rich:column>
                          <!-- Severity -->
                          <rich:column id="col_severity"  headerClass="extdt-cell-div"   label="Severity" filterExpression="#{fn:containsIgnoreCase(entry.severity, log_Backing.filterSeverity)}" breakfor="true">
                              <f:facet name="header">
                                  <h:outputText value="#{lbls.label_logSeverity}" id="header_logSeverity" />
                              </f:facet>
                              <f:facet name="filter"> 
                                      <h:selectOneMenu value="#{log_Backing.filterSeverity}" id="selectOne_severity" style="width:70">          
                                      <f:selectItems value="#{log_Backing.filterSeveritys}" />
                                      <a4j:support limitToList="true" event="onchange" reRender="data_table_log,scroll_log"></a4j:support>
                                  </h:selectOneMenu>
                              </f:facet>
                              <h:outputText value="#{entry.severity}" id="log_severity" />
                          </rich:column>
                          <!-- Source -->
                          <rich:column id="col_source" headerClass="extdt-cell-div"  label="Source" filterBy="#{entry.source}" filterEvent="onblur">
                              <f:facet name="header">
                                  <h:outputText value="#{lbls.label_logSource}" id="header_logSource" />
                              </f:facet>
                              <h:outputText value="#{entry.source}" id="log_source" />
                          </rich:column>
                          <!-- Messages -->
                          <rich:column id="col_messages" headerClass="extdt-cell-div"  label="Messages" sortable="false">
                              <f:facet name="header">
                                  <h:outputText value="#{lbls.label_logMessage}" id="header_logMessage" />
                              </f:facet>
                              <h:outputText value="#{entry.message}" id="log_message" />
                          </rich:column>
                          <f:facet name="footer">
                          <rich:datascroller align="center" for="data_table_log" id="scroll_log" />
                      </f:facet>
                      </rich:extendedDataTable>
      

       

       

      thx for your help. =D

      greez gowtham

        • 1. Re: rich:column headerClass
          Kriya Studio Newbie

          i have done it with css, and redefine the skin (overriding existing one)... but the problem is that in chrome doesn't work, I'm writing a jQuery script só I can manipulate the especific colum (example Date, ID, etc)...

           

          overriding existing cod:

          .rich-subtable-header {}

          .rich-subtable-headercell {}

           

          you can do something like:

          .rich-subtable-header extdt-cell-div {}

           

          ** Note: richfaces does a poor HTML/CSS standarization... some renderings are way... and mean way wrong... but you can always use a work arround liek jQuery to target a specific column (not the right way to do it, as you can spend more programing in jQuery that you real should need)

          • 2. Re: rich:column headerClass
            snax92 Newbie

            i had a look in firefox with firebug but i don't have .rich-subtable-header or .rich-subtable-headercell ...

            can you give me a example ?

             

            i have in each column headerClass="extdt-cell-div" there i wrap the text when it's longer than the column .. when i set there "width:200px" only the cells with the date change the length. but the column-header doesn't change ...

             

            at the moment i use firefox .. but this datatable will run later on IE

            • 3. Re: rich:column headerClass
              Kriya Studio Newbie

              well you can write something like this:

               

              CSS (example)

               

              // TD amd TR for the content of the rows and cells, TH for the header in the grid

               

              td.gridID, tr.gridID, th.gridID {width:200px;text-align:center;}

               

              td.gridID, tr.gridID, th.gridID input[type="text"] {width:150px;} // if you have an input and you want to specify the with, you can put some extra stuff

               

              the part for the Data Grid in your page

               

               

               

              <

              <

               

              <rich:column styleClass=gridID" headerClass="gridID" ...

               

               

               

               

               

               

               

               

               

               

              if you have a print screen with the code generated (html) i can better show you how to do it...

               

               

               

               

              • 4. Re: rich:column headerClass
                snax92 Newbie

                HTML_date.png

                here u can see the HTML code for the header / my first column "date"

                thx for your help

                • 5. Re: rich:column headerClass
                  Kriya Studio Newbie

                  try this, it worked for me:

                   


                  <rich:column id="col_date" headerClass="extdt-cell-div colStyleSmall"

                   

                   

                   

                  <rich:column id="col_severity"  headerClass="extdt-cell-div colStyleSmallMedium"

                  • 6. Re: rich:column headerClass
                    snax92 Newbie

                    thx for help =D it work so lala ..

                     

                    the data lenth is ok. but the header length is not correct .. o.O

                     

                    PICTURE:

                    webui_table.PNG

                     

                    CODE:

                     

                    <rich:extendedDataTable id="data_table_log" headerClass="col-header"  columnClasses="colStyleSmallMedium,colStyleSmallMedium,colStyleSmall,colStyleSmallMedium"  value="#{log_Backing.allLogEntries}" var="entry" width="100%" height="320px" sortMode="single" selectionMode="none" rows="10" rowKeyVar="rkvar" reRender="scroll_log"  >
                                        <!-- Date -->
                                        <rich:column id="col_date" headerClass="extdt-cell-div colStyleSmallMedium" label="Date" sortable="true" sortBy="#{entry.logDate}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
                                            <f:facet name="header">
                                                <h:outputText value="#{lbls.label_logDate}" id="header_logDate" />
                                            </f:facet>
                                            <h:outputText value="#{entry.logDate}" id="log_date" >
                                                <f:convertDateTime pattern="#{lbls.date_pattern}" timeZone="#{log_Backing.timeZone}" />
                                            </h:outputText>
                                        </rich:column>
                                        <!-- Severity -->
                                        <rich:column id="col_severity"  headerClass="extdt-cell-div colStyleSmallMedium"   label="Severity" filterExpression="#{fn:containsIgnoreCase(entry.severity, log_Backing.filterSeverity)}" breakfor="true">
                                            <f:facet name="header">
                                                <h:outputText value="#{lbls.label_logSeverity}" id="header_logSeverity" />
                                            </f:facet>
                                            <f:facet name="filter"> 
                                                    <h:selectOneMenu value="#{log_Backing.filterSeverity}" id="selectOne_severity" style="width:70">          
                                                    <f:selectItems value="#{log_Backing.filterSeveritys}" />
                                                    <a4j:support limitToList="true" event="onchange" reRender="data_table_log,scroll_log"></a4j:support>
                                                </h:selectOneMenu>
                                            </f:facet>
                                            <h:outputText value="#{entry.severity}" id="log_severity" />
                                        </rich:column>
                                        <!-- Source -->
                                        <rich:column id="col_source" headerClass="extdt-cell-div colStyleSmall"  label="Source" filterBy="#{entry.source}" filterEvent="onblur">
                                            <f:facet name="header">
                                                <h:outputText value="#{lbls.label_logSource}" id="header_logSource" />
                                            </f:facet>
                                            <h:outputText value="#{entry.source}" id="log_source" />
                                        </rich:column>
                                        <!-- Messages -->
                                        <rich:column id="col_messages" headerClass="extdt-cell-div colStyleSmallMedium"  label="Messages" sortable="false">
                                            <f:facet name="header">
                                                <h:outputText value="#{lbls.label_logMessage}" id="header_logMessage" />
                                            </f:facet>
                                            <h:outputText value="#{entry.message}" id="log_message" />
                                        </rich:column>
                                        <f:facet name="footer">
                                        <rich:datascroller align="center" for="data_table_log" id="scroll_log" />
                                    </f:facet>
                                    </rich:extendedDataTable>      
                    
                    • 7. Re: rich:column headerClass
                      Kriya Studio Newbie

                      I have seen on your other image that you have this render:

                       

                      <th class="extdt-menucel extdt-subheadercell rich-extdt-subheadercell col-header extdt-cell-div"

                       

                      you can find if any of those styles have is overriding the width, and change it.

                      • 8. Re: rich:column headerClass
                        snax92 Newbie

                        hmm i don't have any width in those styles. can u give me an example ?

                         

                        her is the css for this column....

                        PICTURE:

                        css.png

                         

                        i saw there exist a

                        <colgroup id="form_main:form:data_table_log:colgroup:header">

                        <col width="94">

                        <col width="94">

                        <col width="94">

                        <col width="94">

                        <col></colgroup>

                         

                        when i change the width her the column get longer but only the header .. ..

                         

                        sry for those question but work first time with richfaces ...

                        thx for help

                        • 9. Re: rich:column headerClass
                          Kriya Studio Newbie

                          this should work...

                           

                          th.gridID .colStyleSmall {}
                          th.gridMessage .colStyleSmallMedium {}

                          th.gridDate .colStyleMed {}

                          //*note no need to put width inside, cause its inheriting from the .colStyleSmall etc. that has already width...
                          // or you can put width:auto or width:inherit if you would like


                          for the ID of the greed or a small width
                          <rich:column id="col_ID" headerClass="extdt-cell-div colStyleSmallMedium gridID" styleClass=gridID"

                          <rich:column id="col_date" headerClass="extdt-cell-div colStyleSmallMedium gridDate" styleClass="gridDate"