Question

我的DataSource中有一个可以为空的DateTime属性 - ExpectedReceiptDate，我正在网格中实现内联编辑：

<?php
$image_id = $successful_students_item['successful_students_block_image_id'];
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true);
?>

<img alt="<?php echo esc_attr( $image_alt ); ?>" src="<?php echo $successful_students_item['successful_students_block_image']; ?>"/>

}）;

编辑很简单：

$(document).ready(function() {
 $("#grid").kendoGrid({
     dataSource: {
         transport: { 
            //setup transport
        },
         schema:
         {
             data: 'Data', total: 'Total', errors: 'Errors',
             model:
             {
                 id: 'Id',
                 fields: {
                     Id : { editable: false, type: 'number' },
                     Name : { editable: false, type: 'string' },
                     ExpectedReceiptDate : { 
                        editable: true, 
                        format: "{0: dd/MMM/yyyy}",
                        nullable: true,
                        type: 'date'
                    }
                 }
             }
         },
         requestEnd: function(e) {
             if (e.type == 'update') {this.read();}
         },
         serverFiltering: true,
         serverSorting: true
     },
     editable: {
         mode: "inline"
     },
     columns: [
     {
         field: "Id",
         title: "ID"                                
     },{
         field: "Name",
         title: "Name"
     },{
         field: "ExpectedReceiptDate",
         title: "Date",
         editor: DateEditor, 
     },
     {
         title: "&nbsp;",
         command: ["edit"],
         width: 200
     }
     ]
 });

当编辑拾取日期的行时，例如2017年2月24日，我收到了一个错误：

模型状态ExpectedReceiptDate无效，值'（日期）FLE标准时间'对ExpectedReceiptDate无效

我尝试为该字段添加自定义验证：

function DateEditor(container, options) {
                         $('<input required name="' + options.field + '"/>')
                            .appendTo(container)
                             .kendoDatePicker({format: "dd/MMM/yyyy"});
                      }

验证通过，输入的日期值很好地解析为Date obj，但模型状态错误仍然存在。是什么导致模型状态错误？

Answer 1

尝试将schema.model定义中的格式说明符移动到列定义，因为格式不是datasource.schema.model的配置选项，而是grid.columns（http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.format），这是哪种类型的感觉日期格式是一种表达问题。

使用列上的格式说明符，您将不需要自定义编辑器，因为内置日期编辑器将自动使用列配置中的格式。如果要进行非标准的其他自定义，则只需要自定义编辑器。

另外，我不确定requestEnd中的“this.read（）”调用是否必需。

演示：http://dojo.telerik.com/@Stephen/oNOja

Answer 2

事实证明，模型状态无效的错误是服务器的响应，我没有注意到这一点，并认为这是客户端问题。但无论如何，内联日期编辑的问题仍然存在，最后我在这里找到了答案：

Passing dates from Kendo UI to ASP.NET MVC

MVC在映射JSON参数时使用“/ Date（...）/”格式，但在映射表单数据时不使用。默认情况下，Kendo将参数作为表单传递。

处理此日期解析问题的一种方法是使用Kendo UI   DataSource将JSON数据发送到服务器而不是表单数据。然后是MVC   将自动将“/ Date（...）/”正确转换为DateTime。

发送JSON格式数据的替代方法是将数据保留为   表单数据，这是默认值，而只是更改   格式化我们的日期。

所以我做了以下事情：

transport:{
  update: ..,
  parameterMap: function(data, operation) {
                if (operation === "update") {
                    data.ExpectedReceiptDate = formatDate(data.ExpectedReceiptDate);
                }
                return data;
            }
}

Answer 3

由于链接已损坏并且找不到任何可行的解决方案，因此以下所有方法都不适合我。

所以......在我的情况下（这是我可以让它工作的唯一方法），我的一个网格字段上有一个更改功能（远离物理保存按钮#AutoSaveIsTheFuture）

 schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        
                        fields: {
                            ...
                            ItemDate: { editable: true, type: "date", validation: { required: true }},
                            ...
                            Amount: { editable: true, type: "decimal", validation: { required: true }}
                        }
                    }
                },

...

 columns: [{
...

                    {
                        field: "ItemDate",
                        title: "Item Date",
                        format: "{0:yyyy/MM/dd}",
},
                        field: "Amount",
                        title: "Amount",
                        format: "{0:n2}",
                        editor: customAmountEditor
                        
                    }],

...

function customAmountEditor(container, options)
        {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoNumericTextBox({
                    change: SaveLineItem 
                    
                });
        }

通过 AJAX POST 方法将字段发送到我的控制器，我执行以下操作：

 function SaveLineItem(e)
    {
        var element = e.sender.element;
        var row = element.closest("tr");
        var grid = $("#GridName").data("kendoGrid");
        var dataItem = grid.dataItem(row);

        var dateField = row.find("input[name='ItemDate']");
        var dateValue = dateField.val();

 $.ajax({
            cache: false,
            type: "POST",
            url: "@Html.Raw(Url.Action("MethodName", "ControllerName"))",
             data: {
                 "Id": dataItem.Id,
                 "ItemDateString": dateValue,
                ...
                "Amount": dataItem.Amount,
            },
            success: function (data)
            {
                AddRow();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status === 410) {
                    alert(errorThrown);
                }
            }
         });
    }

它在控制器端作为字符串接收，但至少其格式正确（“yyyy/mm/dd”）并且易于使用 Convert.ToDateTime(ItemDateString) 进行转换；

希望这会有所帮助。（如有乱，请见谅）

Kendo ui网格内联日期编辑，从Kendo UI传递日期到ASP.NET会导致无效的ModelState

3 个答案: