Discussion Feature

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<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 id="thread-list" class="show">
<div class="header-info">
<div class="thread-list-title">Thread List for PRN4532</div>
<div class="thread-list-commands">
    <a id="new_thread" href="javascript:void(0);" title="Create a new discussion thread.">Start a New Thread</a>
</div>

</div>
<!-- thread list itself, kendoGrid -->
<div id="thread_list" class="thread-list"></div>

<!-- Start new thread -->
<div id="start_new_discussion" class="hide">
     <div class="field-table">
       
            <div class="field-label">
                <label>
                    Thread Summary</label>
                    <span>:</span>
            </div>
            <div class="field-input">
                <input type="text" id="Text1" name="discussion_thread_subject" size="65" value=""
                    class="field-fixed-width" />
                <div class="field-error hide">
                </div>
            </div>
        <div class="clear"> </div>
        <div>
            <div class="field-label block">
                <label>
                    Thread Detailed Description</label>
                    <span>:</span>
            </div>
            <div class="field-input block">
                <textarea id="Textarea1" name="discussion_thread_message" rows="5" cols="80" class="textarea-field"></textarea>
                <div class="field-error hide">
                </div>
            </div>
        </div>
        <div>
            <div class="field-label block">
                <label>
                    Invite Users or User Groups to this discussion</label>
                   ...

CSS

.summary {
}
.summary a {
    color: black;
}
.detail {
    font-size: 0.8em;
    color: #181A1B;
}   
.status {
    color: green;
}
.user {
    white-space: nowrap;
    color: inherit;
}
.user a {
    color: black;
    font-size : 0.8em;
 }
.msgcount {
    text-align: right;
}
.lastupdate {
    font-size: 0.8em;
    white-space: nowrap;
}
.commands {
    font-size: 0.9em;
}
.commands a {
    color: black;
}

.thread-list-title {
    
    padding-top: 10px;
    padding-left: 6px;
    display: inline;
}

.thread-list-commands {
    
    font-size: 0.9em;
    padding-bottom: 10px;
    padding-right: 6px;
    vertical-align: top;
    display :inline;    
    float : right;
    clear : both;
}
.thread-list-commands a {
    color: darkBlue;
}
.thread-list-commands .separator {
    padding-left: 2px;
    padding-right: 2px;
    color: #333;
}
    
.fiddle-spacer {
    padding: 4px;
    clear: both;
    font-size: 0.9em;
}
.header-info{
  padding-bottom: 10px;
}
body{
    font-family : Lucida Grande,Segoe UI,Arial,sans-serif;
}
.hide {
    display : none;
}
.field-input {
    padding: 10px 0;
     float:left;
}
.textarea-field{
    width: 603px; height: 137px; resize : none;
}

.subscribe-list {
    height: 140px;
    overflow: auto;
    font-size: 0.9em;
    border: 1px solid #DBDBDB;
    width: 76%;
}

.field-label {
    font-size: 0.9em;
    padding-right: 30px;
    width: 20%;
    padding: 10px 0;
    float:left;
}

.spacer {
    padding-bottom: 3px;
}
.item{
    margin: 0;
    padding: 3px;
}
.item > span {
    padding: 3px;
}
.show{
    display:block;
}
.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;
}
.thread-commands a {
    text-decoration: none;
    color:...

JavaScript

$(document).ready(function() {
    var threadsForRecord57 = new kendo.data.DataSource({
        data: [
            {
            summary: 'Functional Spec Review',
            detail: 'This is for a detailed review of the functional specification for this PRN.',
            status: '',
            threadid: 1,
            user: 'Ramesh K',
            lastupdate: '10/15/2012 04:15:00 PM',
            msgcount: 15},
        {
            summary: 'Design Spec Review',
            detail: 'Post your review comments for my design specification in this thread. Please be as detailed as possible in your comments.',
            status: 'unread',
            threadid: 2,
            user: 'Ramesh K',
            lastupdate: '12/15/2012 09:15:00 PM',
            msgcount: 5},
        {
            summary: 'Requirements Discussion',
            detail: 'This thread is for discussion about the requirements for this enhancement.',
            status: 'new',
            threadid: 3,
            user: 'Ed L',
            lastupdate: '12/17/2012 09:15:00 PM',
            msgcount: 35},
        {
            summary: 'QA Discussion',
            detail: 'Post here for any assistance you need in testing this feature.',
            status: '',
            threadid: 4,
            user: 'Ramesh K',
            lastupdate: '11/17/2012 09:15:00 PM',
            msgcount: 27},
        {
            summary: 'Tech Pubs Discussion',
            detail: 'Technical  Publications should use this thread to discuss any questions or issues  they have in documenting this new feature. Thanks.',
            status: '',
            threadid: 5,
            user: 'Lydia D',
            lastupdate: '11/17/2012 09:15:00 PM',
            msgcount: 5}
        ],
        schema: {
            model: {
                fields: {
                    lastupdate: {
                        type: 'date'
                    },
                    msgcount: {
                        type: 'number'
           ...