kendo grid inline创建datepicker值不会到达控制器

时间:2017-10-24 13:47:25

标签: javascript jquery asp.net-mvc telerik telerik-grid

我是Kendo的新手并使用带有内联编辑的kendo网格处理CRUD的任务,但是当我尝试插入数据时我遇到了创建操作的问题,日期字段不起作用 {1/1/0001 12:00Am} 对控制器的价值,我不知道这里发生了什么,因为我使用日期格式和日期选择器,但问题仍然存在。帮我解决这个问题谢谢。

网格代码为:

<script>
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({

            transport: {
                read: {
                    url: "/Home/LoadEmployeesAsyc",
                    dataType: "json"
                },
                update: {
                    url: "/Home/UpdateEmployeesAsyc",
                    dataType: "json"
                },
                destroy: {
                    url: "/Home/DelectEmployeesAsyc",
                    dataType: "json"
                },
                create: {
                    url: "/Home/CreateEmployeeAsyc",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: {type: "number"},
                        Name: {type: "string"},
                        Age: {type: "number"},
                        JoiningDate: {type: "Date"},
                        DepartmentId: {type: "number"},
                        profilePic: {type: "string"}
                    }
                }
            }
        }),
                $("#grid").kendoGrid({
            dataSource: dataSource,
            height: 550,
            sortable: true,
            pageSize: 10,
            groupable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            toolbar: ["create", "save", "cancel"],
            columns: [{
                    field: "Id",
                    title: "Employee Code"
                },
                {
                    field: "Name",
                    title: "Name"
                },

                {
                    field: "Age",
                    title: "Age"
                },

                {
                    field: "JoiningDate",
                    title: "Joining Date",
                    width: 100,
                    format: "{0:MM/dd/yyyy}",
                    editor: dateEditor
                },
                {
                    field: "DepartmentId",
                    title: "Department Code",
                },

                {
                    field: "ProfilePic",
                    title: "Picture",
                    template:
                            '<img height="50" width="50" src="../Content/Images/#:data.ProfilePic#"/>'
                },
                {command: ["edit", "destroy"], title: "&nbsp;", width: "250px"}],
            editable: "inline"
        });

    });

    function dateEditor(container, options) {
        $('<input type="text" name="JoiningDate" id="JoiningDate"/>')
                .appendTo(container)
                .kendoDatePicker({
                    format: "MM/dd/yyyy"
                });
    }
</script>

网格代码:

public JsonResult LoadEmployeesAsyc()
{
    var employees = employeeRepository.GetAll();
    return new JsonNetResult() { Data = employees };
}

public JsonResult CreateEmployeeAsyc(Employee employee)
{
    employeeRepository.Create(employee);
    var employees = employeeRepository.GetAll();
    return new JsonNetResult() { Data = employees };
}

Console snapshot

1 个答案:

答案 0 :(得分:0)

最后我找到了解决我问题的方法: 我已经使用parameterMap函数将日期转换为&#34; MM / dd / yyyy&#34; 格式

&#13;
&#13;
parameterMap: function (options, operation) {
                    if (operation != "read") {
                        var d = new Date(options.JoiningDate);
                        options.JoiningDate = kendo.toString(new Date(d), "MM/dd/yyyy");
                        return options;
                    }
                    
&#13;
&#13;
&#13; 将以下脚本放在模式模型

JoiningDate: { type: 'date', format: "MM/dd/yyyy" },

并在日期列中定义格式:

{
                           field: "JoiningDate",
                           title: "Joining Date",
                           format: '{0:MM/dd/yyyy}',
                           width: 100
                       },