Richfaces: extendDataTable Text spliten

[myD00M]

Hallo zusammen,

Momentan arbeite ich mit Richfaces. Nun habe ich ein kleines Problem. Ich lass verschiedene Daten in einem extendedDataTable anzeigen, das ganze ist in einem Panel. Dazu kann ich es pagen nach 10 Reihen.

Das Problem das ich nun habe ist bei meiner Implementierung jetzt z.B. Messages. Den Text den ich habe viel zu lang ist und der Text wird nicht gesplitet wie beim normalen DataTable, es wird alles auf einer Linie angezeigt bzw. bis zur grösse vom Panel der rest verschwindet.. nun möchte ich euch frage ob ihr eine möglichkeit seht / kennt wie ich den text so spliten kann, so das er nicht über die grösse vom Panel herausschiesst . ?

Danke für eure Hilfe.

Greez myD00M


CODE:

    <rich:panel bodyClass="highlight-panel-body" id="header_rich_panel">
        <f:facet name="header">#{lbls.subheading_log}: #{log_Backing.logRefreshDate}</f:facet>
            <rich:panel id="rich_panel" columnClasses="colStyleSmallMedium,colStyleSmall,colStyleSmallMedium">
            <a4j:region renderRegionOnly="true">
            <h:form id="form">
            
                    <rich:extendedDataTable id="data_table_log" value="#{log_Backing.allLogEntries}" var="entry" width="100%" height="320px" sortMode="single" selectionMode="none" rows="10" rowKeyVar="rkvar" reRender="scroll_log" style="white-space: pre;">
                    <!-- Date -->
                    <rich:column id="col_date" width="150px" headerClass="col-header" 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" width="100" headerClass="col-header" label="Severity" filterExpression="#{fn:containsIgnoreCase(entry.severity, log_Backing.filterSeverity)}">
                        <f:facet name="header">
                            <h:selectOneMenu value="#{log_Backing.filterSeverity}" id="selectOne_severity" style="width:70">          
                                <h:outputText value="#{lbls.label_logSeverity}" id="header_logSeverity" />               
                                <br />
                                <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" width="150" headerClass="col-header"  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" width="800" headerClass="col-header" 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>                
                </h:form>
             </a4j:region>
             </rich:panel>
    </rich:panel>

 

[Sentoo]

Hallo Rookie,

hast Du schon versucht die width von dem column zu reduzieren? Sprich

  <!-- Messages -->
  <rich:column id="col_messages" width="200"  ... >
    ...

 

[myD00M]

Hi,

ja hab ich. Und es ändert sich nichts. Sobald der Text länger ist als die vorgegebene Spaltenlänge verschwidet es ....

sieht es im Anhang (png-bild)

 

[Sentoo]

Dann versuch es über CSS, auf der Demo Seite von Exadel funktioniert es damit
http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=dataModel&cid=136857

Da siehst Du, dass die erste Spalte einen Zeilenumbruch hat. Allerdings haben die für die Demo die Spaltenbreite über CSS festgelegt

                <style type="text/css">
                    .rich-message-label {
                        color:red;
                    }
                    .col1 {
                        width:240px;
                    }
                    .col2 {
                        width:80px;
                    }
                    .col4 {
                        width:80px;
                    }
                </style>

 

[myD00M]

Diese Variante habe ich bereits ausprobiert. Funktioniert nicht wie gewünscht

vielleicht ist diese variante nur für <rich:dataTable> gedacht ? ... trotzdem danke für deine Hilfe =D

 

[Sentoo]

Stimmt, ich hatte übersehen, dass die Demo da für rich:dataTable ist.

Wenn ich mir den HTML-Quellcode von dem extendedDataTable ansehe:

<td id="form:table:Juneau:col_2" class="extdt-cell rich-extdt-cell ">
   <div class="extdt-cell-div">
      <span id="form:table:Juneau:cap_state">Alaska</span>
   </div>
</td>

findest Du wahrscheinlich alles was Du brauchst.

Die CSS class extdt-cell-div bestimmt genau das, was Dich stört:

.extdt-cell-div {
   -moz-box-sizing:border-box;
   cursor:default;
   font-weight:normal;
   overflow:hidden;
   white-space:nowrap;
   width:100%;
}

nämlich overflow: hidden; und width: 100%;

Was müsstest Du tun, um das zu ändern? Eben jene CSS class überlagern
Dazu müsstest Du eine eigene CSS Datei schreiben, in der Seite einbinden und da eine eigene class extdt-cell-div anlegen, die die unerwünschten Attribute überschreibt.

Siehe auch hier: http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ArchitectureOverview.html#customstyles

Es kann auch sein, dass Du die Class .rich-extdt-cell überschreiben musst. In der Doku von der extendedDataTable gibt es ganz unten eine Liste aller CSS class.

Hier ganz unten http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_extendedDataTable.html

 

[myD00M]

DANKE !! Super hat mir echt weitergeholfen. =D

Hätte da noch eine andere kleine Frage. Im Header gibt es doch bei jede Splate so ein Pfeil wo man anklicken kann und dann erscheint ein DropDown mit Sort DEC/ASC , Column etc. wie kann ich den deativieren ****

Danke nochmals =)

 

[Sentoo]

Der Doku folgend:
http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf?tab=info&cid=159933

favorisiere ich

<rich:extendedDataTable ... enableContextMenu="false" ... >

Aber ohne Gewähr, habe gerade kein Projekt offen, zum verifizieren.