Extensions - Sheet Component Render Problem

Community Driven Extensions Project
Post Reply
deadlock
Posts: 4
Joined: 24 Nov 2015, 01:55

25 Jun 2018, 20:15

Hi all,
I m working on a project which requires the functionality of this component. However, when I populate a table, some columns arent rendered at first and they are rendered after a click event. Also, the columns widths get bigger than I set at the beginning. I suspect it could be because of change even but I am using the code given in the examples for "cellChangeEvent".

Thank you for the help in advance!

Image
Image

Code: Select all

                    
                                      <pe:sheet  id="sheetALS-Single" widgetVar="sheetWidgetALS" value="#{aLSSingleInputView.sheetRows}" var="row" 
                              height="600"  rowKey="#{row.rowID}" fixedCols="3"            
                              styleClass="ALS-sheet" showRowHeaders="false"  >

                        <p:ajax event="change" listener="#{aLSSingleInputView.cellChangeEvent}" />

                        <f:facet name="header">
                     <pe:sheetcolumn styleClass="mycolumn-ALS-header" headerText="Month" value="#{aLSSingleInputView.headers[row.rowID][0]}" colWidth="45" />
                                    <h:outputText value="Rows" />
                        </f:facet>

                        <f:facet name="footer">
                            <h:outputText value="#{aLSSingleInputView.sheetRows.size()} Records" />
                        </f:facet>
                        <pe:sheetcolumn styleClass="mycolumn-ALS-header" headerText="Month" value="#{aLSSingleInputView.headers[row.rowID][0]}" colWidth="45" />
                        <pe:sheetcolumn styleClass="mycolumn-ALS-header" headerText="Class" value="#{aLSSingleInputView.headers[row.rowID][1]}" colWidth="45" />
                        <pe:sheetcolumn styleClass="mycolumn-ALS-header" headerText="Axle Load" value="#{aLSSingleInputView.headers[row.rowID][2]}" colWidth="70" />


                        <pe:sheetcolumn styleClass="mycolumn-ALS" headerText="3000" value="#{row.values[0]}" colWidth="50" />
                        <pe:sheetcolumn styleClass="mycolumn-ALS" headerText="4000" value="#{row.values[1]}" colWidth="50" />
                        
                        ......... (and there are some other columns)
                        

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

25 Jun 2018, 20:31

What version of Extensions are you using? The latest 6.2.6?

If you are using the latest then try this...

Code: Select all

<p:ajax event="change" listener="#{aLSSingleInputView.cellChangeEvent}" oncomplete="PF('sheetWidgetALS').redraw();'"/>
PF('sheetWidgetALS').redraw(); is the javascript method to tell the sheet to re-paint itself with correct column widths.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

25 Jun 2018, 20:43

And let me know if you still have the problem of the initial render not showing all the columns.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

deadlock
Posts: 4
Joined: 24 Nov 2015, 01:55

26 Jun 2018, 20:34

Melloware wrote:
25 Jun 2018, 20:43
And let me know if you still have the problem of the initial render not showing all the columns.
I was using 6.2.4 and I ve changed it to 6.2.6 but I still have the same problem. Also, When I dont put any fixed column, only the first column is drawn until a click event. I did some experiments and it seems it is because of the tab structure. In my code, the sheet components are placed under tabs. When I change the active index and make the tab with a sheet component is the active one, that specific sheet is drawn correctly. However, the other tabs have the same problem. All the tabs are loaded at the beginning even if they dont get drawn until they are selected. So, if there is a code piece which adjusts the sheets when the document is loaded, it wont work for the unselected tabs. I would appreciate if you could help me to fix that. Do you have any suggestion? Should I look for an alternative for tab view?

Thank you

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

26 Jun 2018, 21:38

I don't use the TabView becuase its all AJAX rendering and loaded at once when the page loads.

What I do in my projects is I have separate pages and have a top part of the page that just "looks" like tabs and I highlight the correct one depending of the page I am on.

Have you also tried having your TabView be dynamic meaning it won't load that tab until you click on it?

Code: Select all

<p:tabView dynamic="true" cache="true">
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

deadlock
Posts: 4
Joined: 24 Nov 2015, 01:55

26 Jun 2018, 22:02

Making it dynamic solved my problem, now it changes from first phase(half rendered) to second phase automatically without clicking and it happens in half second. When I have time I will create separate pages for tabs and make it look like tab view for sure. Thank you a lot for your help!

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

26 Jun 2018, 22:26

No problem!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests