-
1. Re: UI problem with datatable
sivaprasad9394 Sep 17, 2010 7:33 AM (in response to deepusrp)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>
-
2. Re: UI problem with datatable
deepusrp Sep 17, 2010 7:39 AM (in response to sivaprasad9394)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
-
3. Re: UI problem with datatable
sivaprasad9394 Sep 17, 2010 8:04 AM (in response to deepusrp)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> -
4. Re: UI problem with datatable
sivaprasad9394 Sep 17, 2010 11:11 AM (in response to deepusrp)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.