選擇要在電網中顯示的列？

Question

我有一個顯示多列的MVC telerik網格。我想要做的是給用戶選擇混合和匹配他們看到的列，例如，如果網格可以顯示10列，界面可以給用戶3列以查看數據，並且他們將不得不選擇3個網格中的每一個將顯示什麼。

我在想它和.Columns命令有關，所以用戶可以通過GUI修改它嗎？

Answer 1

當允許用戶查看網格應該代表的數據的特定視圖時，您有幾個選項。雖然爲每個用​​戶使用不同的網格聲明是一種方法，但最簡單的方法可能是顯示或隱藏同一網格的列。

這可以通過利用Grid組件附帶的內置列選擇器來實現，可以在this demo中看到。右鍵單擊任何標題可爲用戶提供一個簡單的界面來選擇要顯示的列。

或者，您可以使用hideColumn/showColumn客戶端API調用，它可以採用列綁定的字段名稱或索引作爲參數。一個簡單的例子（雖然它只隱藏你定義的列）：

<input type="text" id="columnHider"/> 
<br /> 
<button type="button" id="columnButton">Click</button> 

@model IEnumerable<Customer> 

@(Html.Telerik().Grid(Model) 
     .Name("TelerikGrid") 
     .Columns(columns => 
     { 
      columns.Bound(c => c.CustomerID); 
      columns.Bound(c => c.CompanyName); 
      columns.Bound(c => c.ContactName); 
      columns.Bound(c => c.Address); 
      columns.Bound(c => c.City); 
     }) 
     .Pageable(pageSettings => pageSettings.Enabled(true).PageSize(10)) 
     .ColumnContextMenu() 
) 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#columnButton").click(function() { 
      var grid = $("#TelerikGrid").data("tGrid"); 
      var columnString = $("#columnHider").val(); 
      grid.hideColumn(columnString); 
     }); 
    }); 
</script> 

這允許你定義你自己的接口來隱藏/顯示列。