Push send KendoGrid row from View to Controller on Button Click using AngularJS in ASP.Net MVC

mahesh213
 
on Aug 22, 2021 11:18 PM
Sample_158443.zip
584 Views

Hi,

my requirement is that after click of submit button only need to save details into database per each row i am going to uplaod files

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

can you please help me out this one

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 23, 2021 08:26 AM
on Aug 24, 2021 06:44 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 Add(IEnumerable<HttpPostedFileBase> files)
    {
        // Do saving task.
        return Content("");
    }

    [HttpPost]
    public ActionResult Save(List<Customer> customers)
    {
        foreach (Customer customer in customers)
        {
            // Do saving task.
            int id = customer.Id;
            string name = customer.Name;
            for (int i = 0; i < customer.Data.Split(',').Length; i++)
            {
                byte[] bytes = Convert.FromBase64String(customer.Data.Split(',')[i]);
                // Code for saving each uploaded file for the customer.
            }
        }
        return Content("Success");
    }

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

View

@{
    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 id="fuUpload" type="file" name="files" class="fileUpload" />'
                                + '<input id="hfData" type="hidden" class="hfData" />'
                        }
                    ],
                    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');
                            var hiddenData = $(this).find('.hfData');
                            $(fuUpload).kendoUpload({
                                multiple: true,
                                async: {
                                    saveUrl: '@Url.Action("Add", "Home")',
                                    autoUpload: true
                                },
                                upload: function (e) {
                                    var reader = new FileReader();
                                    reader.onload = function (e) {
                                        var bytes = e.target.result;
                                        if ($(hiddenData).val() == '') {
                                            $(hiddenData).val(bytes.replace('data:image/jpeg;base64,', ''));
                                        } else {
                                            $(hiddenData).val($(hiddenData).val() + "," + bytes.replace('data:image/jpeg;base64,', ''));
                                        }
                                    }
                                    reader.readAsDataURL(e.files[0].rawFile);
                                }
                            })
                        });
                    }
                };
            }

            $scope.OnSave = function () {
                var rows = [];
                // Loop through each row and send the hiddenfield with row data to controller.
                $.each($("#tblCustomers tbody tr"), function () {
                    var row = {};
                    row.Id = $(this).find('td').eq(0).find('.ng-binding').html()
                    row.Name = $(this).find('td').eq(1).find('.ng-binding').html()
                    row.Data = $(this).find('.hfData').val();
                    rows.push(row);
                });
                var post = $http({
                    method: "POST",
                    url: "/Home/Save",
                    dataType: 'json',
                    data: JSON.stringify(rows),
                    headers: { "Content-Type": "application/json" }
                });

                post.success(function (data, status) {

                });

                post.error(function (data, status) {
                    $window.alert(data.Message);
                });
            }
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions" id="tblCustomers"></kendo-grid>
    <input type="submit" value="Submit" ng-click="OnSave()" />
</body>
</html>