Implement FileUpload control in KendoGrid row using AngularJS in ASP.Net MVC

mahesh213
 
on Aug 17, 2021 11:50 PM
Sample_303589.zip
1153 Views

Hi

I have 3 fileds in Id, Name and UploadFiles

currently my requirement is that need to uplaod multple files for each row and need to send those records to controller from view 

could you please help me 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope) {
            ApplyKendoGrid();
            function ApplyKendoGrid() {
                $scope.mainGridOptions = {
                    dataSource: { transport: { read: "/Home/GetCustomers/" }, pageSize: 5 },
                    pageable: { refresh: true, pageSizes: [2, 25, 50] },
                    groupable: false,
                    sortable: true,
                    columns: [
                        { field: "Id", title: "Id" },
                        { field: "Name", title: "Name" },
                        {
                            field: "UploadFiles",

                            template: '<input type=file style="width:240px"  />'
                        },
                    ],
                };
            }
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 19, 2021 08:02 AM

Hi mahesh213,

Refer below code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetCustomers()
    {
        List<Customer> customers = new List<Customer>();
        customers.Add(new Customer { Id = 1, Name = "John Hammond" });
        customers.Add(new Customer { Id = 2, Name = "Mudassar Khan" });
        customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews" });
        customers.Add(new Customer { Id = 4, Name = "Robert Schidner" });
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
    {
        // Do saving task.
        return Content("");
    }

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

HTML

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
    <script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["kendo.directives"]);
        app.controller("MyController", function ($scope) {
            ApplyKendoGrid();
            function fileUploadTemplate(dataItem) {
                return '<input id="fuUpload" type="file" name="files" class="fileUpload" />';
            };
            function ApplyKendoGrid() {
                $scope.mainGridOptions = {
                    dataSource: { transport: { read: "/Home/GetCustomers/" }, pageSize: 5 },
                    pageable: { refresh: true, pageSizes: [2, 25, 50] },
                    groupable: false,
                    sortable: true,
                    columns: [
                        { field: "Id", title: "Id" },
                        { field: "Name", title: "Name" },
                        {
                            field: "UploadFiles",
                            template: fileUploadTemplate
                        }
                    ],
                    dataBound: function (e) {
                        var grid = e.sender;
                        var items = e.sender.items();
                        items.each(function (e) {
                            var dataItem = grid.dataItem(this);
                            var fuUpload = $(this).find('.fileUpload');
                            $(fuUpload).kendoUpload({
                                multiple: true,
                                async: {
                                    saveUrl: '@Url.Action("Save", "Home")',
                                    autoUpload: true
                                },
                                upload: function (e) {
                                    // Do any task of uploaded file.
                                }
                            })
                        });
                    }
                };
            }
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>