OMEGA Side Menu Datatable resizeColumns Error

Post Reply
sthe
Posts: 21
Joined: 10 Jun 2014, 08:42

09 Aug 2017, 12:09

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):
Image

In Chrome and Firefox everything works fine!
resizeColums=false IE10 works also fine!

Can anyone help here?

Regards

Steffen

Image
Last edited by sthe on 10 Aug 2017, 14:41, edited 1 time in total.

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

10 Aug 2017, 10:04

Thanks for the screenshot. But, I couldn't replicate it. Could you please attach a sample page for us to replicate?

sthe
Posts: 21
Joined: 10 Jun 2014, 08:42

10 Aug 2017, 14:38

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>

sthe
Posts: 21
Joined: 10 Jun 2014, 08:42

10 Aug 2017, 14:42

I found:
https://github.com/primefaces/primefaces/issues/1131

but it seems the problem still occurs

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

14 Aug 2017, 10:20

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>

sthe
Posts: 21
Joined: 10 Jun 2014, 08:42

14 Aug 2017, 14:54

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

User avatar
aragorn
Posts: 2510
Joined: 29 Jun 2013, 12:38

17 Aug 2017, 11:28

I couldn't replicate it. it works fine and fast for me on IE. Do you try it after removing setTimeout in my code?

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest