telerik（kendoUI）常用控件使用

最近接觸了kendoUI的使用，在項目中邊學習邊使用，為了以後可以再用到便小記一下（這裡用的都是針對asp.net MVC,其實用我覺得用js的方法更靈活，不過MVC更簡潔）

1.最常用的估計就是grid的使用了。從項目中找個比較有代表性的。

@(Html.Kendo().Grid<CustomsProjectEx.Models.FL_File>
            ().Name("DocumentGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.字段名).Title("檔案名稱").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(c => c.字段名).Title("文檔類型").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(c => c.字段名).Title("檔案版本").Format("{0:0.00}").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound(c => c.字段名).Title("釋出時間").Format("{0:yyyy-MM-dd}").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound("").ClientTemplate("#=load(ID)#").Title("文檔下載下傳").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
            columns.Bound("").ClientTemplate("#=BrowseHistory(ID)#").Title("檢視曆史版本").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
           
            columns.Bound("").ClientTemplate("#=AddVersion(ID)#").Title("新增").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:center" });
                columns.Command(command => command.Custom("Show").Click("edit").Text("修改").HtmlAttributes(new { style = "height:30px; width:50px; valign:middle;" })).Width(80);
             columns.Command(command => command.Destroy().Text("删除")).Width(90);
          
        })

        .ToolBar(c =>
        {
            if (ViewBag.IsSoftwareAdmin == "true")//加角色必須是軟體管理者或者是系統管理者才能處理
            { c.Custom().Name("新增").HtmlAttributes(new { @onClick = "add(); return false;" }); }
        })
        .Editable(e => { e.DisplayDeleteConfirmation("确定要删除？"); })
        .Sortable(sort => sort.Enabled(false))
        .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
        .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("<span style="font-family: Arial, Helvetica, sans-serif;">方法名（也就是action名）</span><span style="font-family: Arial, Helvetica, sans-serif;">", "這裡放controller的名字").Data("這裡放一個js放法的名字用來為grid查詢傳參數用的"))</span>
        .Destroy(update => update.Action("方法名（也就是action名）", "這裡放controller的名字")).Model(model => model.Id(m => m.ID))
        )
)
           

下面說說一些用法，為開發找這裡的用法節省時間

（1）.Editable中的 .Editable(e => { e.DisplayDeleteConfirmation("确定要删除？"); })，如果應用了自帶的删除方法，删除的時候提示的是英文，在這裡修改後改為中文提示 

（2）.ClientTemplate("#=load(ID)#")自定義模闆。有時候想定義自己的表示樣式，例如想給這個列變為超連結。

使用方法，可以直接在模闆裡拼，但是我習慣隻寫個方法名，然後在js中定義方法：

//文檔下載下傳列項格式化
    function load(id) {
        return "<a href='javascript:void(0)' οnclick='loadDocument(\"" + id + "\")' >下載下傳</a>";
    }
           

（3） columns.Command(command => command.Custom("Show").Click("edit").Text("修改").HtmlAttributes(new { style = "height:30px; width:50px; valign:middle;" })).Width(80);

對于我們習慣使用js方法借助ajax來實作自己的一些處理，那麼我們就可以自定義按鈕并設定方法。例如這裡使用了edit方法，

（4）Format("{0:yyyy-MM-dd}")  定義類字段時間顯示格式，沒什麼好說的，就像我們使用easyui那樣，隻是把easyui中farmat中的一部分顯示功能都放到模闆中去了。這裡的Format我沒怎麼用，隻是簡單的格式化。

（5）如果使用了自帶的增删改方法，那麼可以再datasource中定義這些方法，例如删除功能：.Destroy(update => update.Action("delete", "Document")).Model(model => model.Id(m => m.ID))

上面有解釋，這裡的update.Action對應去找那個controller與action ，也可以使用update.Url()直接寫action的整個路徑。後面的Model中傳參數。

另外如果向背景傳參數後可以用kendoui自己的對象[DataSourceRequest]DataSourceRequest request來接收參數。

接下來簡單說說其他控件的用法

（2）button

@(Html.Kendo().Button().Name("btnSearch").Content("查詢<i class='fa fa-search'></i>").Events(ev => ev.Click("queryGrid")).HtmlAttributes(new { @class = "btn btn-sm blue", @style = "font-size:13px;" }))
           

大體一看就知道什麼意思了，在這裡如果你沒有在HtmlAttributes中定義id，那麼id就會預設是name的名字。

@Html.Kendo().Button().Name("SelectPerson").Content("選擇...").Events(c => c.Click("addExpert")).HtmlAttributes(new { type = "button" }).Enable(ViewBag.type != "show")
           

而且這個button還發現個特點，如果沒有定義button的類型，那麼預設會是sumit類型的，是以每次點選按鈕都會送出一遍，如果你在form表單用了多個這樣的按鈕，那麼你就會遇到問題，是以這裡我定義了類型為button，表示沒有送出概念。

（3） TextBox

@Html.Kendo().TextBoxFor(model => model.EPName).HtmlAttributes(new { placeholder = "請填寫姓名", required = "required", validationmessage = "必填字段", style = "width:120px;" })
           

這個沒什麼好說的了，就是個textbox。看到驗證之後順便把驗證的代碼也附上。

var container = $("#formExpertInfo");//表單id 注意要引入驗證js
        kendo.init(container);
        container.kendoValidator({
            rules: {

            }
        });
           

(4) ComboBox

@(Html.Kendo().ComboBox().Name("ProjectSet").Filter("contains").Placeholder("請選擇").DataTextField("Text").DataValueField("Value").BindTo(ViewBag.XXXX))
           

可以綁定背景傳過來的數值，例如這裡用的viewBag傳的值。同時也可以異步讀取。

(5) DropDownList

@(Html.Kendo().DropDownListFor(model => model.FileType).Name("FileType").AutoBind(true).Filter("contains").DataTextField("Text").DataValueField("Value").BindTo(ViewBag.XXXX))
           

這個控件跟combobox基本一樣。

（6）日期控件 DatePicker

@(Html.Kendo().DatePicker().Name("XXXXXX").Format("yyyy-MM-dd").Value(Model.XXXXXX))
           

(7)數值控件 NumericTextBox

@(Html.Kendo().NumericTextBox<double>().Value(Model.Version).Name("Version").Step(0.01).Min(0).Format("n2").HtmlAttributes(new { required = "required", validationmessage = "必填字段" }))
           

Format是控制兩位小數。step指增長間隔

（8）上傳控件Upload

@(Html.Kendo().Upload().Name("files").Async(a => a.Save("Upload", "Document").Remove("Remove", "Document").AutoUpload(false)).Multiple(false).Events(e => e.Success("onSuccess").Upload(@<text>
                            function(e) {
                            e.data = { id:'@ViewBag.projectId',documentId:'@Model.ID' };
                            }
           

這個是上傳控件，save跟remove裡面對應的是controller與action，同理這裡也可以換成url，隻是要用saveurl了。

AutoUpload屬性是控制是否自動上傳。Multiple代表是否支援多個檔案上傳。

其中可以帶好多事件，這裡使用了onSuccess事件，為上傳後傳回該檔案的儲存路徑儲存到表中。 如果想向檔案儲存方法中傳參數，可以使用Upload方法。

（9）樹控件TreeView

@(
 Html.Kendo().TreeView().Name("treeview").HtmlAttributes(new { @class = "demo-section" }).DataTextField("Name").LoadOnDemand(true)
 .DataSource(dataSource => dataSource.Read(read => read.Url("/xx/xx/xxx"))).Events(c => c.Select("SetSelectedValue"))
)
           

在這裡的樹要比easyui中更簡單，前台這些代碼就可以了。

背景隻用寫個接收id的方法。

public JsonResult GetExpertList(string id)
        {//定義樹結構的model，一般都包括id,type,parentid,haschildren等幾個字段
           

if (id == null)
            {
              // 當id為空的時候就是頂級菜單
            }
            else
            {
               就是傳回以該id為parentid的子項。
            }
            return Json(lstResult, JsonRequestBehavior.AllowGet);
        }
           

這裡是異步加載，如果是全部加載，那麼就在else中遞歸取子項。

其實，在項目中還會遇到這樣那樣的問題，這隻是用的比較多的幾個控件，希望對大家有幫助。