SP Mock

by clairey

HTML

<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.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
   <div id="example" class="k-content">
   <div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>


       <div id="details"> <form method="post" action="submit" style="width:45%">
                <div>
                    <input name="files" id="files" type="file" />
                    <p>
                        <input type="submit" value="Submit" class="k-button" />
                    </p>
                </div>
            </form></div>
       <script type="text/x-kendo-template" id="template">
                <div id="details-container">
                    <h2>#= name#</h2>
                    <em>#= name#</em>
                    <dl>
                        <dt>City: #= size#</dt>
                       
                    </dl>
                    
                   
                    
                </div>
            </script>
       
        <script id="command-template" type="text/x-kendo-template">
    # if(locked) { #
        <a class="k-button locked k-grid-locked">Locked</a>
    # } else { #
        <a class="k-button k-grid-edit">Edit Document</a>
    # } #
</script>

CSS

#clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('http://demos.kendoui.com/content/web/grid/clientsDb.png') no-repeat 0 0;
}
.k-grid-locked{
    background: url(http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/lock.png) no-repeat;
}

.k-button{
    width: 120px;
}

JavaScript

var wnd, detailsTemplate;


$(document).ready(function() {

    var data = [{
        "type": "pdf",
        "name": "doc1",
        "mediaUrl": "#",
        "size": 64,
        "locked": true},
    {
        "type": "pdf",
        "name": "doc1",
        "mediaUrl":"#",
        "size": 63,
        "locked": false}]

    $("#grid").kendoGrid({
        dataSource: {
            data: data,
            pageSize: 10
        },
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns: [{
            field: "type",
            width: 150,
            title: "Document Type"},
        {
            field: "name",
            width: 90,
            title: "Document Name"},
        {
            width: 100,
            field: "size"},
        {
            field: "locked"},
        {

            template: kendo.template($("#command-template").html())}
                      ]

    }).data("kendoGrid");;


    $("body").delegate(".k-grid-locked", "click", function(e) {
        e.preventDefault();

        var dataItem = $("#grid").data("kendoGrid").dataItem($(e.currentTarget).closest("tr"));
        //wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    });
    
     $("body").delegate(".k-grid-edit", "click", function() {
        $(this).html("Locked");         
        $(this).removeClass("k-grid-edit");                 
        $(this).addClass("k-grid-locked");
    });
    
    
    
       $("#files").kendoUpload();

    wnd = $("#details").kendoWindow({
        title: "Upload Document",
        modal: true,
        visible: false,
        resizable: false,
        width: 300
    }).data("kendoWindow");

    
    detailsTemplate = kendo.template($("#template").html());
    
});





function getLockedText() {
    alert("baba");

}