UI problem with datatable

[deepusrp]

Hello All,

We are using richfaces' datatable.  We have a UI (cosmetic) related problem.

We are using the filterBy attribute in the datatable for the displayed column and the width attribute of columns is auto.  Now the problem is the textbox displayed for the filterby is not aligned for all the displayed columns it depends on the width of the column and the header displayed above it.

one more restriction in that the requirement is, it doesnt want the table to be scrollable horizontally; otherwise we would have fixed the column width manually(hardcoded).

Now my question is, is there a way that i can display the column header on the first row and the filterBy textbox on the second row.  Something like 2 rows in a table.

<tr><td> Header </td></tr> <tr><td> filterBy textbox </td></tr>

OR is there any other solution to it?

Thanks

Deepak

[sivaprasad9394]

try like this ,your filter condition will come in second Row of your datatable.

<rich:datascroller id="scrollID" for="DataItems"

maxPages="10" align="right"

limitToList="true"/>

<rich:dataTable id="DataItems"

value="#{}"

var="profile" rows="10" width="830" rowKeyVar="row">

<!-- ----------------------------------------------------------------- Table Header  -->

<f:facet name="header">

<rich:columnGroup columnClasses="celcomBlack01">

<rich:column width="20">

<h:outputText value="All" />

</rich:column>

<rich:column width="250" sortBy="">

<h:outputText value="Data1" />

</rich:column>

<rich:column width="80">

<h:outputText value="Data2" />

</rich:column>

<rich:column width="80">

<h:outputText value="Data13" />

</rich:column>

<rich:column width="250">

<h:outputText value="Data4" />

</rich:column>

<rich:column width="100">

<h:outputText value="Data5" />

</rich:column>

<rich:column width="50">

<h:outputText value="Data6" />

</rich:column>

<rich:column width="50">

<h:outputText value="Action" />

</rich:column>

</rich:columnGroup>

</f:facet>

<rich:column width="20">

<f:facet name="header">

<h:selectBooleanCheckbox id="selectchk"

onclick="SelectAllCheckboxesSpecific(this);">

</h:selectBooleanCheckbox>

</f:facet>

<h:selectBooleanCheckbox id="selectedField"

value="#{profile.selected}">

</h:selectBooleanCheckbox>

</rich:column>

<!-- ----------------------------------------------------------------- fullname Field -->

<rich:column width="250" sortBy="#{profile.fullname}"

filterBy="#{profile.Data1}" filterEvent="onkeyup">

</rich:column>

<rich:column width="80">

</rich:column>

<rich:column width="80">

</rich:column>

<rich:column width="250">

</rich:column>

<rich:column width="100">

</rich:column>

<rich:column width="50">

</rich:column>

<rich:column width="70">

</rich:column>

</rich:dataTable>

<rich:datascroller id="scrollID" for="DataItems"

maxPages="10" align="right"

limitToList="true"/>

<rich:dataTable id="DataItems"

value="#{}"

var="profile" rows="10" width="830" rowKeyVar="row">

<!-- ----------------------------------------------------------------- Table Header  -->

<f:facet name="header">

<rich:columnGroup columnClasses="Black01">

<rich:column width="20">

<h:outputText value="All" />

</rich:column>

<rich:column width="250" sortBy="">

<h:outputText value="Data1" />

</rich:column>

<rich:column width="80">

<h:outputText value="Data2" />

</rich:column>

<rich:column width="80">

<h:outputText value="Data13" />

</rich:column>

<rich:column width="250">

<h:outputText value="Data4" />

</rich:column>

<rich:column width="100">

<h:outputText value="Data5" />

</rich:column>

<rich:column width="50">

<h:outputText value="Data6" />

</rich:column>

<rich:column width="50">

<h:outputText value="Action" />

</rich:column>

</rich:columnGroup>

</f:facet>

<rich:column width="20">

<f:facet name="header">

<h:selectBooleanCheckbox id="selectchk"

onclick="SelectAllCheckboxesSpecific(this);">

</h:selectBooleanCheckbox>

</f:facet>

<h:selectBooleanCheckbox id="selectedField"

value="#{profile.selected}">

</h:selectBooleanCheckbox>

</rich:column>

<rich:column width="250" sortBy="#{profile.fullname}"

filterBy="#{profile.Data1}" filterEvent="onkeyup">

</rich:column>

<rich:column width="80">

</rich:column>

<rich:column width="80">

</rich:column>

<rich:column width="250">

</rich:column>

<rich:column width="100">

</rich:column>

<rich:column width="50">

</rich:column>

<rich:column width="70">

</rich:column>

</rich:dataTable>

[deepusrp]

Hello Shivaprasad,

First of all thanks a lot for answering...

I'm not able to get the solution from your answer.  Please dont mind.

I want to explain the way we are doing:

<h:form id="employeeList">   
    <a4j:outputPanel id="searchResultsFragment" rendered="#{dbEntities.rowCount > 0}">
        <div class="xScrollBoxFull">           
            <rich:dataTable id="employeeRichDataTable" value="#{dbEntities}"

               var="employee" rows="#{searchEmployeeBackingBean.searchCriteria.pageSize}"

               reRender="employeePaginator">
                                   
                <!-- S/N -->
                <rich:column id="serialNumber" sortBy="#{employee.serialNumber}"

                  filterBy="#{employee.serialNumber}" filterEvent="onkeyup" >
                    <f:facet name="header">#{msg['listemployee.list.serialNumber']}</f:facet>
                    <h:outputText value="#{employee.serialNumber}" />
                </rich:column>
                           
                <!-- EmployeeName -->
                <rich:column id="empName" sortBy="#{employee.empName}"

                  filterBy="#{employee.empName}" filterEvent="onkeyup" >
                    <f:facet name="header">#{msg['listemployee.list.empName']}</f:facet>
                    <h:outputText value="#{employee.empName}" />
                </rich:column>
                           
                <!-- Department -->
                <rich:column id="empDept" sortBy="#{employee.empDept}"

                  filterBy="#{employee.empDept}" filterEvent="onkeyup" >
                    <f:facet name="header">#{msg['listemployee.list.empDept']}</f:facet>
                    <h:outputText value="#{employee.empDept}" />
                </rich:column>
            </rich:dataTable>
        </div>
    </a4j:outputPanel>
</h:form>

Assume that there are still more columns.  Here i have given only 3 columns for better understanding.

Now the problem is if some header is long and some are short, then the alignment in the header row varies and alignment of the filterBy textbox also varies.  We are not worried about the header text but we need the filter textbox to be aligned properly.  Please provide a solution for this.

Please notice the filters are not aligned... Marked in red box....

Is there any way we can do this or to diplay the filter textboxes in a separate row itself so that they are aligned...

Thanks

Deepak

[sivaprasad9394]

try like this i have changed working code as yours,

<h:form id="employeeList">   

    <a4j:outputPanel id="searchResultsFragment" rendered="#{dbEntities.rowCount > 0}">

        <div class="xScrollBoxFull">           

            <rich:dataTable id="employeeRichDataTable" value="#{dbEntities}"

               var="employee" rows="#{searchEmployeeBackingBean.searchCriteria.pageSize}"

               reRender="employeePaginator">

                <!-- S/N -->

                <rich:column id="serialNumber" sortBy="#{employee.serialNumber}"

                  filterBy="#{employee.serialNumber}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.serialNumber']}</f:facet>

                    <h:outputText value="#{employee.serialNumber}" />

                </rich:column>

                <!-- EmployeeName -->

                <rich:column id="empName" sortBy="#{employee.empName}"

                  filterBy="#{employee.empName}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.empName']}</f:facet>

                    <h:outputText value="#{employee.empName}" />

                </rich:column>

                <!-- Department -->

                <rich:column id="empDept" sortBy="#{employee.empDept}"

                  filterBy="#{employee.empDept}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.empDept']}</f:facet>

                    <h:outputText value="#{employee.empDept}" />

                </rich:column>

            </rich:dataTable>

        </div>

    </a4j:outputPanel>

</h:form>

<h:form id="employeeList">   

    <a4j:outputPanel id="searchResultsFragment" rendered="#{dbEntities.rowCount > 0}">

        <div class="xScrollBoxFull">           

            <rich:dataTable id="employeeRichDataTable" value="#{dbEntities}"

               var="employee" rows="#{searchEmployeeBackingBean.searchCriteria.pageSize}"

               reRender="employeePaginator">

<f:facet name="header" >

<rich:columnGroup columnClasses="celcomBlack01">

<!-- S/N -->

<rich:column id="serialNumber" width="#{msg['data.SerialNumberingWidth']}"> (Width is from Application Resource Properties)

<h:outputText value="#{msg['data.SerialNumbering']}" /> (No. header)

</rich:column>

<!-- EmployeeName -->

<rich:column id="empName" width="#{msg['data.EmployeeNameWidth']}">

<h:outputText value="#{msg['data.EmployeeName']}" />(Employee Name header)

</rich:column>

<!-- Department -->

<rich:column id="empDept" width="#{msg['data.deptNameWidth']}">

<h:outputText value="#{msg['data.deptName']}" />(Department header)

</rich:column>

</rich:columnGroup>

</f:facet>

<!-- ----------------------------------------------------------------- S/N  field -->

<rich:column width="#{msg['data.SerialNumberingWidth']}" sortBy="#{employee.serialNumber}"

filterBy="#{employee.serialNumber}" filterEvent="onkeyup"

<h:outputText   id="serialNumberField" value="#{employee.serialNumber}"  />

</rich:column>

<!-- -----------------------------------------------------------------  EmployeeName -->

<rich:column width="#{msg['data.EmployeeNameWidth']}" sortBy="#{employee.empName}"

filterBy="#{employee.empName}" filterEvent="onkeyup"

<h:outputText id="empNameField" value="#{employee.empName}" />

</rich:column>

            </rich:dataTable>

        </div>

    </a4j:outputPanel>

</h:form>

Sample IMage It looks like this,

<h:form id="employeeList">   

    <a4j:outputPanel id="searchResultsFragment" rendered="#{dbEntities.rowCount > 0}">

        <div class="xScrollBoxFull">           

            <rich:dataTable id="employeeRichDataTable" value="#{dbEntities}"

               var="employee" rows="#{searchEmployeeBackingBean.searchCriteria.pageSize}"

               reRender="employeePaginator">

                                   

                <!-- S/N -->

                <rich:column id="serialNumber" sortBy="#{employee.serialNumber}"

                  filterBy="#{employee.serialNumber}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.serialNumber']}</f:facet>

                    <h:outputText value="#{employee.serialNumber}" />

                </rich:column>

                           

                <!-- EmployeeName -->

                <rich:column id="empName" sortBy="#{employee.empName}"

                  filterBy="#{employee.empName}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.empName']}</f:facet>

                    <h:outputText value="#{employee.empName}" />

                </rich:column>

                           

                <!-- Department -->

                <rich:column id="empDept" sortBy="#{employee.empDept}"

                  filterBy="#{employee.empDept}" filterEvent="onkeyup" >

                    <f:facet name="header">#{msg['listemployee.list.empDept']}</f:facet>

                    <h:outputText value="#{employee.empDept}" />

                </rich:column>

            </rich:dataTable>

        </div>

    </a4j:outputPanel>

</h:form>

<h:form id="employeeList">   

    <a4j:outputPanel id="searchResultsFragment" rendered="#{dbEntities.rowCount > 0}">

        <div class="xScrollBoxFull">           

            <rich:dataTable id="employeeRichDataTable" value="#{dbEntities}"

               var="employee" rows="#{searchEmployeeBackingBean.searchCriteria.pageSize}"

               reRender="employeePaginator">

                

<f:facet name="header" >

<rich:columnGroup columnClasses="celcomBlack01">

<!-- S/N -->

<rich:column id="serialNumber" width="#{msg['data.SerialNumberingWidth']}"> (Width is from Application Resource Properties)

<h:outputText value="#{msg['data.SerialNumbering']}" /> (No. header)

</rich:column>

<!-- EmployeeName -->

<rich:column id="empName" width="#{msg['data.EmployeeNameWidth']}">

<h:outputText value="#{msg['data.EmployeeName']}" />(Employee Name header)

</rich:column>

<!-- Department -->

<rich:column id="empDept" width="#{msg['data.deptNameWidth']}">

<h:outputText value="#{msg['data.deptName']}" />(Department header)

</rich:column>

</rich:columnGroup>

</f:facet>

<!-- ----------------------------------------------------------------- S/N  field -->

<rich:column width="#{msg['data.SerialNumberingWidth']}" sortBy="#{employee.serialNumber}"

filterBy="#{employee.serialNumber}" filterEvent="onkeyup"

<h:outputText   id="serialNumberField" value="#{employee.serialNumber}"  />

</rich:column>

<!-- -----------------------------------------------------------------  EmployeeName -->

<rich:column width="#{msg['data.EmployeeNameWidth']}" sortBy="#{employee.empName}"

filterBy="#{employee.empName}" filterEvent="onkeyup"

<h:outputText id="empNameField" value="#{employee.empName}" />

</rich:column>

              

            </rich:dataTable>

        </div>

    </a4j:outputPanel>

</h:form>

[sivaprasad9394]

just set the styleClass for dataTable it will solve your issue as per your coding method also. and mine you can check i have changed as per your code.