Browse by Tags

閒聊:不想走在「最前端」, WebForm 開發者也該學的技能
就用這篇鬼故事當開場吧! 在 2016 年学 JavaScript 是一种什么样的体验? 這幾年 HTML5 火紅,前端開發技術發展如黃河氾濫一發不可收拾,開發框架百家齊嗚,眼花瞭亂不知如何下手就算了,更要命的是市場主流每兩年就轉一次風向,兩年前我才含淚從 Knockout 轉到 Angular ,現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去,連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...
為Kendo UI NumericTextBox加上超出範圍警示
網頁要用到數字輸入欄位我習慣用Kendo UI的 NumericTextBox 解決,可以設上下限,有調整鈕,還能用上下鍵調數字,該有的都有,但有個小問題-當使用者輸入值超過上下限,NumericTextBox只默默將它改成Max或Min,沒有任何提示,使用者可能沒察覺輸入數字被改掉,導致爭議。 在Telerik討論區找到 相關討論 ,Telerik RD確認NumericTextBox目前版本不提供超出範圍事件。由於沒察覺數字被改可能造成的爭議不小(跟錢有關),專案規格提出「數字超過範圍時需提醒使用者...
Posted 01 December 2015 07:25 AMJeffrey | with no comments 2,447
Filed under:
KendoGrid+Angular顯示大量資料的效能問題
接獲使用者反應,某個使用KendoGrid顯示大量資料的網頁,用IE檢視的話速度慢到嚇人。聞此言,馬上打開IE11測試,果真嚇得我差點閃了兩滴… 也太慢了吧! 先交代問題情境,專案使用Angular搭配Kendo UI開發,順理成章使用Kendo UI提供的Angular Directive,寫成<div kendo-grid …>,資料筆數偏多,大約一千多到兩千筆,基於KendoGri的強大彈性及高複雜度,處理起來多耗點時間倒也合理,但這個案例在IE的表現與期望出入頗大,值得調查。...
KendoGrid+Angular模版+欄位凍結 造成列高異常
Kendo UI 支援 Angular ,手上 Angular 寫的專案幾乎都用 Kendo UI 網頁控制項刻介面。在 KendoGrid 的欄位設定中,欄位模版也可以嵌入 Angular 語法,挺好用的,如以下的例子: 將第一欄的template設定為字串"{{dataItem.CostCenter}}({{dataItem.CostCenterName}})",KendoGrid將執行Angular繫結,在欄位顯示"分公司代碼(分公司名稱)"。第二欄的template則使用另一種做法...
Posted 03 October 2015 07:29 AMJeffrey | with no comments 3,273
Filed under: ,
讓刪除確認通吃confirm及jQuery.Deferred
最近在寫的元件有個「彈出對話框經使用者確認再刪除」的需求,原本是小事一椿,但之前介紹過 使用自訂確認對話框取代window.confirm 的技巧已廣泛應用在專案裡,某些時候也可能只用window.confirm就打發,問題就變複雜了。 二者最大的差異是前者($.kendoConfirm)為非同步執行,刪除動作需放在jQuery Deferred.promise()的done()方法;window.confirm則為內建同步指令,瀏覽器會等待使用者回應才往下執行,故用 if 判斷 true/false...
Posted 18 June 2015 12:06 AMJeffrey | 3 comment(s) 5,446
Filed under: ,
Unable to Modify KendoAutoComplete Selected Value
After selecting a hint item in KendoAutoComplete, I can't change selected text by backspace key.  It will be restored to the original selected value repeatly until you select all text and type a different charactor.  This bug will be fixed...
Posted 28 May 2015 08:18 PMJeffrey | with no comments 1,584
Filed under:
NG筆記24-KendoAutoComplete自動完成之花式應用
對於Kendo UI AutoComplete的Client端應用,過去的印象還停留在「提供字串陣列作為資料來源」、「指定contains、startswith、endswith進行比對」、「提示項目跟帶入欄位值都來自字串陣列」、「不能限定比對吻合項目上限」,感覺不如 jQuery自動完成 彈性。如以下範例: Live Demo 若要做到更特殊的比對邏輯或想限制提示筆數,倒是可用serverFiltering實現,將輸入關鍵字以AJAX方式交給伺服器端程式比對再傳回提示項目結果。但對SPA及打算包成App的情境...
Posted 22 March 2015 11:30 AMJeffrey | with no comments 4,990
Filed under: ,
CODE-客製kendoGrid小計標題
專案需求: kendoGrid需依指定欄位分群加總並依預設格式顯示小計。 例如,資料有Color、Size、Count三欄,報表需呈現SUM(Count) GROUP BY Color的小計結果。 kendoGrid支援群組化(Grouping),參考 API文件 在DataSource定義group,並為Color及Count column定義groupFooterTemplate,便可完成分群統計並加入小計列(即上圖所示)。 [Live Demo] var items = [ { Color...
Posted 20 February 2014 08:19 PMJeffrey | with no comments 3,902
Filed under:
【茶包射手日記】jQuery.css()傳入數字或字串值的差異
KendoUI由2013.2.716升級到2013.3.1119後,出現kendoWindow指定位置無效的狀況。問題程式碼為$("#w").kendoWindow({ position: { top: 6, left: 6 } }),跟 官方文件 範例相同,原本運作良好,元件升級後失效。推測與元件版本有關,先使用JS偵錯工具找出kendoWindow的position相關邏輯,再比較新舊版kendo.web.js,發現以下差異: KendoUI 2013.3.1119新加入的position...
Posted 05 February 2014 10:04 PMJeffrey | with no comments 6,739
Filed under: ,
程式範例-為KendoGrid標題列加入群組標題
同事出的考題: KendoGrid的標題列要如何合併多欄加上群組標題? 以下圖為例,就是要在Car Make、Car Model標題上方增加群組標題Model,為Category、Air Conditioner加上Spec群組標題。實務上這是頗常見的需求,但不在KendoGrid內建支援之列,哇哈哈哈,快樂的jQuery Hacking時間又來囉! Kendo UI所產生的HTML、CSS還蠻有條理的,所以程式不難寫,我寫了一個小函式,會自動找到KendoGrid的標題列,依mergeOptions參數的指示...
Posted 12 October 2013 10:01 AMJeffrey | with no comments 6,272
Filed under:
解決Kendo UI NumericTextBox注音輸入法數字輸入問題
自己用是倉頡輸入法,Kendo UI數字欄位( NumericTextBox )一直用得很開心,直到同事回報: NumericTextBox配上IE瀏覽器,使用注音輸入法時無法用鍵盤數字區(鍵盤右方的數字盤)輸入數字,使用Chrome或Firefox則無此問題。[ Bug示範 (用IE+注音輸入法可重現問題)] 追進原始碼,判斷問題出在NumericTextBox的keydown事件,使用注音輸入法時,數字盤的按鍵代碼在IE與其他瀏覽器可能不同導致差異。原本已經捲好袖子要開始Hacking,福至心靈想到另一個巧妙解法...
Posted 09 August 2013 09:17 PMJeffrey | with no comments 5,185
Filed under:
Kendo UI AutoComplete一次搜尋多欄
專案用到Kendo UI的 自動完成 ,提示資料的物件陣列存在Client端,資料有多個欄位,希望做到任一個欄位包含關鍵字就顯示,AutoComplete有個filter參數,設定為"contains"就可以做到"包含"就算數,但搜尋對象參數dataTextField卻只能指定單一欄位,無法一次查詢多欄。 有個解決辦法是自行在物件上將多個欄位另外併成一欄,例如以下的codePage物件,textForSearch屬性等於代碼加空白加名稱: var $code...
Posted 08 August 2013 10:36 PMJeffrey | 5 comment(s) 7,832
Filed under:
使用自訂確認對話框取代window.confirm
專案規格有一條 機車 要求: 對於刪除或覆寫資料前的確認程序,希望以自訂風格的確認對話框取代簡陋的window.confirm()。 舉例來說,按鈕後原本要透過window.confirm()請使用者確認後再執行,現在要改用自訂HTML元素呈現確認文字、按鈕進行確認,就如以下改用Kendo UI Window實作確認對話框的效果: 用HTML打造自訂對話框並在適當時機顯示是小事一椿,較有挑戰性的部分是原本window.confirm()執行為同步式,程式碼會停住等使用者回應再繼續往下走。想依confirm...
Posted 03 August 2013 10:36 AMJeffrey | 6 comment(s) 25,131
Filed under: ,
Kendo UI內建圖示清單
Kendo UI內建了一組圖示,若網頁已參照kendo.common.min.css以及kendo.default.min.css(或其他主題),只需加入SPAN元素並指定k-icon及k-i-*樣式,就可在網頁插入Kendo UI圖示,例如: <span class="k-icon k-i-calendar"></span> 沒有在Kendo UI網站找到像Bootstrap一樣的 圖示清單 ,便決定自己做一張,有需要的朋友請自行參考: 這裡有 JSBin線上版...
Posted 16 July 2013 08:36 PMJeffrey | with no comments 8,148
Filed under:
Bootstrap!
Bootstrap 是近來紅透半邊天的網頁設計無敵懶人包,號稱是網頁攻城獅的救星,連我這種先天不足後天失調,美感殘缺到可以領殘障手冊的設計麻瓜,只要下載安裝CSS及JS檔,照著範例三兩下就可以打造出質感頗佳的網頁,猶如流浪漢忽然能拉小提琴般令人稱奇,要說化腐朽為神奇,莫此為甚。(還沒見識過Bootstrap的朋友,可以看這篇 介紹 , Bootstrap網站 上有頗為詳細的示範與教學,好消息是MVP Bruce已將全站翻成 正體中文版 ,要入手的同學切勿錯過。另外Bootstrap網站也有人翻成簡體中文版...
Posted 12 June 2013 06:57 AMJeffrey | 5 comment(s) 63,967
Filed under: ,
更多文章 下一頁 »

搜尋

Go

<March 2017>
SunMonTueWedThuFriSat
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication