(function ($) {
    "use strict";
    $("#basicScenario").jsGrid({
        width: "100%",
        filtering: true,
        editing: true,
        inserting: true,
        sorting: true,
        paging: true,
        autoload: true,
        pActionSize: 15,
        pActionButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
        controller: db,
        fields: [{
                name: "Image",
                itemTemplate: function (val, item) {
                    return $("<img>").attr("src", val).addClass("blur-up lazyloaded").css({
                        height: 50,
                        width: 50
                    }).on("click", function () {
                        $("#imagePreview").attr("src", item.Img);
                        $("#dialog").dialog("open");
                    });
                },
                insertTemplate: function () {
                    var insertControl = this.insertControl = $("<input>").prop("type", "file");
                    return insertControl;
                },
                insertValue: function () {
                    return this.insertControl[0].files[0];
                },
                align: "center",
                width: 50
            },
            {
                name: "Name",
                type: "text",
                width: 100
            },
            {
                name: "Price",
                type: "number",
                width: 50
            },
            {
                name: "Status",
                type: "text",
                width: 50
            },
            {
                name: "Category",
                type: "text",
                width: 50
            },
            {
                type: "control"
            }
        ]
    });
})(jQuery);