kendo | 易学教程

Web UI开发神器—Kendo UI for jQuery数据管理之分组

阅读更多关于 Web UI开发神器—Kendo UI for jQuery数据管理之分组

Kendo UI for jQuery R3 2019 SP1试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。默认情况下，禁用Kendo UI Grid的分组功能。入门指南要启用分组，请将groupable选项设置为true。结果网格在其标题中公开一个新的区域，使用户可以按列队网格数据进行分组。要将数据按多列分组，用户可以将所需的列拖到分组标题中。 $("#grid").kendoGrid({ groupable: true // Other configuration. }); 要对分组内容进行排序，请单击分组标签。要切换上一个示例中分组数据的排序顺序，请单击Name。通过单击相应标题组旁边的箭头，也可以将每个单独的组从其展开状态切换到折叠状态。图1：启用分组功能的网格图2：数据按姓氏分组的网格与行模板一起使用行模板明确定义行标记，而分组要求您更改行标记。要同时使用这两个功能，请在行模板中包含一个脚本，该脚本根据现有组的数量添加其他单元格。 $(document).ready

Web UI开发神器—Kendo UI for jQuery数据管理之网格排序

阅读更多关于 Web UI开发神器—Kendo UI for jQuery数据管理之网格排序

Kendo UI for jQuery R3 2019 SP1试用版下载 Kendo UI 目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。本文主要介绍如何使用Kendo UI for jQuery数据管理中的网格排序功能，默认情况下，禁用网格排序。 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <script src="..

Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

阅读更多关于 Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

Kendo UI for jQuery最新试用版下载 Kendo UI 目前最新提供 Kendo UI for jQuery 、 Kendo UI for Angular 、 Kendo UI Support for React 和 Kendo UI Support for Vue 四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。编辑是Kendo UI网格的基本功能，可让您操纵其数据的显示方式。 Kendo UI Grid提供以下编辑模式：批量编辑内联编辑弹出式编辑自定义编辑批量编辑网格使您能够进行和保存批量更新。要在网格中启用批处理编辑操作，请将数据源的批处理选项设置为true。 <!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script>

HTML5 UI框架Kendo UI Web自定义组件（一）

阅读更多关于 HTML5 UI框架Kendo UI Web自定义组件（一）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Kendo UI Web 包含数百个创建HTML5 web app的必备元素，包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在Kendo UI Web中如何创建自定义组件呢，在下面的文章中将会详细的进行说明。基础步骤：首先在kendo.ui namespace中扩展基础的Widget类，还可以创建一些变量来保存值用于向下缩小路径。扩展基础组件： (function($) { // shorten references to variables. this is better for uglification var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget var MyWidget = Widget.extend({ // initialization code goes here }); })(jQuery); 添加一个初始化的方法：现在需要对你的组件提供一个初始化方法，当组件被调用的时候，这个方法就会被框架调用，这个初始化函数需要两个参数，一个是你正在初始化的组件参数，一个是不久你将要指定的一套选项。这两个参数都将会配置值。 var MyWidget = Widget.extend({ init: function

HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

阅读更多关于 HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在前面的文章《 HTML5 UI框架Kendo UI Web自定义组件（一）》中，对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解，下面将继续前面的内容。使用一个数据源现在如果想要实现一个数据源组件或是MVVM aware模式，需要再执行一些其他的步骤。在下面将会创建一个DataSource aware组件，要使DataSource aware有数据源，首先需要在DataSource基础对象上使用create convenience方法。创建或初始化数据源： that.dataSource = kendo.data.DataSource.create(that.options.dataSource); 这一行代码主要是为你的组件数据源提供了比较灵活的方式，这个样子你就不用创建一个新的数据源来绑定到组件上。数据源作为数组： $( "#div" ).kendoRepeater({ dataSource: [ "Item 1" , "Item 2" , "Item 3" ] }); 如果你传递一个简单的数组， kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource，并返回到that.dataSource

用户界面控件的王者之争：Kendo UI vs DevExpress（一）

阅读更多关于用户界面控件的王者之争：Kendo UI vs DevExpress（一）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在一次使用ASP.NET MVC进行开发的Web项目中，我们需要用户界面控件来帮助实现界面的大部分功能。由于项目比较复杂，我们最终确定对 Kendo UI 和 DevExpress 这两款国际知名的用户界面组件进行评估。下面笔者跟大家分享一下评估控件的经验，希望对其他选购控件的朋友提供一个参考和借鉴。当时我们评估这两款控件主要考察：控件的功能、易用性、与当前项目的集成时间和自动代码完成的时间。控件功能首先我们比较了Kendo UI和DevExpress当前所提供的控件，并大致评估了控件的功能。根据项目的需求，我们主要测试了文本和日期两个控件。 Kendo UI Kendo UI是Telerik旗下的控件，在Web和移动开发领域都有非常棒的表现，在开发者当中也是相当的受欢迎。Kendo UI提供了两个文本字段控件： Autocomplete 和 NumericTextBox 。后面个控件提供了各种选项，比如价格、百分比、测量和质量。这些控件非常惊艳，功能很强大，不过唯一的不足就是它的Mask文本字段，比如输入邮件和地址必须要用固定的格式，不过这个问题用一个jQuery插件就可以轻松解决。 Kendo UI的文本字段有三个选项： Calendar, DatePicker 和 DateTimePicker

kendo grid 使用小结

阅读更多关于 kendo grid 使用小结

需要注意的： 1. id,如果没有指定id则会导致create、update等操作无法正常使用。头疼事项： 1. 服务端失败返回error数据。如果是编辑状态，还不能友好提示错误。当然可以使用大量代码实现，不过却过于繁琐。 createError: function (e) { let err = e.xhr.responseJSON let $ = kendo.jQuery let validationMessageTmpl = kendo.template('<div class="k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em; " data-for="#=field#" role="alert" data-valmsg-for="#=field#" id="#=field#_validationMessage">\n' + ' <span class="k-icon k-i-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>') for (let i in err) { let el = $('[name="' + i + '"]') el.attr('aria-invalid', true

数据管理必看！Kendo UI for jQuery过滤器的全球化

阅读更多关于数据管理必看！Kendo UI for jQuery过滤器的全球化

Kendo UI for jQuery最新试用版下载 Kendo UI 目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。 Kendo UI Filter 小部件是一个统一的控件，用于筛选具有数据源的数据绑定组件。概述全球化进程结合组件消息的翻译（本地化）和使其适应特定的文化（国际化和支持从右到左），通过过滤器消息的本地化可以启用过滤器的全球化功能。本地化过滤器提供用于定义其过滤器运算符（例如包含、等于或大于）和逻辑消息（例如，AND和OR）的文本选项。要本地化消息，请在messages字段中设置所需的字符串。要本地化运算符的名称，请列出可用的运算符，然后在operators字段中设置其文本。 <div id="filter"></div> <ul id="listView"></ul> <script type="text/x-kendo-template" id="item"> <li> <strong>#= name #</strong>, aged #= age #, is on vacation: #= isOnLeave # <

Batch editing in KendoUI Grid for Angular 2/4

阅读更多关于 Batch editing in KendoUI Grid for Angular 2/4

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: As per this link https://github.com/telerik/kendo-angular/issues/165 batch editing of the kendo ui grid for angular 2/4 is not available. Has anyone developed a workaround? 回答1: UPDATE Please note, looks like batch editing is supported out of the box now. ORIGINAL ANSWER I was able to change kendo angular grid's custom editing functionality to achieve something in line with batch/cell editing. Here is the plunkr. http://plnkr.co/edit/USYz7LIV5oaOmjSmY7JH import { Component, OnInit, Inject, ViewChild } from '@angular/core'; import { FormGroup

Kendo UI Window on grid button click does not open second time

阅读更多关于 Kendo UI Window on grid button click does not open second time

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: im working on an MVC Kendo Ui project and i'm having the following problem: I have an editable kendo grid with a custom edit button wich opens a partial view on a kendo window wich acts like an "editor template". This seems to work fine first time but if i close the window and try to edit another item or even the same just does not work. I think that when i close the window this eliminate the elemment from the DOM but can't figure it out how to fix it. Here is some code: @(Html.Kendo().Grid(Model) .Name("gridUbicaciones") .Columns(col => {

订阅 kendo