開發 Kendo UI for JQuery 時遇到的問題

markdown
最近公司導入這個框架，盡量要用它來做功能，
第一眼看上去覺得不錯，簡單功能做都很快，
不過要加上細節時問題就出來了，用一篇文章來記錄。
版本:2017 R3

#CRUD資料來源 datasource使用transport方法時，不可混用function/object，要一致

出現的bug現象為:
在local做的資料處理，刪除/更新之後loading動畫不會解除
ref:官網文件 https://docs.telerik.com/kendo-ui/framework/datasource/crud

#前端驗證validation自訂驗證方法bug
前端驗證validation，寫在datasource的schema裡每個欄位field下，除了預設的方法如required外，自訂的方法會在每個欄位做驗證時被觸發，所以要加上
```
if (input.is("[name='該欄的名稱']")){ //驗證邏輯.... } ```
來確保進來的是該欄而不是其他欄，但這樣就變成每個欄位可能都要自己寫一個funciton，就會變得很亂。
而且若是多個欄位有相同的驗證類別，也不太能寫共用方法，
例如有三個自訂input格式的金額欄位，驗證規則都是數字且3位數內，
自訂是因為不要預設的小數點與上下箭頭，所以要用自訂，
但因為這個自訂驗證方法最後需要手動塞入錯誤訊息:
```
 $(input).attr("data-自訂驗證名稱-msg", "最多10位數!");
```
以這個例子，這三個欄位都得自己寫一個自訂驗證方法，把中間的邏輯抽出，
然後外面把function name傳入，如下:
```
//schema.model.fields< fields: { Article: { type: "number", validation: { required: { message: "必填!" }, ArticleMaxlength: function (input) { return vldRuleMaxLength(input,"ArticleMaxlength"); } } }, //另外寫的方法 function vldRuleMaxLength(input, vldFunctionName) { if ((input.is("[name='Article']") || input.is("[name='Section']") || input.is("[name='Item']")) && input.val().length > 3) { $(input).attr("data-" + vldFunctionName + "-msg", "最多3位數!"); return false; } return true; } ```

ref:stackoverflow https://stackoverflow.com/questions/24671452/kendo-grid-column-field-validation

#前端驗證validation，若在自訂editor的欄位使用required，需要在自訂editor的方法裡面把required加入元素TAG內，只用預設屬性沒有作用
ref:官網討論區 http://www.telerik.com/forums/validator-not-firing-for-custom-popup-editor

#前端驗證的BUG
在grid popout editor做新增編輯時的驗證，先輸入符合驗證條件的值，再改成錯誤的值來觸發第一次錯誤訊息後，
再改回之前的值，會發現驗證方法不會被觸發，
目前的處理方法只想到按下存檔前再手動處理一次驗證，只是UX很怪
ref:http://www.telerik.com/forums/validation-in-grid's-schema-only-fire-once

#前端驗證用remote類型(做AJAX)的處理
只能做同步ajax，不能做非同步，不然出錯時無法return false給validator，錯誤訊息就秀不出來，
目前也沒支援非同步

# Grid中使用template做自訂的新增編輯窗版型很麻煩
在grid做popup類型的編輯新增layout時，若不想用預設的一欄一行排版，就要用獨立區塊的template來套在editor上，
ref:官網文件-editable.template那段 https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#editable.template-string
但是官網很難找到你應該要用什麼class來做這些排版，雖然說有引用bootstrap css，
可是套用bootstrap的grid system類css上去，也跟原來單純用BS有差別，都要做調整，
這些k-xxx-class也沒有看到有像BS一樣有個官網區域做介紹，目前還是得用google找討論，然後挖出討論串中的code裡可用的部分拿來用，

#grid的source用Kendo MVC的類別DataSourceRequest取進來值要用post
get抓不到東西會null

#kendoWindow在close之後需要重bind，就要在失效(deactivate)事件做銷毀
ref: https://www.telerik.com/forums/destroy-window-on-close
情境:按下GRID上tool bar某custom按鈕後用$("<div></div>")的方式建立window，
以mvvm方式去kendo bind內容，key欄位有綁blur事件讓他做ajax帶值，
第一次可以work，但在按下右上角x關閉後再次打開就沒有blur事件了，
解決方式是在kendoWindow({})設定中加入deactivate事件處理，
把這個window給destory掉就可以了

#Telerik Report的HTML5的report viewer串date picker的時區問題
kendo ui的datepicker接上REPORT VIEWER有個時區的問題，
在GRID系統裡抓API或送API的時間資料都是正常的，
但送到report viewer的API，會沒有處理時區，造成送去後端時變成GMT+0的時間，
C#後端可以用toLocalTime來轉回，
但報表上的變數沒辦法用toLocalTime，
暫時先在report design裡的變數expression裡面用AddHour(value,hour) +8來處理。

#Kendo UI datasource的date類型資料再轉回asp.net web api2時要用符合格式的日期字串轉回
情境:一個grid配上獨立的datasource操作，不是用grid裡面的datasource給值，也沒有auto bind，
schema裡面有個欄位是date型別，USER不會去編輯他；
在call API後，此欄的值還是WEB API吐出的日期字串格式，`yyyy-MM-ddThh24:mm:ss`，
但在編輯別的欄位後，就因為datasource的schema是date，而轉型為日期物件，
可是在做更新ajax時，並不能直接把日期物件放在data:
```
$.ajax({ url: "your api url", type: "POST", dataType: "json", data: {date=new Date()}, cache: false, async: true, }); ```
後端API會抓不到，所以還是要把日期轉成日期字串，
轉日期字串的方法根據這篇建議是用 `.toISOString()` 來轉