Pass (Send) kendoDatePicker selected value from View to Controller using AngularJS and jQuery in ASP.Net MVC

mahesh213
 
on Oct 13, 2021 11:28 PM
Sample_116941.zip
465 Views

after clicking of update button it's displaying like above

as per my requirement need to display selected date but in my case it's displaying 01-01-0001

Bind datepicker control on KendoGrid row edit using AngularJS and jQuery in ASP.Net MVC

Id, Name values are passing properly

proeblm is that only Date Field Value is not passing from view to controller

can you please help me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 18, 2021 07:33 AM
on Oct 18, 2021 07:40 AM

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", Date = DateTime.Now });
        customers.Add(new Customer { Id = 2, Name = "Mudassar Khan", Date = DateTime.Now.AddDays(-5) });
        customers.Add(new Customer { Id = 3, Name = "Suzanne Mathews", Date = DateTime.Now.AddDays(-6) });
        customers.Add(new Customer { Id = 4, Name = "Robert Schidner", Date = DateTime.Now.AddDays(-3) });
        return Json(customers, JsonRequestBehavior.AllowGet);
    }

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

    public JsonResult UpdateCustomer(Customer customer)
    {
        return null;
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <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, $window, $http) {
            $scope.mainGridOptions = {
                dataSource: {
                    type: "json",
                    transport: {
                        read: { url: "/Home/GetCustomers" },
                        update: { url: "/Home/UpdateCustomer" }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { editable: false, nullable: true, type: "number" },
                                Name: { editable: true, nullable: true, type: "string" },
                                Date: { editable: true, nullable: true, type: "date" }
                            }
                        }
                    },
                    pageSize: 4,
                    serverPaging: false,
                    serverSorting: false
                },
                editable: "inline",
                sortable: true,
                pageable: true,
                resizeable: true,
                columns: [
                    { field: "Id", title: "Id", width: "50px" },
                    { field: "Name", title: "Name", validation: { required: true } },
                    {
                        field: "Date",
                        title: "Date Time",
                        width: "200px",
                        format: "{0:MM/dd/yyyy}",
                        editor: function (container, options) {
                            $('<input name="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                                .appendTo(container).kendoDatePicker({
                                    change: function (e) {
                                        options.model.Date = this._oldText;
                                    }
                                });
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ]
            };
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions" id="tblCustomers"></kendo-grid>
</body>
</html>