telerik（kendoUI）常用控件使用

标签：telerik   kendoui   mvc   grid   常用控件   

最近接触了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>";
    }

对于我们习惯使用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;" }))

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

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

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

            }
        });

 @(Html.Kendo().ComboBox().Name("ProjectSet").Filter("contains").Placeholder("请选择").DataTextField("Text").DataValueField("Value").BindTo(ViewBag.XXXX))

可以绑定后台传过来的数值，例如这里用的viewBag传的值。同时也可以异步读取。

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

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

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

（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"))
)

后台只用写个接收id的方法。

 public JsonResult GetExpertList(string id)
        {//定义树结构的model，一般都包括id,type,parentid,haschildren等几个字段

            if (id == null)
            {
              // 当id为空的时候就是顶级菜单
            }
            else
            {
               就是返回以该id为parentid的子项。
            }
            return Json(lstResult, JsonRequestBehavior.AllowGet);
        }

telerik（kendoUI）常用控件使用

标签：telerik   kendoui   mvc   grid   常用控件   

原文地址：http://blog.csdn.net/woaishuoshihuo/article/details/46535231