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

mahesh213
 
on Oct 12, 2021 07:04 AM
Sample_165077.zip
510 Views

Hi, 

DoB Value is not binding properly from view to controller after clicking of edit button

Implement date picker control in KendoGrid using jQuery in ASP.Net MVC

Can you please help me

@{
    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/UpdateCustomers" },
 
                    },
                    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" },
                     
                    {
                        field: "Date",
                        title: "Date Time",
                        width: "200px",
                        format: "{0:MM/dd/yyyy}",
                        editor: dateTimeEditor2
                    },
 
 
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ],
 
                dataBound: function (e) {
                     
                },
                
            };
            //datetime picker
            function dateTimeEditor2(container, options) {
 
                    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                        .appendTo(container)
                        .kendoDatePicker();                 
            }
            
        })
    </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 Oct 13, 2021 04:30 AM

Hi mahesh213,

Refer below sample.

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 UpdateCustomers(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/UpdateCustomers" }
                    },
                    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" },
                    {
                        field: "Date",
                        title: "Date Time",
                        width: "200px",
                        format: "{0:MM/dd/yyyy}",
                        editor: function (container, options) {
                            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                                .appendTo(container)
                                .kendoDatePicker();
                        }
                    },
                    {
                        title: 'Action',
                        command: [{ name: "edit", text: "Edit", iconClass: "k-icon k-i-hyperlink-open" }]
                    }
                ],
                dataBound: function (e) {

                }
            };
        })
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <kendo-grid k-options="mainGridOptions"></kendo-grid>
</body>
</html>

Screenshot