پیشنیاز:
- بررسی ویجت Kendo UI File Upload
در مطلب قبل جزئیات استفاده از ویجت آپلود فریمورک قدرتمند Kendo UI عنوان شدند. در این مطلب قصد داریم طریقه‌ی استفاده از آن را به صورت پاپ آپ، در ویجت گرید Kendo بررسی کنیم.
مدل زیر را در نظر بگیرید:
و برای ایجاد یک دیتاسورس سمت کاربر برای گرید، یک منبع داده را با استفاده از مدل بالا تولید میکنیم:
سپس برای نمایش در گرید، سیم پیچی‌های لازم را انجام میدهیم:
همانطور که میبینید در ستون‌های گرید، یک ستون ImageName نیز اضافه شده‌است که به‌صورت تمپلیت تصویر محصول را نمایش میدهد. برای خود فیلد نیز از یک تمپلیت ادیتور که در ادامه تعریف خواهیم کرد استفاده کرده‌ایم:
برای آپلود فایل و حذف آن نیز اکشن‌های لازم را در سمت سرور مینویسم:
حاصل کار بصورت تصویر زیر نمایش داده شده است:
- بررسی ویجت Kendo UI File Upload
در مطلب قبل جزئیات استفاده از ویجت آپلود فریمورک قدرتمند Kendo UI عنوان شدند. در این مطلب قصد داریم طریقه‌ی استفاده از آن را به صورت پاپ آپ، در ویجت گرید Kendo بررسی کنیم.
مدل زیر را در نظر بگیرید:
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: " ", 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("");
} حاصل کار بصورت تصویر زیر نمایش داده شده است:
