2017年10月13日 星期五

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


最近公司導入這個框架,盡量要用它來做功能,
第一眼看上去覺得不錯,簡單功能做都很快,
不過要加上細節時問題就出來了,用一篇文章來記錄。
版本: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位數內,
自訂是因為不要預設的小數點與上下箭頭,所以要用自訂,
但因為這個自訂驗證方法最後需要手動塞入錯誤訊息:

&nbsp;$(input).attr("data-自訂驗證名稱-msg", "最多10位數!");<br>


以這個例子,這三個欄位都得自己寫一個自訂驗證方法,把中間的邏輯抽出,
然後外面把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按鈕後用$("

")的方式建立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() 來轉