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指定，文档上没有……