@{
    Layout = null;
}

<link href="https://kendo.cdn.telerik.com/themes/8.0.1/default/default-main.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.100/styles/kendo.default-v2.min.css" />
<script src="~/Scripts/kendo.all.min.js"></script>

<div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var crudServiceBaseUrl = "/Kendo",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/IndexGrid",
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/UpdateUserDetails",
                            type : "POST",
                            dataType: "json"
                        },
                        //destroy: {
                        //    url: crudServiceBaseUrl + "/detailproducts/Destroy",
                        //    dataType: "jsonp"
                        //},
                        parameterMap: function (options, operation) {
                            debugger;
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    autoSync: true,
                    //aggregate: [{
                    //    field: "TotalSales",
                    //    aggregate: "sum"
                    //}],
                    //group: {
                    //    field: "Category.CategoryName",
                    //    dir: "desc",
                    //    aggregates: [
                    //        { field: "TotalSales", aggregate: "sum" }
                    //    ]
                    //},
                        schema: {
                        model: {
                            id: "UserLink",
                            fields: {
                                UserLink: { editable: false, nullable: true },
                                UserName: { type: "string", editable: true },
                                Mobile: { type: "number", editable: true },
                                Email: { type: "string", editable: true },
                                DOB: { type: "date", editable: true },
                                CourseOpt: { type: "string", editable: true, nullable: true },
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                columnMenu: {
                    filterable: false
                },
                height: "100%",
                editable: "popup",
                pageable: true,
                sortable: true,
                navigatable: true,
                resizable: true,
                reorderable: true,
                groupable: true,
                filterable: true,
                dataBound: onDataBound,
                toolbar: ["excel", "pdf", "search", "create", "save", "cancel"],
                pdfExport: function (e) {
                    const width = e.sender.wrapper.width();
                    e.sender.wrapperClone.width(width);
                    e.sender.wrapperClone.addClass('k-clone');
                },
                columns: [
                    {
                        field: "UserName",
                        title: "UserName",
                        width: 300
                    },
                    {
                        field: "Mobile",
                        title: "Mobile"
                    },
                    {
                        field: "Email",
                        title: "Email ID",
                        width: 130,
                    },
                    {
                        field: "DOB",
                        title: "DOB",
                        editor: datePickerEditor,
                        width: 125
                    }, {
                        field: "CourseOpt",
                        title: "CourseOpt",
                        editor: clientCourseEditor,
                        width: 200,
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: 120 }],
                      saveChanges: function (e) {
                        // Manually sync changes
                        dataSource.sync();
                    }
            });
        });

        function clientCourseEditor(container, options) {
            $('<input required name="CourseOpt">')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField: "Title",
                    dataValueField: "CourseLink",
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Kendo/CourseDtls",
                                dataType: 'json'
                            }
                        }
                    }
                });
        }

        function datePickerEditor(container, options) {
            $('<input data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDatePicker({
                    format: "dd/MM/yyyy"
                });
        }

        function onDataBound(e) {
            debugger;
            var grid = this;
            grid.table.find("tr").each(function () {
                var dataItem = grid.dataItem(this);
                kendo.bind($(this), dataItem);
            });
        }

        //function returnFalse() {
        //    return false;
        //}
    </script>
</div>