ED-fiddle

by Ramesh Kanagaraj

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<div class="thread-summary">
    <span class="record-id">PRN4532</span>
    <span class="thread-subject">Functional Spec Review</span>
</div>

<div class="thread-commands">
    <a id="new_message" href="javascript:void()">Post a New Message</a>
    <span class="separator">|</span>    
    <a id="collapse_all" href="javascript:void()">Collapse All</a>
    <span class="separator">|</span>
    <a id="expand_all" href="javascript:void()">Expand All</a>
    <span class="separator">|</span>
    <a id="thread_list" href="http://jsfiddle.net/ejlnr/jEgNS/embedded/result/">Return to Thread List</a>
</div>

<div class="thread-detail">Functional specification review comments for conversion of discussion threads to .NET. Please submit no later than October 5, 2012.</div>

<div class="fiddle-spacer">
</div>
    
<!-- see javascript section for linkage of this to #message_list <div> below -->
<script id="message_template" type="text/kendo-ui-template">
    <div class="message">
        <div class="header">
            <div class="user">#: item.user #</div>
            <div class="subject">#: item.subject #</div>
            <div class="status">#= item.status #</div>
            <div class="posted">#= kendo.toString(kendo.parseDate(item.posted),"ddd, MMM yyyy h:m tt") #</div>
        </div>
        <div class="content">
            <span>#: item.content #</span>
        </div>
        <div class="footer">
            <a href="javascript:void()">Reply</a>
            <span class="separator">|</span>
            <a href="javascript:void()">Edit</a>
            <span class="separator">|</span>
            <a href="javascript:void()">Delete</a>
        </div>
    </div>
</script>

<!-- message list itself --...

CSS

.message-list .k-in {
    width: 98%;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.thread-summary {
    float: left;
    padding-top: 10px;
    padding-left: 6px;
}
.thread-summary .record-id {
    color: darkBlue;
}
.thread-summary .thread-subject {
    color: goldenrod; /* wouldn't necessarily do this in real production */
}

.thread-commands {
    float: right;
    font-size: 0.8em;
    padding-top: 10px;
    padding-right: 6px;
    color: darkBlue;
}
.thread-commands a {
    color: darkBlue;
}
.thread-commands .separator {
    padding-left: 2px;
    padding-right: 2px;
    color: #333;
}

.thread-detail {
    clear: both;
    color: indigo;
    font-size: 0.9em;
    padding-left: 2em;
}

.fiddle-spacer {
    padding: 4px;
    font-size: 0.8em;
    text-align: right;
}

.message {
    border-top: 1px solid slateGray;
}
.message .header {
    font-weight: bold;
    padding: 2px;
}
.subject {
    color: darkSlateBlue;
    padding-left: 10px;
    float: left;
}
.status {
    color: seaGreen;
    padding-left: 10px;
    float: left;
}
.user {
    color: darkRed;
    float: left;
}
.posted {
    color: darkSlateBlue;
    float: right;
}
.message .content {
    white-space: normal;
    width: 98%;
    max-height: 220px;
    overflow-y: hidden;
    padding: 2px;
}
.message .end-of-message {
    color: transparent;
}

.message .content-bottom {
    z-index: 2;
    margin-top: -60px;
    height: 60px;
    overflow: hidden;
    position: relative;
}
.message .content-bottom-fade {
    background: -webkit-linear-gradient(bottom, white, rgba(255,255,255,0) 100%);
    background:    -moz-linear-gradient(bottom, white, rgba(255,255,255,0) 100%);
    background:     -ms-linear-gradient(bottom, white, rgba(255,255,255,0) 100%);
    background:      -o-linear-gradient(bottom, white, rgba(255,255,255,0) 100%);
    background:         linear-gradient(bottom, white, rgba(255,255,255,0) 100%);
    filter:...

JavaScript

/* create a Kendo HierarchicalDataSource with the message data for a PRN
   the only field names here in the data that are required are "items"
   (that identifies children), otherwise, you can use any name you like
   and add or remove as many fields as you like, however, keep in mind the
   template (see the #message_template above) does reference these fields */
var msgsForRecord57 = new kendo.data.HierarchicalDataSource({
    data: [
    {
        subject: 'message 1 subject',
        status: '',
        user: 'ramesh',
        posted: '12/15/2012 04:15:00 PM',
        content: 'hey everyone read this message',
        items: [
            {
            subject: 'first response to message 1',
            status: 'new',
            user: 'ed',
            posted: '12/16/2012 12:52:43 PM',
            content: 'good suggestion'},
        {
            subject: 'second response to message 1',
            status: 'new',
            user: 'viswanath',
            posted: '12/17/2012 05:52:43 PM',
            content: 'not so sure about that, maybe try this, this one is much longer than many of the other messages, I am just trying to get this one to wrap so that we see a scroll bar, is it there yet? What about now? Not yet? How about now? OK this needs to be really long. I think I might need to get some lorem ipsum text to put in here for a test.'},
        {
            subject: 'third response to message 1',
            status: 'new',
            user: 'parimala',
            posted: '12/19/2012 2:32:43 PM',
            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta sagittis gravida. Nunc faucibus imperdiet sapien, nec malesuada dolor commodo nec. Fusce vitae interdum purus. Pellentesque tristique ultrices dolor, non auctor nisi sodales a. Proin pulvinar arcu vel diam interdum tincidunt. Fusce id est et erat tristique pulvinar eu eget turpis. In ut suscipit nisl. Maecenas accumsan venenatis elementum. In suscipit tortor non neque...