Discussion Sample More/Less

Discussion Sample

by asifmohammed

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">
<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
  <div id="thread_wrapper" 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="fiddle-spacer">
            </div>
            <div class="user-list">
                <div class="fiddle-label">
                    <label for="subscriber_select" class="subscriber-label">
                        Invite Users or User Groups to this discussion</label>
                </div>
                <div class="edit-subscriber-list subscribe-list fiddle-input" tabindex="11">
                    <select data-placeholder="Select User/Groups to subscribe" style="width: 350px;"
                        class="chzn-select" multiple>
                        <optgroup label="User Groups">
                            <option>[Admins]</option>
                            <option>[Developers]</option>
                            <option>[Managers]</option>
                           ...

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
        {
            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
        {
            clear: both;
            padding: 2px;
        }
        .header-info
        {
            padding-bottom: 10px;
        }
        body
        {
            font-family: Lucida Grande,Segoe UI,Arial,sans-serif;
        }
        .hide
        {
            display: none;
        }
        .fiddle-input
        {
            padding: 10px 0;
            float: left;
        }
        
        .post-wrapper-fiddle-input
        {
            padding: 10px 0;
            float: left;
        }
        
        .textarea-field
        {
            width: 33em;
            height: 7em;
            resize: none;
...

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'
         ...