@using EnVisage.Code
@section stylesheets
{
    @Styles.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_STYLES_KENDO_PATH, "kendo-commonstyles"))
}
@section Scripts
{
    @Scripts.Render(String.Format("{0}/{1}", Constants.C_BUNDLE_SCRIPTS_BASE_PATH, "kendo-grid"))
    <script type="text/javascript">
        init.push(function () {
            initGrid();
        });

        function initGrid() {
            jQuery("#grid").kendoGrid(
            {
                "columns": [
                    {
                        "title": "Release Date",
                        "headerAttributes": { "data-field": "ReleaseTimeUTC", "data-title": "ReleaseTimeUTC" },
                        "field": "ReleaseTimeUTC",
                        "format": "{0:MM/dd/yyyy hh:mm:ss (UTCzzz)}",
                        "encoded": true
                    },
                    {
                        "title": "Area",
                        "headerAttributes": { "data-field": "EntityType", "data-title": "EntityType" },
                        "field": "EntityType",
                        "encoded": true
                    },
                    {
                        "title": "Title",
                        "headerAttributes": { "data-field": "EntityTitle", "data-title": "EntityTitle" },
                        "field": "EntityTitle",
                        "encoded": true
                    },
                    {
                        "title": "Id",
                        "headerAttributes": { "data-field": "EntityId", "data-title": "EntityId" },
                        "field": "EntityId",
                        "encoded": true
                    },
                    {
                        "title": "Owner",
                        "headerAttributes": { "data-field": "Owner", "data-title": "Owner" },
                        "field": "Owner",
                        "encoded": true
                    },
                    {
                        title: " ",
                        width: "180px",
                        template: "<a href='/ContentLockerApi/DropObjectLock/#=data.EntityId#' target='_blank'>Release Lock</a>"
                    }
                ],
                "pageable": {
                    "autoBind": false,
                    "pageSizes": [25, 50, 100],
                    "buttonCount": 10
                },
                "scrollable": false,
                "noRecords": true,
                "messages": { "noRecords": "Lock list is empty" },
                "autoBind": false,
                "dataSource": {
                    "type": "aspnetmvc-ajax",
                    "transport": {
                        "read": {
                            "url": "/ContentLockerApi/Index",
                            "type": "POST"
                        }
                    },
                    "pageSize": 25,
                    "page": 1,
                    "total": 0,
                    "serverPaging": true,
                    "schema": {
                        "model": {
                            "fields": {
                                "ReleaseTimeUTC": { "type": "date" },
                                "EntityType": { "type": "string" },
                                "EntityTitle": { "type": "string" },
                                "EntityId": { "type": "string" },
                                "Owner": { "type": "string" },
                                "Actions": { "type": "string" }
                            }
                        },
                        data: "Data", // records are returned in the "data" field of the response
                        total: "Total" // total number of records is in the "total" field of the response
                    }
                }
            });
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
        }
        function releaseLock(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            alert(dataItem.EntityId);
        }
    </script>
}
<div id="erorMsgPlaceholder"></div>
<div class="panel-body">
    <div id="grid"></div>
</div>