$.ajax({
        url: "api/Lookups",
        data: { lookupName: "Employees" },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function (data) {
            employees = data;

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.responseText);
        }
    });

    $.ajax({
        url: "api/Lookups",
        data: { lookupName: "Trucs" },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        async: false,
        success: function (data) {
            trucs = data;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.responseText);
        }
    });

    $("#gridCheckList").kendoGrid({
        columns: [
            { template: '<a href="\\#!/Checklist/#=Id#">Review</a>', field: "Id", title: "#", width: 80, sortable: false },
            { field: "CheckDate", title: "Date", template: "#=  kendo.toString(kendo.parseDate(CheckDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #", width: 90 },
            { field: "TruckUnit", title: "Truck", values: trucs, width: 60 },
            { field: "PCCode", title: "Party Chief", values: employees },
            { field: "OdometerReading", title: "Odometer KM" },
            { field: "TotalQuestion", title: "Questions" },
            { field: "AnsweredQuestion", title: "Answered" },
            { field: "NoQuestion", title: "No Aswers" },
            {
                field: "Completed", title: "Completed",
                template:
                "# if (Completed) { #" +
                "<span class='glyphicon glyphicon-star' aria-hidden='true'></span>" +
                "# }" +
                "#" +
                "# if (!Completed) { #" +
                "<span class='glyphicon glyphicon-star-empty' aria-hidden='true'></span>" +
                "# }" +
                "#"

            }
        ],
        autoBind: false,
        pageable: {
            refresh: true,
            pageSizes: true,
            info: true,
            numeric: true,
            previousNext: true
        },
        resizable: true,
        dataSource: {
            type: "webapi",
            transport: {
                idField: "Id",
                read: {
                    url: "api/VehicleCheckLists",
                    dataType: "json"
                }
            },
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        CheckDate: { type: "date" },
                        TruckUnit: { type: "string" },
                        PCCode: { type: "string" },
                        CheckedBy: { type: "string" },
                        OdometerReading: { type: "number" },
                        ASSTCode: { type: "string" },
                        TotalQuestion: { type: "number" },
                        AnsweredQuestion: { type: "number" },
                        NoQuestion: { type: "number" },
                        Completed: { type: "boolean" }
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                var data = eval("(" + XMLHttpRequest.xhr.responseText + ")");
                toastr.error("Something went wrong (" + data.ExceptionMessage + ")");
                console.log(data.ExceptionMessage);
            }
        },
        editable: false,
        sortable: true,
        filterable: true
    });