如何根据下拉列表更改Kendo网格列

Question

我们正在开发一个Web应用项目，我们正在使用Kendo UI。是否有可能制作第一列标题/标题，就像我们从下拉菜单中选择的那样。例如： - 如果搜索到序列号，则序列号应位于搜索的第一列。但是我无法得到，因为我们按照排序的方式定义了列定义。取决于选择，我们隐藏列的其余部分。 例如：

xxx.GridColDef = [ { 
    field : "serialNo", 
    title : "Serial No", 

}, { 
    field : "firstname", 
    title : "firstname", 
    }, { 
    field : "lastnameo", 
    title : "lastname", 
    }, 

从下拉如果我选择名字的第一个名字应该是第一列。但我得到第一列作为序列号是否有任何方法？而无需为每个添加单独的列定义。

剑道版本 - 2012.1.322

本应自动不使用的列重新排序不能手动

---

很抱歉，如果我不明白做。我要的是

在下拉我

序列号 名 姓 DOB

最初的电力网将是如下

序列号名字姓氏DOB

如果用户从下拉菜单中选择“名字”，应该是这样的

名字序列号姓氏生效

希望能对您有所帮助。如果你需要更多的澄清，让我知道。感谢您为此提供解决方案。

一两件事： -

在这拨弄我无法从下拉菜单中选择“小提琴使用当前剑道2012.1.322的版本”。

Answer 1

更新答案2

目前KendoUI网格框架不支持切换代码列的能力。我创建了一个新的小提琴，您不必在每个开关盒中完全重新排列列。它循环遍历列定义，如果下拉值在那里，则将其从数组中移除并将其放在第一个位置。我不知道你的50个专栏和8个下降点如何相互作用，所以我很难给出完全准确的答案。但在这里的多个建议之间，我希望你能来解决:)

我创建了一个新的定义tempColumn变数让原本列定义仍然可以在它的原始状态。

function onSelect(e) { 
    var ddlVal = this.dataItem(e.item.index()).value; 
    var tempColumns = columnDefinitions; 

    $(tempColumns).each(function(index) { 
     if (ddlVal == this.title) { 
      tempColumns.splice(index, 1); 
      tempColumns.splice(0, 0, this); 
     } 
    }); 

    createGrid(tempColumns); 

}

New fiddle which uses spice to re-order the columns

更新回答

我创建了一个新的小提琴与您当前的剑道的版本。您不需要更新您的版本，因为我不相信在Kendo框架内有任何方法可以做到这一点。

此解决方案涉及从下拉列表中选择并重新创建网格时重新定义列定义。

Updated fiddle with your current version of Kendo

*出于某种原因，Internet Explorer不玩的jsfiddle漂亮的时候。这个例子适用于Firefox和Chrome，但不适用于IE。如果您无法尝试使用其他浏览器来查看它的工作情况，请将代码插入您的解决方案并进行测试。

原来的答案

我提供了2个不同的解决方案。

1）您可以更新您的KendoUI版本吗？如果可以的话，那么你可以利用.showColumn（）和.hideColumn（）方法。

下面是使用KendoUI 2012.2.710的小提琴。在下拉列表的选择事件中，您只需显示/隐藏适当的列。非常简单直接。

Fiddle using Kendo 2012.2.710

2）如果您不能更新您KendoUI版本，你可以改变你的columnDefinition数组，然后重新创建网格。

在下拉列表的onSelect方法中，您从columnDefinition数组中删除第一列，然后将新列对象添加到数组中。之后，您将删除网格的div元素的内容，然后重新创建网格。

你仍然绑定到相同的数据，所以你不必回过头来重新获取数据。

Fiddle using your current version of Kendo 2012.1.322

〜在这两种情况下，代码肯定可以被清理，以满足您的需求更好，但我只是想给你一些基本功能的工作。希望这可以帮助！