Page 1 of 1
OMEGA Side Menu Datatable resizeColumns Error
Posted: 09 Aug 2017, 12:09
by sthe
Hi,
PF Version 6.1.1
Server: Tomcat 8.5
Myfaces: 2.2.11
Theme and Layout : 1.1.2
When hiding the OMEGA Menu Sidebar the datatble in the main frame does not render correct in IE10 when using resizeColums=true.
Look at the image to clarify(right click on the image and save):
In Chrome and Firefox everything works fine!
resizeColums=false IE10 works also fine!
Can anyone help here?
Regards
Steffen
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 10 Aug 2017, 10:04
by mert.sincan
Thanks for the screenshot. But, I couldn't replicate it. Could you please attach a sample page for us to replicate?
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 10 Aug 2017, 14:38
by sthe
Hello,
yes.
Take the OMEGA Datable Code (data.xhtml) and simply add resizableColumns="true" to p:dataTable.
Then add visible="true" to the first three columns and visible="
false" to the last column.
Then try in IE show/hide sidemenu.
<p:dataTable var="car" value="#{dtSelectionView.cars7}" selectionMode="single" reflow="true" resizableColumns="
true"
selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}" paginator="true" rows="10">
<f:facet name="header">
Single with Row Click
</f:facet>
<p:column headerText="Id" sortBy="#{car.id}" visible="
true">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" sortBy="#{car.year}" visible="
true">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" sortBy="#{car.brand}" visible="
true">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" sortBy="#{car.color}" visible="
false">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 10 Aug 2017, 14:42
by sthe
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 14 Aug 2017, 10:20
by mert.sincan
Please try;
Code: Select all
<script type="text/javascript">
//<![CDATA[
$(window).load(function() {
var $this = PF('myTable');
if($this) {
$('#omega-menu-button').on('click', function() {
var columns = $this.jq.find('> .ui-datatable-tablewrapper > table > thead > tr > th'),
visibleColumns = columns.filter(':visible'),
hiddenColumns = $this.jq.find('th.ui-helper-hidden, td.ui-helper-hidden');
setTimeout(function() {
hiddenColumns.css('display', 'block');
$this.setColumnsWidth(visibleColumns);
$this.setColumnsWidth(hiddenColumns);
hiddenColumns.css('display', '');
}, 1);
});
}
});
//]]>
</script>
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 14 Aug 2017, 14:54
by sthe
hi,
thanks for your reply.
I added your code.
But in IE the first click on omega-menu-button to hide the menu takes nearly 3 seconds before a reaction heppens. not a good solution for my customers. is there another solution?
regards
Re: OMEGA Side Menu Datatable resizeColumns Error
Posted: 17 Aug 2017, 11:28
by mert.sincan
I couldn't replicate it. it works fine and fast for me on IE. Do you try it after removing setTimeout in my code?