kendo ui grid 动态控制某属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了kendo ui grid 动态控制某属性相关的知识,希望对你有一定的参考价值。
比如 editable设置true,grid可以编辑,false 则不可编辑。如何点一个按钮控制editable的值并生效?比如,点审核按钮,grid不再可以编辑。
参考技术A var grid = $("#gridname").data("kendoGrid");//获取Grid对象//修改对象参数
grid.setOptions(
filterable:
enabled: true,
mode: "row"
);本回答被提问者和网友采纳 参考技术B 羌笛何须怨杨柳,春风不度玉门关.
Kendo UI 初始化 Data 属性
初始化 Data 属性
前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法。使用初始化 Data 属性的方法在页面上包含有大量 Kendo UI 控制项时非常便利。 首先, 组件的配置包含在目标元素中,第二无需首先查找每个元素然后调用 jQuery 方法,你只需调用一次 kendo.init()方法。Kendo UI Mobile 应用通常使用 Data 属性来初始化。
如下例使用 data 属性来初始化一个 UI 组件
<div id="container"> <input data-role="numerictextbox" /> </div> <script> kendo.init($("#container")); </script>
其中方法 kendo.init($(“#container”)) 会查找所有包含有 data-role 属性的元素,然后初始化这些 Kendo UI 组件。 每个 kendo UI 组件的 role 的值为该UI组件名称的小写名字,比如” autocomplete ”或” dropdownlist ”。
预设情况下,kendo.init 只会初始化 Kendo UI Web 组件和 Kendo UI DataViz 组件(按这个顺序)。 而 Kendo UIMobile 应用 首先初始 化Kendo UI Mobile 组件,然后是 Kendo UI Web 组件,最后是 Kendo UI DataViz 组件。 这意味著 data-role=”listview ” 在 Mobile 应用中会预设初始化为 Kendo UI Mobile Listview。 然而可以通过指明组件全称的方法在修改这个预设初始化顺序。比如:在 Mobile 应用中 指明使用 Kendo UI Web 的 listview
<div data-role="view"> <!-- specify the Kendo UI Web ListView widget --> <div data-role="kendo.ui.ListView"></div> </div> <script> var app = new kendo.mobile.Application(); </script>
配置
每个组件可以通过 Data 属性来进行配置,对于配置的属性,只需在属性名前加上 data-前缀就可以做为目标元素的属性进行配置。比如 data-delay=”100″。 对于一些使用 Camel-cased 的属性则是通过添加「-」 ,比如 AutoComplete 的 ignoreCase 的属性可以通过 data-ignore-case 来设置。而对于一些已经是使用 data 前缀的属性则无需再添加 data-前缀。比如 dataTextField 属性可以通过 data-text-field 属性来配置, dataSource 属性可以通过 data-source 属性来配置。对于一些複杂的配置可以通过 JavaScript 对象字面量来配置,比如:data-source=”{data: [{name: ‘John Doe’},{name: ‘Jane Doe’]}”.
如下例:
<div id="container"> <input data-role="autocomplete" data-ignore-case="true" data-text-field="name" data-source="{data: [{name: ‘John Doe‘},{name: ‘Jane Doe‘}]}" /> </div> <script> kendo.init($("#container")); </script>
事件
你也可以通过 data 属性添加对 Kendo UI 组件的事件处理,属性的值被当成一个 JavaScript 函数,其作用域为全局。
如下例:
<div id="container"> <input data-role="numerictextbox" data-change="numerictextbox_change" /> </div> <script> function numerictextbox_change(e) { // Handle the "change" event } kendo.init($("#container")); </script>
事件处理函数也可以为一个成员函数,比如 foo.bar 可以看出为 foo 对象的 bar 方法。
例如:
<div id="container"> <input data-role="numerictextbox" data-change="handler.numerictextbox_change" /> </div> <script> var handler = { numerictextbox_change: function (e) { // Handle the "change" event } }; kendo.init($("#container")); </script>
数据源
支持数据绑定的 UI 组件的数据源也可以通过 data-source 属性来指定。 这个属性可以 为一个 JavaScript 对象,一个数组或是一个全局变数。
例如:
使用 JavaScript 数组作为数据源。
<div id="container"> <input data-role="autocomplete" data-source="{data:[‘One‘, ‘Two‘]}" /> </div> <script> kendo.init($("#container")); </script>
使用 JavaScript 数组作为数据源。
<div id="container"> <input data-role="autocomplete" data-source="[‘One‘, ‘Two‘]" /> </div> <script> kendo.init($("#container")); </script>
使用一个可以全局访问的变数作为数据源。
<div id="container"> <input data-role="autocomplete" data-source="dataSource" /> </div> <script> var dataSource = new kendo.data.DataSource( { data: [ "One", "Two" ] }); kendo.init($("#container")); </script>
模板
模板也可以通过 Data 属性来设置,属性的值代表用来定义模板的 Script 元素的 Id。比如:
<div id="container"> <input data-role="autocomplete" data-source="[{firstName:‘John‘, lastName: ‘Doe‘}, {firstName:‘Jane‘, lastName: ‘Doe‘}]" data-text-field="firstName" data-template="template" /> </div> <script id="template" type="text/x-kendo-template"> <span>#: firstName # #: lastName #</span> </script> <script> kendo.init($("#container")); </script>
以上是关于kendo ui grid 动态控制某属性的主要内容,如果未能解决你的问题,请参考以下文章
在容器 Kendo 窗口调整大小时动态更改 Kendo Grid 行的高度