Kendo UI使用小小记

之因此说小小记，是由于我根本没有好好用它，只是正好前些日子接触了一下，以为还不错，随手记记~

契机

我从加入如今这个公司以来，半专业的承担了不少前端相关的事情，用过很多前端框架，也为框架和原生的页面写了很多部件和功能，对于IE系列浏览器的憎恶也与日俱增。“每一个程序员都有一个框架梦”，我一直也想着要写一个适用于本身和本身公司的前端框架，同事和领导有时候也会这么对我指望，而我本身很清楚，没有时间没有精力其实都是借口，最大的问题，仍是没有能力没有经验。

我是jQuery派，固然MooTools、Dojo等之类的也很棒，用jQuery只是机缘巧合，不过迄今为止它还很好用很够用，因此估计很长一段时间内我都会用下去的。jQuery的插件多的数不清楚，UI框架也不少不少，若是一会儿问我哪一个比较好，我可说不上来，不过有个挺冷门的jquerytools，很是小很是精致，感受还不错。可是它只是几个部件，功能太少（它其实也就是标榜html缺乏的几个功能控件而已），很差叫UI框架。像大型的jQuery UI，easyUI，DWZ等等，固然也都不错啦，至少我还作不出来。Kendo其实早有耳闻，一直没有用，此次快速制做一个小区管理系统后台，打算用这个来试试手。

感谢新买了一个博客控件，不然这些东西我大概只会写在Evernote里了 😉

过程

我并无用过Kendo的全部控件，Kendo也不是开源免费的，事实上若是真正用好像是要购买的，不过此次是试作学习，应该没事儿。它的官网上面能够免费下载Web的试用版，至于PHP/ASP/Java的Wrapper，我还真不太须要。

上手

Kendo的中文资料不多，好在官网上的例子比较全，文档也还足够，引入JS和CSS文件即可以工做了。并且这个框架竟然对IE7也提供支持，挺厉害的了（Bootstrap1也是从IE7开始，2就从IE9开始了，考虑海量的“低端用户”，在不影响总体效率的前提下，低版本浏览器的支持确定仍是欢迎的），我之前咋感受是HTML5的框架，难道记错了？

记录

• DataSource的增删改查必定使用JSON类型返回
  用jQuery的ajax功能，其实jQuery帮咱们作了不少事情，致使接触其余框架的时候可能会让一些不明就里的人不知所措。比方说，jQuery的AJAX上传时会自动打开“application/x-www-form-urlencoded”，这样上传的数据会很天然的被服务器解析，然而“Request Payload”才是最基本的类型，不少初用Angular.js的孩子就会被这事情搞得目瞪口呆 😉 一样的，jQuery会自动解析长得像JSON的返回内容，只要你告诉jQuery服务器会返回JSON数据，无论返回类型是plain/text仍是html什么的。然而KendoUI不行，他的DataSource是全部数据控件的基础，很厉害，可是它只接受application/json类型的返回，和jQuery处惯的孩子可能受不了，第一个坑~
• Upload的取消上传/带参数/取消初始化文件
  Upload组件的非刷新模式，能够检测文件的类型啊大小啥的，upload函数会在正式上传被执行作一些检查，若是不符合，能够取消上传。我这里习惯了jQuery的return false取消事件的写法。然而却没有效果，一度让我感受这东西是否是不靠谱？后来才发现，必须使用传入的事件参数上调用preventDefault才有用。。。这也算是个坑吧~
  还有，Upload能够初始化几个文件显示在文件列表上面，可是却没有提供方法修改文件列表？不得已只能使用remove去掉DOM，不够强大了。
• MultiSelect
  Kendo的Datasource至关复杂，我此次主要使用它的DataGrid部件，因此和Datasource打了很多交道。MultiSelect也是使用DataSource绑定显示候选项的，我没发现相似jQuery UI的“第二候选项”的功能。对中文来讲，实际上是很正常的功能，咱们只输入拼音字母，而后能够自动显示对应的候选项…… 暂未发现，由于没有好好看过文档~
  另外，我实际使用中发现有没法弹出自动补齐列表的状况，后来换了一种参数使用的方法，就行了，惋惜没有马上记录，如今有点回忆不起来了
• DataGrid除去图表，这个应该是KendoUI的精华所在吧。大量的企业应用其实就是增删改查，一个Grid所有搞定~ 并且还有外键绑定，详情页面，排序过滤功能，全均可以本地完成，配合快到不像话的Chrome浏览器，世界真是美好哇。不过KendoUI没有提供很好的方法实现国际化。。。写在参数里天然是能够，可是很是很是麻烦。语言文件的js只是日历的翻译，最后没办法，直接改了core，不更新就是了~追加一个，DataGrid上自定义command的图标能够用imageClass指定，文档上没有……