Browse by Tags

閒聊：不想走在「最前端」， WebForm 開發者也該學的技能

就用這篇鬼故事當開場吧！ 在 2016 年学 JavaScript 是一种什么样的体验？ 這幾年 HTML5 火紅，前端開發技術發展如黃河氾濫一發不可收拾，開發框架百家齊嗚，眼花瞭亂不知如何下手就算了，更要命的是市場主流每兩年就轉一次風向，兩年前我才含淚從 Knockout 轉到 Angular ，現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去，連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...

Posted 08 November 2016 09:39 PM 由 Jeffrey | 12 comment(s) 37,674

Filed under: ASP.NET MVC, HTML5, Kendo UI, knockoutjs, AngularJS

為Kendo UI NumericTextBox加上超出範圍警示

網頁要用到數字輸入欄位我習慣用Kendo UI的 NumericTextBox 解決，可以設上下限，有調整鈕，還能用上下鍵調數字，該有的都有，但有個小問題－當使用者輸入值超過上下限，NumericTextBox只默默將它改成Max或Min，沒有任何提示，使用者可能沒察覺輸入數字被改掉，導致爭議。 在Telerik討論區找到 相關討論 ，Telerik RD確認NumericTextBox目前版本不提供超出範圍事件。由於沒察覺數字被改可能造成的爭議不小（跟錢有關），專案規格提出「數字超過範圍時需提醒使用者...

Posted 01 December 2015 07:25 AM 由 Jeffrey | with no comments 4,619

Filed under: Kendo UI

KendoGrid+Angular顯示大量資料的效能問題

接獲使用者反應，某個使用KendoGrid顯示大量資料的網頁，用IE檢視的話速度慢到嚇人。聞此言，馬上打開IE11測試，果真嚇得我差點閃了兩滴… 也太慢了吧！ 先交代問題情境，專案使用Angular搭配Kendo UI開發，順理成章使用Kendo UI提供的Angular Directive，寫成<div kendo-grid …>，資料筆數偏多，大約一千多到兩千筆，基於KendoGri的強大彈性及高複雜度，處理起來多耗點時間倒也合理，但這個案例在IE的表現與期望出入頗大，值得調查。...

Posted 04 November 2015 10:48 PM 由 Jeffrey | 8 comment(s) 8,785

Filed under: Kendo UI, AngularJS

KendoGrid＋Angular模版＋欄位凍結 造成列高異常

Kendo UI 支援 Angular ，手上 Angular 寫的專案幾乎都用 Kendo UI 網頁控制項刻介面。在 KendoGrid 的欄位設定中，欄位模版也可以嵌入 Angular 語法，挺好用的，如以下的例子： 將第一欄的template設定為字串"{{dataItem.CostCenter}}({{dataItem.CostCenterName}})"，KendoGrid將執行Angular繫結，在欄位顯示"分公司代碼(分公司名稱)"。第二欄的template則使用另一種做法...

Posted 03 October 2015 07:29 AM 由 Jeffrey | with no comments 5,541

Filed under: Kendo UI, AngularJS

讓刪除確認通吃confirm及jQuery.Deferred

最近在寫的元件有個「彈出對話框經使用者確認再刪除」的需求，原本是小事一椿，但之前介紹過 使用自訂確認對話框取代window.confirm 的技巧已廣泛應用在專案裡，某些時候也可能只用window.confirm就打發，問題就變複雜了。 二者最大的差異是前者（$.kendoConfirm）為非同步執行，刪除動作需放在jQuery Deferred.promise()的done()方法；window.confirm則為內建同步指令，瀏覽器會等待使用者回應才往下執行，故用 if 判斷 true/false...

Posted 18 June 2015 12:06 AM 由 Jeffrey | 3 comment(s) 8,773

Filed under: jQuery, Kendo UI

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 PM 由 Jeffrey | with no comments 2,517

Filed under: Kendo UI

NG筆記24-KendoAutoComplete自動完成之花式應用

對於Kendo UI AutoComplete的Client端應用，過去的印象還停留在「提供字串陣列作為資料來源」、「指定contains、startswith、endswith進行比對」、「提示項目跟帶入欄位值都來自字串陣列」、「不能限定比對吻合項目上限」，感覺不如 jQuery自動完成 彈性。如以下範例： Live Demo 若要做到更特殊的比對邏輯或想限制提示筆數，倒是可用serverFiltering實現，將輸入關鍵字以AJAX方式交給伺服器端程式比對再傳回提示項目結果。但對SPA及打算包成App的情境...

Posted 22 March 2015 11:30 AM 由 Jeffrey | with no comments 7,235

Filed under: Kendo UI, AngularJS

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 PM 由 Jeffrey | with no comments 5,253

Filed under: Kendo UI

【茶包射手日記】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 PM 由 Jeffrey | with no comments 8,165

Filed under: jQuery, Kendo UI

程式範例-為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 AM 由 Jeffrey | with no comments 8,054

Filed under: Kendo UI

解決Kendo UI NumericTextBox注音輸入法數字輸入問題

自己用是倉頡輸入法，Kendo UI數字欄位( NumericTextBox )一直用得很開心，直到同事回報: NumericTextBox配上IE瀏覽器，使用注音輸入法時無法用鍵盤數字區(鍵盤右方的數字盤)輸入數字，使用Chrome或Firefox則無此問題。[ Bug示範 (用IE+注音輸入法可重現問題)] 追進原始碼，判斷問題出在NumericTextBox的keydown事件，使用注音輸入法時，數字盤的按鍵代碼在IE與其他瀏覽器可能不同導致差異。原本已經捲好袖子要開始Hacking，福至心靈想到另一個巧妙解法...

Posted 09 August 2013 09:17 PM 由 Jeffrey | with no comments 6,612

Filed under: Kendo UI

Kendo UI AutoComplete一次搜尋多欄

專案用到Kendo UI的 自動完成 ，提示資料的物件陣列存在Client端，資料有多個欄位，希望做到任一個欄位包含關鍵字就顯示，AutoComplete有個filter參數，設定為"contains"就可以做到"包含"就算數，但搜尋對象參數dataTextField卻只能指定單一欄位，無法一次查詢多欄。 有個解決辦法是自行在物件上將多個欄位另外併成一欄，例如以下的codePage物件，textForSearch屬性等於代碼加空白加名稱: var $code...

Posted 08 August 2013 10:36 PM 由 Jeffrey | 5 comment(s) 10,049

Filed under: Kendo UI

使用自訂確認對話框取代window.confirm

專案規格有一條 機車 要求: 對於刪除或覆寫資料前的確認程序，希望以自訂風格的確認對話框取代簡陋的window.confirm()。 舉例來說，按鈕後原本要透過window.confirm()請使用者確認後再執行，現在要改用自訂HTML元素呈現確認文字、按鈕進行確認，就如以下改用Kendo UI Window實作確認對話框的效果: 用HTML打造自訂對話框並在適當時機顯示是小事一椿，較有挑戰性的部分是原本window.confirm()執行為同步式，程式碼會停住等使用者回應再繼續往下走。想依confirm...

Posted 03 August 2013 10:36 AM 由 Jeffrey | 6 comment(s) 34,112

Filed under: CODE, Kendo UI

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 PM 由 Jeffrey | with no comments 10,895

Filed under: Kendo UI

Bootstrap!

Bootstrap 是近來紅透半邊天的網頁設計無敵懶人包，號稱是網頁攻城獅的救星，連我這種先天不足後天失調，美感殘缺到可以領殘障手冊的設計麻瓜，只要下載安裝CSS及JS檔，照著範例三兩下就可以打造出質感頗佳的網頁，猶如流浪漢忽然能拉小提琴般令人稱奇，要說化腐朽為神奇，莫此為甚。(還沒見識過Bootstrap的朋友，可以看這篇 介紹 ， Bootstrap網站 上有頗為詳細的示範與教學，好消息是MVP Bruce已將全站翻成 正體中文版 ，要入手的同學切勿錯過。另外Bootstrap網站也有人翻成簡體中文版...

Posted 12 June 2013 06:57 AM 由 Jeffrey | 5 comment(s) 72,547

Filed under: Kendo UI, Bootstrap

搜尋