kendo ui的treeView节点点击事件修改和grid的配置的一点总结

kendo-ui的treeView节点(node)点击时  可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件。

可是需求上需要实现:每次点击相同的节点,都要触发该select事件。

这个需求,是和kendo的select事件相悖的。

最开始想通过 外部手动触发select事件,但是发现并不能做到.

后来做了如下配置:

 $("#treeview").kendoTreeView({
            dataSource: [
                treeData
            ],
            spriteCssClass: "rootfolder",
           //select: onSelect,    //注释select事件
              template: "<span onClick=‘onTreeViewNodeClick(this);‘>#= item.text # </span>",
            //---
            //其他配置
            //---
})

 实现该需求主要配置是  template.   使用template为每个节点用span包裹起来,并给一个onClick()

这样一来  每次点击节点都会触发一个事件。

但是为什么不直接在onClick中调用之前已经写好的onSelect方法呢?

原因是 在触发select事件调用onSelect方法时,kendo会给我们自定义方法一个e这个参数,e有很多功能,他知道当前点击节点所有的配置,比如我们想获取当前点击节点的id,

那么就是e.node.id.

然而在我们没有用event时间,而选择使用js的onClick来调用自定义的onSelect方法时,kendo 就不会给我们e这个参数,kendo并不知道我们干了什么。

所以我需要另一个点击时的自定义方法,并且我给这个方法的参数是this.  this在这里指的是什么呢?

就是当前我们所点击的节点的span元素;使用kendo的dataItem方法就能获取当前的Node了。

我们把当前的Node传给自定义的onSelect方法   也就自然而然的可以代替e参数了,因为当前Node就什么都知道嘛

function onTreeViewNodeClick(e){
    var tree=  $("#treeview").data("kendoTreeView");         //
    var node=tree.dataItem(e);                               //get current node   and  give onSelect as param
    onSelect(node,tree);
}

最后要说的一个在使用kendo ui的grid需要注意的问题是:

当我们使用编辑的功能时  (我用的inline,其他的应该也一样,有待验证)

我们的kendo的核心功能dataSource  一定要指定唯一标识字段

 schema: {
                                model: {
                                    id: "ProductID",   //这里是重点
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }

  

代码中已经标识出重点位置,这个唯一字段名称的配置,一定必须是id!   无论在我们json中叫什么名字,这里必须是id.

要不然编辑的时候,会出现很多问题,可以试试。

时间: 2024-10-25 23:58:10

kendo ui的treeView节点点击事件修改和grid的配置的一点总结的相关文章

element ui的 el-dropdown-item标签点击事件

在vue项目中使用element的el-dropdown-item标签时 给标签添加click事件 初始时按照正常写法 <el-dropdown-item @click="click()"></el-dropdown-item> 发现点击没反应 花了点时间查找后发现,对于这个标签的点击事件需要这样写才能生效 <el-dropdown-item @click.native="click()"></el-dropdown-ite

echarts2.* tree树形图节点点击事件和节点点击图标更改

做项目用到echarts2.2.7版本做树图,遇到点击树图节点更改样式,百度.谷歌搜索后均没找到解决方案.后来苦苦探索,终于找到解决入口,特地分享给大家以供参考,吐槽一下echarts的api真的没有highcharts人性化和易找.   //贴出关键点!     function clickFun(param) {         // console.log(param);         console.log(param);         param.data.symbol = 'im

Unity3D研究院之将UI的点击事件渗透下去(转)

转自 http://www.xuanyusong.com/archives/4241 处理UI还有3D模型的点击推荐使用UGUI的这套事件系统,因为使用起来比较简洁,不需要自己用代码来发送射线,并且可以很好的处理同时点击UI和3D模型上. 1.给3D摄像机挂一个Physics Raycaster组件.Event Mask过滤掉UI. 2.用unity自带的Event Trigger 或者  http://www.xuanyusong.com/archives/3325 就可以对UI 或者 3D模

Kendo UI常用示例汇总(十)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI常用示例汇总(九)

Kendo UI Professional 提供开源和商业两个版本.开源版 Kendo UI Core,有40+个框架和组件:商业版整合了之前的Kendo UI Web.Kendo UI Mobile 和 Kendo UI DataViz ,一共有70+个框架和组件.作为Kendo UI的升级版,Kendo UI Professional既可以开发网页版应用程序,也可以开发移动版应用程序,并且在性能上也有显著的优化和提升. Kendo UI Professional试用版下载猛戳>> Kend

Kendo UI 初始化 Data 属性

初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个  HTML 元素转换成一个 Kendo UI 控制项: $("#datepicker").kendoDatePicker();除了使用 jQuery 插件的方法来初始化方法外,每个 Kendo 控制项还可以通过 data 属性来初始化,此时你需要设置 data 的 role 属性,然后调用 kendo.init 方法.使用初始化 Data 属性的方法在页面上包含有大量 Kendo

关于按钮点击事件的PointerEventData属性详解

PointerEventData .button 触发此事件的按钮 PointerEventData.clickCount 计算按钮连击次数,间隔时间很短 public class ExampleClass : MonoBehaviour, IPointerDownHandler { public void OnPointerDown(PointerEventData eventData) { int i = eventData.clickCount; Debug.Log(i); } } Poi

C#界面之为TreeView上任意子节点添加Click事件

 PanPen120在CSDN上原创,如其他网站转载请注意排版和写明出处: http://write.blog.csdn.net/postlist 主要解决的问题:WinForm中用到树TreeView控件,想要点选任意节点有Click事件,但是发现点击子节点没有进入代码弹出Click事件 因为有事,现在有点晚了,直接上刚刚给自己写好的Demo

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c