动态添加(选择/取消选择)数据网格Kendo UI

时间:2015-11-17 19:57:53

标签: javascript jquery angularjs kendo-ui kendo-grid

我刚开始使用kendo UI网格,我能够弄清楚如何将kendo与angularJS集成

Ex:JSFIDDLE

但是我试图实现一些事情,比如动态添加/选择或取消选择列名,然后数据网格应该在数据表中相应地显示列。

Ex:BY Default consider few columns are selecet

现在,当我在网格右侧选择一个新列时,数据表将使用所选列进行更新

希望这张图片清楚地说明我指的是什么

New Column Selected

所以,我想实现这种动态数据网格,

即使我做了

columns: [
            { field: "lastName", title: "Last Name" },
            { field: "firstName", title: "First Name" },
            { field: "company", title: "Company"},
            { field: "title", title: "Title" },
            { field: "email", title: "Email" },
            { field: "phone", title: "Phone" }
        ],

和dataSource动态它无法正常工作。

注意:请考虑从API获取列名称,因此我需要基于API动态实现

1 个答案:

答案 0 :(得分:0)

用于显示/隐藏列,我们在Grid本身上公开了方法。以下是这些的API参考:

showColumn - http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-showColumn

hideColumn - http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-hideColumn

此外,我们还有一个名为ColumnMenu的功能。它会自动提供一个列菜单,您可以在其中选中/取消选中要显示或隐藏的列。这是一个演示:http://demos.telerik.com/kendo-ui/grid/column-menu

希望这会有所帮助