Kendo UI 使用小知识点汇总

    

本攻略适用于了解的kendo UI 的基本语法的人使用。如果还不了解Kendo UI的基本语法，请大力观摹Demo ，并自己动用写几个控件。

1、获取Kendo UI的控件实体，不必存成全局变量。

    在控件初始化后，想要调用控件的实体，只需要 

    

$("#id").data("kendoGrid")

$("#id").data("kendoGrid")

x

1

$("#id").data("kendoGrid")

如果是treeView ，data就是kendoTreeView，以此类推

2、获取dataSource也不必使用全局变量

var grid = $("#id").data("kendoGrid");var dataSource = grid.dataSource; // 获取到dataSource的Beanvar dataList = dataSource.view(); // 获取到数据列表，是一个Array

xxxxxxxxxx

3

 

1

var grid = $("#id").data("kendoGrid");

2

var dataSource = grid.dataSource;   // 获取到dataSource的Bean

3

var dataList = dataSource.view();   // 获取到数据列表，是一个Array

3、关于kendoTreeView的加载问题

    在开发时，有没有遇到过找不到树的节点的情况？主要原因是，不展开的话，子级节点就没有加载，找不到对应的节点。

    以前我采用过先expand全部，然后再collapse全部的方法，直到发现了这个属性……

loadOnDemand:false

loadOnDemand

x

1

loadOnDemand:false

    API 是这样讲的

    Indicates whether the child DataSources should be fetched lazily when parent groups get expanded. Setting this to false causes all child DataSources to be loaded at initialization time.

   大体意思就是当父节点展开时子数据源是否懒惰加载。将此属性设为false时，子数据源在初始化的时候会全部取出。    

    

4、说到kendoTreeView，还有一个点，就是树节点的展开。

树节点API给出了三个方法，分别是expand，expandPath，expandTo。我不想在这里比较这三个方法，因为我只用到了其中的一个方法，就可以满足我的需求。当我知道了一个节点的id，将它展开到指定的位置。

var barElement = treeView.findByUid(nodeID); //treeView就是kendoTreeView，不再多说treeView.expandTo(treeView.dataItem(barElement));//将所有节点展开

x

 

1

var barElement = treeView.findByUid(nodeID);  //treeView就是kendoTreeView，不再多说

2

treeView.expandTo(treeView.dataItem(barElement));//将所有节点展开

5、关于id与uid的关系问题

    在kendoUI 中，控件实体是以uid做为唯一标识的，它是生成html时，随机生成的。选中某个Element，kendoUI 只给出了两种方法，findByText和findByUid，很多时候，我们用的既不是名称（name），也不是kendoUI的uid，而是我们自己从后台获取的唯一标识。

以前我采用的方法是，在获取到数据后，在dataSource的schema 中进行绑定，把dataItem的uid设置成id，后来发现一个更简单一点的方法，就是dataSource是认id的

var dataItem = grid.dataSource.get(data.id);var element = grid.findByUid(dataItem.uid);

ataItem.uid);

xxxxxxxxxx

 

1

var dataItem = grid.dataSource.get(data.id);

2

var element = grid.findByUid(dataItem.uid);

6、关于kendoGrid 和kendoTreeView的select()方法。

    在树与表格的联动或者其他的情况下，需要选中某一行或都树上的某一项 。我们可以根据上一条中的方法 ，来获取到某个element，在我多次实验，treeView可以采取这种选中的方式，而grid总是失败。我采用的选中方式分别是：

grid.select("tr[data-uid='" + grid.dataSource.get(data.id).uid + "']");treeView.select(element);

x

 

1

grid.select("tr[data-uid='" + grid.dataSource.get(data.id).uid + "']");

2

treeView.select(element);

7、kendoWindow与kendoGrid联合使用，由于定位问题，会发生异常。

    我采用的是简单粗暴地给kendoGrid中发生溢出的单位，设置高度。暂时未发现更优雅的解决方式

 

本来预期的是表格在红线的位置处结束，但是它在对话框中撑出了。 

#deletePersonGrid .k-grid-content{height:227px;}

x

 

1

#deletePersonGrid .k-grid-content{height:227px;}

8、暂时也没有第8条，但是为了凑个整，估且计算上第八条了。