<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Tasks.aspx.vb" Inherits="KendoFormsTEst.Tasks" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <%--<script src="<%: ResolveUrl("~/Scripts/kendo/2012.3.1114/kendo.web.min.js") %>"></script>--%>

    <h2>Tasks</h2>
    <p>I am going to put a data grid here.</p>
    <div id="task-data"></div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#task-data').kendoGrid({
                toolbar: ["create", "save", "cancel"],

                columns: [
                    {
                        field: "Id",
                        width: 44,
                        title: "ID"
                    }, {
                        field: "Description",
                    }, {
                        field: "Priority",
                        width: 110,
                        title: "Prio"
                    }, {
                        field: "IsComplete",
                        width: 90,
                        title: "Complete"
                    } , {
                        field: "CreatedOn",
                        width: 120,
                        title: "Created",
                        format: "{0:yyyy-MM-dd}"
                    }, {
                        command: ["destroy"], title: "", width: 120
                    }
                ],

                pageable: {
                    pageSize: 5
                },

                scrollable: true,
                editable: true,
                navigatable: true,
                sortable: true,

                dataSource: {
                    transport: {
                        read: {
                            url: "Handlers/TaskHandler.ashx",
                            dataType: "json",
                            type: "GET",
                        },
                        update: {
                            url: "Handlers/TaskHandler.ashx",
                            dataType: "json",
                            type: "PUT",
                        },
                        destroy: {
                            url: "Handlers/TaskHandler.ashx",
                            dataType: "json",
                            type: "DELETE",
                        },
                        create: {
                            url: "Handlers/TaskHandler.ashx",
                            dataType: "json",
                            type: "POST",
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { tasks: kendo.stringify(options.models) };
                            }
                        }
                    },

                    batch: true,

                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true },
                                Description: { type: "string", editable: true },
                                IsComplete: { type: "boolean", editable: true },
                                Priority: { type: "number", editable: true },
                                CreatedOn: { type: "date", editable: false, defaultValue: new Date() }
                            }
                        }
                    },
                }
            });
        });
    </script>

</asp:Content>
