<SOLVED>Timeline Not recognize custom content on facet group

[sebargarcia]

Hi, first of all sorry for my english. I am playing with timeline component and it is great . What i am trying to do now is to use grouping events. The problem is when i use the facet "group" to customize the content of the group column it doesnt recongnize my custom content.
Here is my xhtml code

Code: Select all

<ui:define name="content">
        <pe:timeline id="tlBooking" value="#{reservasBean.bookingsModel}"  
                     height="500"  axisOnTop="true" var="book" varGroup="room"
                     showNavigation="true" groupsWidth="100"
                     zoomMax="#{reservasBean.zoomMax}" zoomMin="#{reservasBean.zoomMin}">
            <f:facet name="group">                  
                Room. #{room.name}                 
            </f:facet>
            Nro.: #{book.id} - #{book.nameTo}
        </pe:timeline>
    </ui:define>

And here is my bean

Code: Select all

@Named
@ViewScoped
public class ReservasBean implements Serializable{
    private static final long serialVersionUID = 2L;
    
    @EJB
    private BookingFacadeLocal bookingFacade;

    private TimelineModel bookingsModel;
    private List<Booking> listBookings;
    
    private long zoomMin = 1000L * 60 * 60 * 24;
    private long zoomMax = 1000L * 60 * 60 * 24 * 30;
    public ReservasBean() {
    }

    @PostConstruct
    protected void initialize() {
        bookingsModel = new TimelineModel();
        bookingsModel.addAllGroups(this.loadRooms());
        bookingsModel.addAll(this.loadBookings());
//        Calendar cal = Calendar.getInstance();
//        cal.set(2014, Calendar.SEPTEMBER, 23, 0, 0, 0);
//        bookingsModel.add(new TimelineEvent("Primefaces-Extensions 0.1", cal.getTime()));
    }
    
    private List<TimelineGroup> loadRooms() {
        List<TimelineGroup> rooms = new ArrayList<TimelineGroup>();
        List<Rooms> roomsList = this.bookingFacade.getRooms();
        System.out.println("Cant habitaciones: " + roomsList.size());
        for(Rooms r : roomsList){
            TimelineGroup room = new TimelineGroup(r.getId().toString(), r);
            rooms.add(room);
        }
        return rooms;
    }
    
    private List<TimelineEvent> loadBookings() {
        List<TimelineEvent> bookings = new ArrayList<TimelineEvent>();
        this.listBookings = new ArrayList<Booking>();
        this.listBookings = this.bookingFacade.findAll();
        for(Booking b : this.listBookings){
            for(BookingRooms br : b.getBookingRoomsCollection()){
                TimelineEvent evt = new TimelineEvent(b, b.getDateIn(), b.getDateOut(), 
                        false, br.getRoomsId().getId().toString());
                bookings.add(evt);
            }            
        }
        return bookings;
    }
    //**********GETS y SETS*****************

    public TimelineModel getBookingsModel() {
        return bookingsModel;
    }

    public void setBookingsModel(TimelineModel bookingsModel) {
        this.bookingsModel = bookingsModel;
    }

    public long getZoomMin() {
        return zoomMin;
    }   

    public long getZoomMax() {
        return zoomMax;
    }

}

The problem is the colum group shows the Id fot the room instead of the Name.
Here is an image to show the result


What i am doing wrong? Any tips? Thanks in advance.

I use JSF2.2, CDI, EJB, JPA and glassfish 4

[Oleg]

Strange. I can't see any mistakes. Can you try with

<h:outputText value="Room #{room.name}"/>

instead of

Room #{room.name}

please?

[sebargarcia]

Hi Oleg, thanks for answering. I tried what you suggested

Code: Select all

<h:outputText value="Room #{room.name}"/>

and no luck, its still showing the id instead of the name. It is strange, no errors in console but firebug show this

Code: Select all

WARNING: Passing options in draw() is deprecated. Pass options to the constructur or use setOptions() instead!

In the timeline.js line 294 (but is a warning)
.
I will make a sample project (whitout DB access, jpa, ejb, etc.) to test and see whats happen. Another question, if my Timelinegroup have supose 10 groups but only two of them has events, the others doesn´t show in the timeline? Thanks.

[sebargarcia]

Oleg i find the issue! this method

Code: Select all

bookingsModel.addAllGroups(this.loadRooms());

apparently it is no adding groups to timeline. So i check the docs and found this method

Code: Select all

 bookingsModel.setGroups(this.loadRooms());

And now it is working! . Thanks for your support. Do you think i open a issue in github about this?

Now i want to know how to show empty timelinegroups? (i mean groups without events).

Thanks!

[Oleg]

Do you think i open a issue in github about this?

Yes, of course. Thanks for debugging. Please also mention the warning "WARNING: Passing options in draw() is deprecated. ..."

Another question, if my Timelinegroup have supose 10 groups but only two of them has events, the others doesn´t show in the timeline?

Yes, this is a well-known limitation. Another user already asked about this. AFAIK, the new vis.js script (new version of native timeline script) doesn't have this limitation. But not all features from the current timeline script have been ported to the new vis.js. I would suggest to wait a little bit. I can investigate then some time and look what is available in the new script and what not.

P.S. We also offer a PRO support now http://blog.primefaces.org/?p=3274