2017-02-24 294 views
0

我有我的數據源可爲空的DateTime屬性 - ExpectedReceiptDate,我在網格中實現內聯編輯:劍道UI電網在線日期編輯,從劍道UI傳遞日期ASP.NET導致無效的ModelState

$(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: " ", 
     command: ["edit"], 
     width: 200 
    } 
    ] 
}); 

});

編輯器很簡單:

function DateEditor(container, options) { 
         $('<input required name="' + options.field + '"/>') 
          .appendTo(container) 
          .kendoDatePicker({format: "dd/MMM/yyyy"}); 
         } 
編輯的行拿起日期例如,當24 /月/ 2017年我得到了一個錯誤

無效的模型狀態ExpectedReceiptDate,值「(日期)FLE標準時間」是無效的ExpectedReceiptDate

我已嘗試添加自定義驗證該字段:

function ExpectedReceiptDateValidator(input){      
         if (input.is("[name='ExpectedReceiptDate']") && input.val() != "") { 
          try { 
           var date = kendo.parseDate(input.val(), "dd/MMM/yyyy"); 
           if(!date) 
            return false;         
          } catch (err) { return false;}       
          console.log('res', true); 
         }       
         return true; 
        } 

驗證通過後,輸入的日期值被很好地解析到Date obj中,但模型狀態錯誤仍然存​​在。 什麼導致模型狀態錯誤?

回答

0

嘗試將格式說明符從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

+0

感謝,是requestEnd不需要 –

0

事實證明無效的模型狀態的錯誤是服務器的響應,我沒有注意到,並認爲這是一個客戶端的問題。 但無論如何,內聯編輯此問題仍然存在,我終於在這裏找到了答案:

Passing dates from Kendo UI to ASP.NET MVC

MVC uses the 「/Date(…)/」 format when mapping JSON parameters, but not when mapping form data. By default, Kendo passes the parameters as a form.

One way to handle this date parsing issue is to have the Kendo UI DataSource send JSON data to the server instead of form data. Then MVC will properly convert 「/Date(…)/」 to a DateTime automatically.

The alternative to sending JSON formatted data is to leave our data as form data, which is the default, and instead just change the formatting of our dates.

所以,我做了以下內容:

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