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

mahesh213
 
on Oct 08, 2021 01:11 AM
622 Views

Hi,

Enable Disable TextBox inside KendoGrid based on condition using AngularJS and jQuery in ASP.Net MVC

in provided sample I am going to add one more Filed DOJ and after clicking of edit button need to select date from kendo datepicker

can you please help me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 09, 2021 12:49 AM
on Oct 09, 2021 12:51 AM

Refer below code.

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></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">
        $(function () {
            var data = [
                { "id": 1, "dateTime": 1420947900000 },
                { "id": 2, "dateTime": 1421034300000 },
                { "id": 3, "dateTime": 1421036100000 },
            ];
            $("#grid").kendoGrid({
                selectable: true,
                editable: "inline",
                columns: [
                    {
                        field: "dateTime",
                        title: "Date Time",
                        width: "200px", type: "number",
                        template: "#= kendo.toString(new Date(parseInt(dateTime)), 'MM/dd/yyyy hh:mm') #",
                        editor: dateTimeEditor2
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "170px" }
                ],
                dataSource: {
                    transport: {
                        read: function (e) {
                            e.success(data);
                        },
                        update: function (e) {
                            alert(e.dateTime);
                        },
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                dateTime: { type: "number" },
                            }
                        }
                    }
                }
            });
            function dateTimeEditor2(container, options) {
                $('<input type="text" />')
                    .appendTo(container)
                    .kendoDateTimePicker({
                        format: "MM/dd/yyyy hh:mm",
                        value: kendo.toString(new Date(options.model.dateTime), 'MM/dd/yyyy hh:mm')
                    });
            }
        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

Demo

For more details refer below link.

https://demos.telerik.com/kendo-ui/grid/editing-custom