从Kendo DatePicker Inside Kendo Grid中选择的日期格式

Question

我有通过Jquery生成的kendo网格.我里面有一个可编辑的日期列.正在进行编辑,问题在于我在数据选择器中选择日期后的数据格式化.

网格:

 divSearchGrid.kendoGrid({
                dataSource: {
                    transport: {
                        read: function (options) {
                            $.ajax({
                                type: "POST",
                                url: urlSearch,
                                data: paramsSearch,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (result) {
                                    var data = result.d;
                                    if (data != null) {
                                        if (data.length > 0) {
                                            structuredData = [];
                                            for (var i = 0; i < data.length; i++) {
                                                var objStructured = {};
                                                objStructured[defaultTaskColumnAray[0]] = data[i].TaskID
                                                objStructured[defaultTaskColumnAray[1]] = data[i].TaskDescription
                                                objStructured[defaultTaskColumnAray[2]] = data[i].AssignedToName
                                                objStructured[defaultTaskColumnAray[3]] = data[i].StatusName
                                                objStructured[defaultTaskColumnAray[4]] = data[i].ServiceName
                                                var customFieldList = data[i].CustomFieldColumnGrid;
                                                if (customFieldList.length > 0) {
                                                    for (var j = 0; j < customFieldList.length; j++) {
                                                        if (customFieldList[j].ColumnType == '5' || customFieldList[j].ColumnType == '6') {
                                                            objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnCustomFieldValueBit;
                                                        }
                                                        else {
                                                            objStructured[customFieldList[j].ColumnUniqueName] = customFieldList[j].ColumnFieldValue;
                                                        }
                                                    }
                                                }
                                                objStructured[defaultTaskColumnAray[5]] = data[i].GUID
                                                structuredData.push(objStructured)
                                            }
                                            options.success(structuredData)
                                        }
                                        else {
                                            divSearchGrid.html('<h4>No records To Display</h4>')
                                            // To stop the Auto Refresh of the grid if there are no results
                                            isEditing = true;
                                        }
                                    }
                                    else {
                                        divSearchGrid.html('<h4>Some Error Occured</h4>')
                                    }
                                }
                            })
                        }
                    },
                    schema: {
                        model: {
                            id: "GUID",
                            fields: {
                                TaskID: { editable: false, nullable: true },
                                ServiceName: { editable: false, nullable: true },
                                TaskDescription: { editable: false, nullable: true }
                            }
                        }
                    },
                    pageSize: 10
                },
                batch: true,
                edit: function (e) {

                    // To stop the Auto Refresh of the grid on edit
                    isEditing = true;
                },
                groupable: true,
                scrollable: true,
                dataBound: GridDataBound,
                sortable: true,
                reorderable: true,
                resizable: true,
                selectable: "row",
                toolbar: "<div><img id='imgExportDoc' style='margin-left:15px' onclick='ExportData(1);' title='Export in Word Format' src='images/doc-Icon.png'/><img id='imgExportExcel' onclick='ExportData(2);' style='margin-left:15px' title='Export in Excel Format' src='images/xls-Icon.png'/></div>",
                autoSync: true,
                editable: true,
                navigatable: true,
                columns: columnList,
                columnMenu: true,
                filterable: true,
                columnMenu: {
                    sortable: false
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
            });

假设在编辑日期选择器关闭后,列的格式是mm/dd/yyyy我想要与编辑前相同的格式.

我的编辑器模板代码:

$('<input name="' + options.field + '" data-bind="value:' + options.field + '"/>')
                       .appendTo(container)
                       .kendoDatePicker({ format: "mm/dd/yyyy" })

在动作的快照下面:

Befor Editing :(报价截止日期)

编辑后:

现在您可以看到格式的差异,我想要编辑之前的日期格式.请提供解决方案.

Answer 1

我可以在你的代码中看到你有一个名为列列表的变量.我不确切地知道如何声明"Quote Due"列,所以我只是在这里使用常识和经验.

首先,您必须确保架构定义知道"Quote Due"列的类型为date.然后,在columnList内部,您必须指定相关列的格式.

{
    field: "QUOTE_DUE",
    title: "Quote Due",
    format: "{0:d}"
}

有关如何定义自定义日期格式的信息,请参见http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting.您将使其与日期选择器的格式相匹配.