To display two fields from two different objects in a single column of a table?

Question

The requirement is to pull the CommentBody field from CaseComments and TextBody field from EmailMessages and display them in a single column in a table. The other column should contain the created date/time. The records have to be arranged in a chronological order.

A Case contains several comments and emails. I'm able to create two tables, one for CaseComments and the other for EmailMessages and I've tried to combine these two into one table by creating a wrapper class but I couldn't complete it.

This is the code. I apologize, there are many errors in this code. This wrapper class might work if there is only one comment and email. As I'm not sure how to loop the comments, emails and the created date/time. And in the visualforce how to pull the comments/emails in one column and date/time in the adjacent column in DESC order. It would be really helpful to direct me on this. Thanks in advance.

public Class CaseInteraction {

    private Case c;
    public List<CaseWrap> casewrapper {get; set;}

    public Class CaseWrap {
        public CaseComment casecom {get; set;}
        public EmailMessage emailms {get; set;}
    }

    public CaseInteraction (ApexPages.StandardController con) {
        this.c = (Case) con.getRecord();
        casewrapper = new List<CaseWrap>();
        CaseComment cc = [SELECT id, commentBody, createdDate, createdById, isPublished FROM CaseComment WHERE ParentId=:c.Id ORDER BY createdDate DESC]; 
        EmailMessage em = [SELECT id, Subject, TextBody, CreatedDate FROM EmailMessage WHERE ParentId=:c.Id ORDER BY createdDate DESC]; 
        CaseWrap ccem = new CaseWrap()

        ccem.casecom = cc;
        ccem.emailms = em;
        casewrapper.add(ccem);
    }   

    Rest of the Controller 
}
PAGE:
<apex:pageBlock >
  <apex:facet name="header"><span class="ttitle"> Interaction </span></apex:facet>
    <apex:pageBlockSection collapsible="false" columns="1">
      <apex:pageBlockTable value="{!casewrapper}" var="cw" >
        <apex:column value="{!cw.ccem}" headerValue="Message" />
        <apex:column value="{!cw.CreatedDate}" width="300px" headerValue="Date/Time Sent" />
      </apex:pageBlockTable>
    </apex:pageBlockSection>
  </apex:pageBlock >
  <!-- Rest of the Page -->
</apex:page>

Edit:

May be I've brought up a wrong approach in the code. Concatenating is not my intention. A column should have the content of both Casecomments and EmailMessages in individual rows (with it's created date in the neighbor column). Like:

Table

Message(col)     Created Date(col)
comment3         05/26/2014
email2           05/25/2014
comment2         05/24/2014
email1           05/23/2014
comment1         05/22/2014

Answer 1

Here is some (untested) code that may outline what you are looking for.

The code takes the approach of extracting information from CaseComment and EmailMessage into a common Row class. That class then defines the sort order by implementing the Comparable interface which is used by the list sort method. This makes the sorting in SOQL unnecessary.

public Class CaseInteraction {
    private Case c;
    public List<Row> rows {get; set;}
    public Class Row implements Comparable {
        public String message {get; set;}
        public Datetime created {get; set;}
        Row(String message, Datetime created) {
            this.message = message;
            this.created = created;
        }
        public Integer compareTo(Object o) {
            Row that = (Row) o;
            if (that.created < this.created) return 1;
            else if (that.created > this.created) return -1;
            else return 0;
        }
    }
    public CaseInteraction (ApexPages.StandardController con) {
        c = (Case) con.getRecord();
        rows = new List<Row>();
        for (CaseComment cc : [
                SELECT commentBody, createdDate
                FROM CaseComment
                WHERE ParentId = :c.Id
                ]) {
            rows.add(new Row(cc.commentBody, cc.createdDate));
        }
        for (EmailMessage em: [
                SELECT TextBody, CreatedDate
                FROM EmailMessage
                WHERE ParentId = :c.Id
                ]) {
            rows.add(new Row(em.TextBody, em.createdDate));
        }
        rows.sort();
    }
    ...
}

You can add and populate additional columns in the Row class - such as whether the row is from a CaseComment or EmailMessage - as required.