Kendo UI使用筆記

2022-01-13 16:45:51 字數 2088 閱讀 8582

上圖就是個典型的例子,opensendwin方法裡id,emergencytitle,emergencydetail 三個引數,後兩個引數是string型別,必須加雙引號,否則報錯,解決的方式就是加\"

都用的kenui 輔助方法寫的

定義模態框

@(html.kendo().window().name("sendwin")

.title("傳送").draggable(true)

.resizable(resiz=>resiz.enabled(false)

.minheight(900)

.minwidth(760)

.maxheight(900)

).visible(false)

.modal(true)

.width(800)

.height(680)

.content("")

)

定義事件彈出這個模態框:

function opensendwin(contentid,title,content),})

win.center().open();

}

語法很簡單,寫下來怕自己忘了(我是不是記憶力有問題)

一般的都得加上這三個方法  .

.scrollable(c => c.height("100%"))

.htmlattributes(new )

.events(c => c.databound("window.kendogridautoheightdatabound"))

一般要求的grid顯示正常的效果圖:

使用kendo ui中的grid經常會和datepicker一起用,選擇時間重新整理grid這個場景非常常見,具體的操作分為以下兩步

1. 在datasource的read方法中新增data事件,這個adddata的方法作用就是返回datepicker中的時間 事例:

.read(read => read.action("flowjson", "patrolflow", new ).data("adddata"));  

function adddata()

}

2.在datepicker中新增change事件pubchange  事例:

@(html.kendo().datepicker().name("checkdate").events(e=>e.change("pubchange")));
然後寫乙個pubchange事件,重新整理kendo ui grid

function pubchange()
kendo ui 中tabstrip使用的資料來自遠端,這個時候就得使用輔助方法loadcontentfrom了。可以傳遞引數。如下所示

@(html.kendo().tabstrip().name("tabstrip_#=employeeid#")

.items(tabstrip =>

).selected(true);

}).toclienttemplate()

)

.scrollable(c => c.height("100%"))

mvc輔助方法:

@(html.kendo().datepicker()

.name("monthpicker")

.start(calendarview.year)

.depth(calendarview.year)

.format("yyyy-mm")

.value("november 2011")

.htmlattributes(new )

)

js:

$("#monthpicker").kendodatepicker();
kendo ui grid中開啟編輯和新增模態框的標題和按鈕都是一樣,很明顯不對,所以我們要在edit事件中這樣修改

function onedit(e) 

else

}

Kendo UI系列開發使用筆記 01 簡單介紹

ps 接觸telerik出品的kendo ui系列已經快有一年了,使用過程中也在不斷踩坑填坑.這套ui用起來還是非常爽的,尤其asp.net mvc版的配合lambda表示式來配置引數非常流暢.這次對以前部落格整理與梳理下自己的知識結構.kendo ui是乙個強大的框架用於快速html5 ui開發....

KendoUI操作筆記

注意 使用grid篩選功能需要jqery2.2.4,否則會報錯。篩選 filterable true或 filterable grid隱藏某列 hidden true例子 grid繫結單擊雙擊事件 grid繫結單擊事件 gg.on click k grid content tr function g...

Vim 使用筆記

set hlsearch set nohlsearch 搜尋後清除上次的加亮 nohl nohlsearch 拷貝 很有用的一句話,規定了格式選項,讓它換行不自動空格 set formatoptions tcrqn set fo r set noautoindent 再 shift insert 正...