如何根據下拉列表更改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

〜在這兩種情況下，代碼肯定可以被清理，以滿足您的需求更好，但我只是想給你一些基本功能的工作。希望這可以幫助！