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)' onclick='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中递归取子项。

其实，在项目中还会遇到这样那样的问题，这只是用的比较多的几个控件，希望对大家有帮助。