‫استفاده از ویجت آپلود KendoUI بصورت پاپ آپ

var product = {
    ProductId: 1001,
    ProductName: "Product 1001",
    Available: true,
    Filename: "Image02.png"
};

        var productCount = 100;
        var products = [];

        function datasourceFilling() {
            for (var i = 0; i < productCount; i++) {
                var product = {
                    ProductId: i,
                    ProductName: "Product " + i + " Name",
                    Available: i % 2 == 0 ? true: false,
                    Filename: i % 2 == 0 ? "Image01.png" : "Image02.png"
                };
                products.push(product);
            }
        }

        function makekendoGrid() {

            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model:
                        {
                            //id: "ProductId",
                            fields:
                            {
                                ProductId: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Available: { type: "boolean" },
                                ImageName: { type: "string", editable: false },
                                Filename: { type: "string", validation: { required: true } }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                editable: {
                    mode: "popup",
                },
                columns: [
                    { field: "ProductName", title: "Product Name" },
                    { field: "Available", width: "100px", template: '<input type="checkbox" #= Available ? checked="checked" : "" # disabled="disabled" ></input>' },
                    { field: "ImageName", width: "150px", template: "<img src='/img/#=Filename#' alt='#=Filename #' Title='#=Filename #' height='80' width='80'/>" },
                    { field: "Filename", width: "100px", editor: fileEditor },
                    { command: ["edit"], title: "&nbsp;", width: "200px" }
                ]
            });

            var grid = $('#grid').data('kendoGrid');
            grid.hideColumn(3);
        }

        function fileEditor(container, options) {

            $('<input type="file" name="file"/>')
                .appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "@Url.Action("Save", "Home")",
                        removeUrl: "@Url.Action("Remove", "Home")",
                        autoUpload: true,
                    },
                    upload: function (e) {
                        alert("upload");
                        e.data = { Id: options.model.Id };
                    },
                    success: function (e) {
                        alert("success");
                        options.model.set("ImageName", e.response.ImageUrl);
                    },
                    error: function (e) {
                        alert("error");
                        alert("Failed to upload " + e.files.length + " files " + e.XMLHttpRequest.status + " " + e.XMLHttpRequest.responseText);
                    }
                });
        }

        [System.Web.Mvc.HttpPost]
        public virtual ActionResult Save(HttpPostedFileBase file)
        {
            var exName = Path.GetExtension(file.FileName);
            var totalFileName = System.Guid.NewGuid().ToString().ToLower().Replace("-", "") + exName;
            var physicalPath = Path.Combine(Server.MapPath("/img"), totalFileName);
            file.SaveAs(physicalPath);
            return Json(new { ImageUrl = totalFileName }, "text/plain");
        }

        [System.Web.Mvc.HttpPost]
        public virtual ContentResult Remove(string fileName)
        {
            if (fileName != null)
            {
                var physicalPath = Path.Combine(Server.MapPath("/img"), fileName);
                System.IO.File.Delete(physicalPath);
            }

            // Return an empty string to signify success
            return Content("");
        }