2 Replies Latest reply on Jan 30, 2012 5:36 PM by mohlendo

Frustrated with rich:extendedDataTable

mohlendo Jan 30, 2012 5:15 AM

First off, sorry in advance if this is a stupid question. This is my first web app, so it's been a learning process.

I'm currently working on a project with RichFaces 4.1.0 final.

I had everything working great with a rich:dataTable. It was fairly intuitive and painless. Here's the xhtml and the result:

{code}
        <h:form id="tableForm">
            <rich:dataTable var="r" id="sensorTable"
                value="#{userSession.subjectDbAdapter.measurements}"
                rowClasses="odd-row, even-row" style="overflow:auto; width: 100%;">
                <f:facet name="noData">
                    No matches found.
                </f:facet>
                <rich:column>
                    <f:facet name="header">
                        <a4j:commandLink render="sensorTable"
                            action="#{userSession.subjectDbAdapter.sortByReadingTime}">
                            <h:panelGrid style="width:100%; height:100%" columns="2">
                                <h:outputText value="Sort by Time of Reading" />
                                <h:graphicImage alt="Time sort icon"
                                    url="/images/#{userSession.subjectDbAdapter.readingTimeSort}.png"
                                    style="vertical-align: center;" />
                            </h:panelGrid>
                        </a4j:commandLink>
                    </f:facet>
                    <h:outputText value="#{r.dayString} at #{r.timeString}" />
                </rich:column>
                <rich:column filter="#{userSession.subjectDbAdapter.filterSensorId}">
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="Filter by Sensor Type:" />
                            <h:selectOneMenu
                                value="#{userSession.subjectDbAdapter.sensorIdFilter}">
                                <f:selectItems value="#{userSession.subjectDbAdapter.sensorIds}" />
                                <a4j:ajax render="sensorTable" event="change" />
                            </h:selectOneMenu>
                        </h:panelGroup>
                    </f:facet>
                    <h:panelGroup>
                        <h:outputText value="#{r.sensorSpec.type} (#{r.sensorSpec.id})" />
                        <h:graphicImage id="infoIcon" alt="Info icon"
                            url="/images/info.png"
                            style="vertical-align: center; float: right;" />
                        <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                            showDelay="500" target="infoIcon">
                            <h:panelGrid columns="2">
                                <h:outputText value="Manufacturer:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.manufacturer}"
                                    styleClass="tooltipData" style="float: left;" />
                                <h:outputText value="Model:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.model}"
                                    styleClass="tooltipData" style="float: left;" />
                                <h:outputText value="Specification:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.spec}"
                                    styleClass="tooltipData" style="float: left;" />
                            </h:panelGrid>
                        </rich:tooltip>
                    </h:panelGroup>
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <a4j:commandLink render="sensorTable"
                            action="#{userSession.subjectDbAdapter.sortByReadingValue}">
                            <h:panelGrid style="width:100%; height:100%" columns="2">
                                <h:outputText value="Sort by Reading Value" />
                                <h:graphicImage alt="Reading sort icon"
                                    url="/images/#{userSession.subjectDbAdapter.readingValueSort}.png"
                                    style="vertical-align: center;" />
                            </h:panelGrid>
                        </a4j:commandLink>
                    </f:facet>
                    <h:outputText value="#{r.value}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Units" />
                    </f:facet>
                    <h:outputText value="#{r.sensorSpec.unit}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Actions" />
                    </f:facet>
                    <h:panelGrid columns="4">
                        <h:panelGroup>
                            <h:commandLink
                                onclick="postToNewsFeed()">
                                <rich:componentControl target="postPopup" operation="show" />
                                <h:graphicImage id="instantPublish"
                                    alt="One-time measurement publish icon"
                                    url="/images/instantPublish.png"
                                    style="vertical-align: center; float: right;" />
                            </h:commandLink>
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="instantPublish">
                                <h:outputText value="Post these sensor readings to wall." />
                            </rich:tooltip>
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:graphicImage id="schedulePublish"
                                alt="Scheduled measurement publish icon"
                                url="/images/schedulePublish.png"
                                style="vertical-align: center; float: right;" />
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="schedulePublish">
                                <h:outputText
                                    value="Schedule automatic posting of this sensor's measurements." />
                                <br />
                                <h:outputText value="Not yet implemented."
                                    styleClass="tooltipData" style="float: left;" />
                            </rich:tooltip>
                        </h:panelGroup>
                        <div id="spacer" style="width: 20px" />
                        <h:panelGroup>
                            <h:graphicImage id="visualize"
                                alt="Visualize sensor readings icon" url="/images/visualize.png"
                                style="vertical-align: center; float: right;" />
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="visualize">
                                <h:outputText value="Visualize measurements from this sensor." />
                                <br />
                                <h:outputText value="Not yet implemented."
                                    styleClass="tooltipData" style="float: left;" />
                            </rich:tooltip>
                        </h:panelGroup>
                    </h:panelGrid>
                </rich:column>
            </rich:dataTable>
        </h:form>
{code}

Basically this was everything I wanted -- except I need a scrollbar to account for arbitrary amounts of data. I don't need any of the other features of the extendedDataTable (column drag/drop, resizing, etc.). Anyway, I tried changing to an extendedDataTable, and I hit a complete wall.

The layout of the table got totally screwed up -- the columns were shrunk down to ugly uniform sizes, and there was a giant unused space on the right of the table. After struggling with the layout and manually specifying widths, I was able to get this far:

There are still problems I can't resolve -- the scrollbars in the headers for columns 1 and 3 will not go away. The rows are scrunched up, hiding some of the icons. I took a look at other forum posts and saw others using CSS styles to get the rows to expand to 100%. I tried this -- it increased the height of the rows properly, but it prevented borders from rendering.

It would be much easier for me to use extendedDataTable if the default layout were closer to the dataTable, without having to struggle through specifying column widths.

I've spent several hours trying to resolve this, and I would be extremely grateful if someone can provide advice on how to fix this problem or an alternative to using extendedDataTable.

Thanks!

Updated code:

{code}
<h:form id="tableForm">
            <rich:extendedDataTable var="r" id="sensorTable"
                value="#{userSession.subjectDbAdapter.measurements}"
                rowClasses="odd-row, even-row" width="100%" height="100%" frozenColumns="5" style="overflow:hidden;">
                <f:facet name="noData">
                    No matches found.
                </f:facet>
                <rich:column width="175px" style="overflow: hidden;">
                    <f:facet name="header">
                        <a4j:commandLink render="sensorTable"
                            action="#{userSession.subjectDbAdapter.sortByReadingTime}">
                            <h:panelGrid style="width:100%; height:100%; overflow:hidden;" columns="2" >
                                <h:outputText value="Sort by Time of Reading" />
                                <h:graphicImage alt="Time sort icon"
                                    url="/images/#{userSession.subjectDbAdapter.readingTimeSort}.png"
                                    style="vertical-align: center;" />
                            </h:panelGrid>
                        </a4j:commandLink>
                    </f:facet>
                    <h:outputText value="#{r.dayString} at #{r.timeString}" />
                </rich:column>
                <rich:column width="230px" filter="#{userSession.subjectDbAdapter.filterSensorId}" style="overflow: hidden;">
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="Filter by Sensor Type:" />
                            <h:selectOneMenu
                                value="#{userSession.subjectDbAdapter.sensorIdFilter}">
                                <f:selectItems value="#{userSession.subjectDbAdapter.sensorIds}" />
                                <a4j:ajax render="sensorTable" event="change" />
                            </h:selectOneMenu>
                        </h:panelGroup>
                    </f:facet>
                    <h:panelGroup style="height:100%;">
                        <h:outputText value="#{r.sensorSpec.type} (#{r.sensorSpec.id})" />
                        <h:graphicImage id="infoIcon" alt="Info icon"
                            url="/images/info.png"
                            style="vertical-align: center; float: right;" />
                        <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                            showDelay="500" target="infoIcon">
                            <h:panelGrid columns="2">
                                <h:outputText value="Manufacturer:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.manufacturer}"
                                    styleClass="tooltipData" style="float: left;" />
                                <h:outputText value="Model:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.model}"
                                    styleClass="tooltipData" style="float: left;" />
                                <h:outputText value="Specification:" style="float:right;" />
                                <h:outputText value="#{r.sensorSpec.spec}"
                                    styleClass="tooltipData" style="float: left;" />
                            </h:panelGrid>
                        </rich:tooltip>
                    </h:panelGroup>
                </rich:column>
                <rich:column width="165px" style="overflow: hidden;">
                    <f:facet name="header">
                        <a4j:commandLink render="sensorTable"
                            action="#{userSession.subjectDbAdapter.sortByReadingValue}">
                            <h:panelGrid style="width:100%; height:100%" columns="2">
                                <h:outputText value="Sort by Reading Value" />
                                <h:graphicImage alt="Reading sort icon"
                                    url="/images/#{userSession.subjectDbAdapter.readingValueSort}.png"
                                    style="vertical-align: center;" />
                            </h:panelGrid>
                        </a4j:commandLink>
                    </f:facet>
                    <h:outputText value="#{r.value}" />
                </rich:column>
                <rich:column width="55px" style="overflow: hidden;">
                    <f:facet name="header">
                        <h:outputText value="Units" />
                    </f:facet>
                    <h:outputText value="#{r.sensorSpec.unit}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Actions" />
                    </f:facet>
                    <h:panelGrid columns="4">
                        <h:panelGroup>
                            <h:commandLink
                                onclick="postToNewsFeed('New #{userSession.facebookAppAdapter.getValue('name')} sensor reading!', '#{userSession.facebookAppAdapter.getValue('description')}', '#{userSession.facebookUserAdapter.getMeField('first_name')} recorded a reading of #{r.value} #{r.sensorSpec.unit} for #{r.sensorSpec.type} (#{r.sensorSpec.id})!')">
                                <rich:componentControl target="postPopup" operation="show" />
                                <h:graphicImage id="instantPublish"
                                    alt="One-time measurement publish icon"
                                    url="/images/instantPublish.png"
                                    style="vertical-align: center; float: right;" />
                            </h:commandLink>
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="instantPublish">
                                <h:outputText value="Post these sensor readings to wall." />
                            </rich:tooltip>
                        </h:panelGroup>
                        <h:panelGroup>
                            <h:graphicImage id="schedulePublish"
                                alt="Scheduled measurement publish icon"
                                url="/images/schedulePublish.png"
                                style="vertical-align: center; float: right;" />
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="schedulePublish">
                                <h:outputText
                                    value="Schedule automatic posting of this sensor's measurements." />
                                <br />
                                <h:outputText value="Not yet implemented."
                                    styleClass="tooltipData" style="float: left;" />
                            </rich:tooltip>
                        </h:panelGroup>
                        <div id="spacer" style="width: 20px" />
                        <h:panelGroup>
                            <h:graphicImage id="visualize"
                                alt="Visualize sensor readings icon" url="/images/visualize.png"
                                style="vertical-align: center; float: right;" />
                            <rich:tooltip mode="client" styleClass="tooltip" layout="block"
                                showDelay="500" target="visualize">
                                <h:outputText value="Visualize measurements from this sensor." />
                                <br />
                                <h:outputText value="Not yet implemented."
                                    styleClass="tooltipData" style="float: left;" />
                            </rich:tooltip>
                        </h:panelGroup>
                    </h:panelGrid>
                </rich:column>
            </rich:extendedDataTable>
        </h:form>
{code}

1. Re: Frustrated with rich:extendedDataTable

healeyb Jan 30, 2012 9:32 AM (in response to mohlendo)

Firstly can you try with this inline style on the page and let me know to what extent it fixes things
for you?

<style>
.rf-edt-hdr-c {
border-right: none;
border-bottom: none;
}
.rf-edt-c {
height: 100%;
border-right: none;
border-bottom: none;
}
.rf-edt-cnt td {
border-bottom: 1px solid #9FC0E9;
border-right: 1px solid #9FC0E9;
}
</style>

Regards,
Brendan.
1 of 1 people found this helpful
Actions
2. Re: Frustrated with rich:extendedDataTable

mohlendo Jan 30, 2012 5:36 PM (in response to healeyb)

Hey Brendan,

Thanks for the reply. I had tried this earlier -- it resolves the width of rows in the table, but borders aren't rendering. I suppose I could make it a little less ugly by darkening the odd rows to provide more contrash.

Here's the result.

An interesting thing about the header columns is that if I manually resize them in the browser to make them wider, the scrollbar disappears. From there, I can manually shrink them to make them smaller than they originally rendered without the scrollbars reappearing. I'd like for them to render without the scrollbars upfront though.

Any other suggestions?
Actions

Go to original post