Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha Touch.jQuery Mobile前者效果较好,收费,学习成本高:后者效果一般,但兼容性好,免费,学习成本低,会jquery的同学上手快.其实还有一个夹在两者之间的框架叫Kendo UI. Kendo是日本语意:剑道:剑术.他们的logo就是一个武士形象,给人感觉真有本领,犀利.kendoui效…

在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重要的接口,尽管jQuery已经使得界面项目变得更加的容易,但是当网页设计时网格依旧是有一点玄乎.Kendo UI 中的Grid控件包含了快速模版引擎以及内置的数据源,使得我们可以非常快速的创建和运行网格. 创建Grid网格 在页面上首先需要一个网格,一个简单的描述了列表头的表格就可以了,如果你要自己…

伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Angular 2  Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Telerik account , 如果你现在还没有这…

富文本编辑的组件有很多,大名鼎鼎的KENDO UI中自然也有,但是默认功能中,只能包含网络图片, 而如果要实现本地上传图片,KENDO UI也提供了相应的功能,但必须实现KENDO规定的多个接口, 而且功能过于丰富,有时项目并用不到,所以我想利用自定义按钮来实现,下面就是实现过程: 1.先在JSP中定义textarea标签,作为富文本编辑框的占位. <div class="form-group"> <label class="col-xs-2 control…

kendo-ui的treeView节点(node)点击时  可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件. 可是需求上需要实现:每次点击相同的节点,都要触发该select事件. 这个需求,是和kendo的select事件相悖的. 最开始想通过 外部手动触发select事件,但是发现并不能做到. 后来做了如下配置: $("#treeview").kendoTreeView({ dataSource: [ treeData ], s…

Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件>中,已经对在Kendo UI Web中如何创建自定义组件的方法和步骤做了一些的讲解,本文将完成所有的内容. 模板绘制控件 通过Kendo UI的Templates渲染进行HTML输出,Kendo UI Templates允许你编译HTML和注入数据或表达式到被评…

在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 现在如果想要实现一个数据源组件或是MVVM aware模式,需要再执行一些其他的步骤. 在下面将会创建一个DataSource aware组件,要使DataSource aware有数据源,首先需要在DataSource基础对象上使用create convenience方法. 创建或初始化数据源: that.…

Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中将会详细的进行说明. 基础步骤: 首先在kendo.ui namespace中扩展基础的Widget类,还可以创建一些变量来保存值用于向下缩小路径. 扩展基础组件: (function($) {    // shorten references to variables. this is bette…

Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo UI中的网格控件提供了一种方法,来帮助用户通过使用配置选项来本地化用户的界面. 工具栏控件的本地化 toolbar: [ //name - name of the available commands, text - text to be set on the button { name: "crea…

转自 http://blog.csdn.net/dj2008/article/details/45313805 最近的项目里用到了Kendo UI.这货很好很强大,但可惜官方文档组织的并不是很好,有很多配置非常坑,需要自己去发掘. 一.版本 首先,是版本的区别.简单的来说,免费版的Kendo UI是不包含DataViz组件的,即没有图表功能,并且也没有服务端的Helper,比如MVC的wapper,所以,免费版只有js和css,不会给你dll的. 收费版,比如for MVC的这个版本,除了包含d…

Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的JSON数据或者是远程的数据. 创建Kendo Grid: 1.从现有的HTML表格元素中,用HTML定义组.行.和数据. 2.从 HTML div 元素中,用配置定义列和行,并绑定到数据. 从现有的HTML表格元素创建Kendo Grid:>>>示例代码 初始化Kendo Grid $(do…

kendo ui template的用法: Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便. 模板语法 Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代. 用三种方式使用#语法: 显示字面量 #=# 显示HTML元素…

前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoDataViz Demo 主要提供了每个部分UI组件的具体用法,比如Web Demos 包含了下面 Mobile Demo 包含下面示例: DataViz Deom 包含下面示例: 在正式开发Kendo Web应用前,需要把每个例子一一过一遍,对Kendo提供的UI组件的功能有个大概的了解,再看看本系列教程…

Kendo UI开发总结 By Gloomyfish on 2013-04-25 在Grid中支持分页刷新:            scrollable: {virtual : true }, 在Grid的DataSource中添加分页支持: serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 50, 在grid中显示列(显示/隐藏菜单)与过滤支持菜单 filterable: true, column…

Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Angular 2 Kendo UI for Angular 被打包成独立的多个 NPM package,在 Progress NPM 之下 ( https://registry.npm.telerik.com/ ), 要想访问它,你需要一个激活的 Te…

1.概述: 在网上kendo ui教程中示例在演示的时候引用的css样式为kendo.common.min.css与kendo.default.min.css这两个外部样式,大家有没有发现,这两个样式在选中的时候会出现一个黄色的选中条,很难看(当然排除配色需要用到的黄色的时候),多数情况下我们使用kendo ui是不会使用这个黄色的选中效果的,如何修改呢? 2.引入CSS样式: <link href="css/kendo.common.min.css" rel="sty…

kendo ui 中grid 算是最长用的控件之一,当使用分页效果时,我们要传递分页参数与自己定义的参数如: var dataSource = new kendo.data.DataSource({ transport: { read : { url : "对应后台路径", contentType : "application/json", type : "POST", dataType : "json" }, paramet…

Kendo UI 支持开发Web应用,前面介绍的SPA,也支持开发移动应用,至于使用 HTML5 + JavaScript + CSS开发移动是不是一个好的选择不在本文的讨论之中.Kendo UI Mobile提供了一种快速开发跨手机平台的方法(Kendo UI可以使得这种Web应用在界面上看起来和本地应用非常类似).如果你的移动应用需要数据的支持,了解一些JSON方面计的知识也是必须的.借助于PhoneGap 等工具可以HTML5打包成移动平台的本地应用,并支持使用JavaScript访问一些…

本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事件).例如: 1 <div id="view"> 2     <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show des…

kendo ui单击取消编辑数据buttongrid数据缩减.原因grid编辑数据追打datasorce于data寻找阵列数据的存在.假定有不会加入,加入缺席. 首先一个样本: html代码: <div id="smsReceivesGird" style="width: 500px;"></div> js代码: <pre name="code" class="html">$(functio…

Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等. 准备开始 下面创建一个本地数据源. 1 var movies = [ { 2       title: "Star Wars: A New Hope", 3       year: 1977 4    }, { 5      title: "Star Wars: The…

Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便. 模板语法 Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代. 用三种方式使用#语法: 显示字面量 #=# 显示HTML元素 #:# 执行任意的Javascript代码…

Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充.所有动画可以反向显示从而可以方便的实现元素的显示和隐藏. 本篇介绍了Kendo UI特效的概要,完整的文档可以参考API文档 准备开始 所有Kendo UI 特效都是通过kendo.fx JQuery 选择器封装来创建,每个封装支持显示多种特效.例如: 1 <div id="foo"…

Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Validator可以参见API 文档. HTML 5 表单校验 HTML5 的一项重要功能是HTML 5 表单校验属性, 通过设置限制属性为HTML输入设置输入类型,值域等,然后由浏览器来检查输入是否合法. 支持的几种规则有: 必填域 正规表达式规则 最大,最小值域 HTML 5 数据类型( 如EMail,…

本攻略适用于了解的kendo UI 的基本语法的人使用.如果还不了解Kendo UI的基本语法,请大力观摹Demo ,并自己动用写几个控件. 1.获取Kendo UI的控件实体,不必存成全局变量.     在控件初始化后,想要调用控件的实体,只需要  $("#id").data("kendoGrid") 如果是treeView ,data就是kendoTreeView,以此类推   2.获取dataSource也不必使用全局变量 var grid = $("…

1.Grid中的列字段绑定模板字段方法参数传值字符串加双引号: 上图就是个典型的例子,openSendWin方法里Id,EmergencyTitle,EmergencyDetail 三个参数,后两个参数是string类型,必须加双引号,否则报错,解决的方式就是加\" 2.Kendo UI 打开模态框读取远程数据: 都用的KenUI 辅助方法写的 定义模态框 @(Html.Kendo().Window().Name("sendWin") .Title("发送"…

背景: 以前用 telerik ui做的grid现在又要换成kendo ui,不过说句实话kendo ui真的比telerik好多,可以说超级升级改头换面.当然用的mvc的辅助方法,以前的telerik ui 选中行的事件是 .OnRowSelect("SelectRow") ,换成kendo ui 选中行的事件是   .Events(p=>p.Change("SelectRow")) 实现: kendo ui  grid 选中行的事件是  .Events(p…

在一次使用ASP.NET MVC进行开发的Web项目中,我们需要用户界面控件来帮助实现界面的大部分功能.由于项目比较复杂,我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用户界面组件进行评估.下面笔者跟大家分享一下评估控件的经验,希望对其他选购控件的朋友提供一个参考和借鉴. 当时我们评估这两款控件主要考察:控件的功能.易用性.与当前项目的集成时间和自动代码完成的时间. 控件功能首先我们比较了Kendo UI和DevExpress当前所提供的控件,并大致评估了控件的功能…

1. Kendo的继承 varPerson= kendo.Class.extend({...}); var person = new person(); var Parent = kendo.Class.extend({}); http://docs.telerik.com/kendo-ui/tutorials/inheritance-with-kendoui 2.Kendo MVVM http://docs.telerik.com/kendo-ui/getting-started/framew…

jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp 英文原文:jQuery Mobile versus Kendo UI –Brotherhood Differentiated 返回原文 Query Mobile and Kendo UI are the popular JavaScript frameworks that   form the ba…