如何使用Angular，JavaScript或ASP.NET MVC隱藏Kendo UI網格列

Question

我正在研究HTML5和JavaScript網站。

是否有可能在Kendo UI Grid中存在隱藏列並使用JQuery訪問該值？

Answer 1

使用JavaScript

請參閱Kendo UI API reference。

電網定義

使用JavaScript執行過程中隱藏的列，您可以添加hidden: true：

$("#gridName").kendoGrid({ 
    columns: [ 
    { hidden: true, field: "id" }, 
    { field: "name" } 
    ], 
    dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ] 
}); 

通過CSS選擇

$("#gridName").find("table th").eq(1).hide(); 

躲一躲一列逐列逐列DEX

var grid = $("#gridName").data("kendoGrid"); 
grid.hideColumn(1); 

通過柱名隱藏列

var grid = $("#gridName").data("kendoGrid"); 
grid.hideColumn("Name"); 

隱藏通過柱對象引用

var grid = $("#gridName").data("kendoGrid"); 
grid.hideColumn(grid.columns[0].columns[1]); 

列使用角

見Kendo UI for Angular API reference

電網的定義中隱藏的列

@Component({ 
    selector: 'my-app', 
    template: ` 
     <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px"> 
      <kendo-grid-column [hidden]="true" field="ID" width="120"> 
      </kendo-grid-column> 
      <kendo-grid-column field="ProductName" title="Product Name" width="200"> 
      </kendo-grid-column> 
      <kendo-grid-column field="UnitPrice" title="Unit Price" width="230"> 
      </kendo-grid-column> 
     </kendo-grid> 
    ` 
}) 

編程隱藏列

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div class="example-config"> 
      <button (click)="restoreColumns()" class="k-button">Restore hidden columns</button> 
     </div> 

     <kendo-grid [data]="gridData" style="height:400px"> 
      <ng-template ngFor [ngForOf]="columns" let-column> 
       <kendo-grid-column field="{{column}}" [hidden]="hiddenColumns.indexOf(column) > -1" > 
        <ng-template kendoGridHeaderTemplate let-dataItem> 
         {{dataItem.field}} 
         <button (click)="hideColumn(dataItem.field)" class="k-button k-primary" style="float: right;"> 
          Hide 
         </button> 
        </ng-template> 
       </kendo-grid-column> 
      </ng-template> 
     </kendo-grid> 
    ` 
}) 

export class AppComponent { 
    public gridData: any[] = sampleCustomers; 

    public columns: string[] = [ 'CompanyName', 'ContactName', 'ContactTitle' ]; 

    public hiddenColumns: string[] = []; 

    public restoreColumns(): void { 
     this.hiddenColumns = []; 
    } 

    public hideColumn(field: string): void { 
     this.hiddenColumns.push(field); 
    } 
} 

使用ASP.NET MVC

見Kendo MVC API reference

隱藏網格定義中的列

@(Html.Kendo().Grid<Something>() 
    .Name("GridName") 
    .Columns(columns => 
    { 
     columns.Bound(m => m.Id).Hidden() 
     columns.Bound(m => m.Name) 
    }) 
) 

使用PHP

見Kendo UI for PHP API reference

電網的定義中隱藏的列

<?php 
    $column = new \Kendo\UI\GridColumn(); 
    $column->hidden(true); 
?> 

Answer 2

由於@Nic說有多種隱藏列的方式，但我會假設你使用KendoUI方法來隱藏它。即：將列hidden設置爲true或以編程方式調用hideColumn。

如果是這樣，你應該記住你的模型可能有一些字段沒有顯示出來，甚至沒有在列中映射，但它們存在，你仍然可以訪問它們。

如果我們有以下電網的定義：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    selectable: true, 
    ... 
    columns : 
    [ 
     { field: "Id", hidden: true }, 
     { field: "FirstName", width: 90, title: "First Name" }, 
     { field: "LastName", width: 200, title: "Last Name" } 
    ] 
}).data("kendoGrid"); 

在那裏我已經聲明爲隱藏列Id。我仍可以通過使用模型訪問Id值：

// I want to access the Id for row 3 
var row = $("tr:eq(3)", "#grid"); 
// Retrieve the item from the grid using dataItem method 
var item = $("#grid").data("kendoGrid").dataItem(row); 
// Show Id 
alert("Id is " + item.Id); 

Runnable的例子

var grid = $("#grid").kendoGrid({ 
 
    dataSource: [ 
 
    { Id: 1, FirstName: "John", LastName: "Smith" }, 
 
    { Id: 2, FirstName: "Jane", LastName: "Smith" }, 
 
    { Id: 3, FirstName: "Jack", LastName: "Smith" }, 
 
    { Id: 4, FirstName: "Joseph", LastName: "Smith" }, 
 
    { Id: 5, FirstName: "Jeff", LastName: "Smith" }, 
 
    ], 
 
    selectable: true, 
 
    columns : 
 
    [ 
 
    { field: "Id", hidden: true }, 
 
    { field: "FirstName", width: 90, title: "First Name" }, 
 
    { field: "LastName", width: 200, title: "Last Name" } 
 
    ] 
 
}).data("kendoGrid"); 
 

 
$("#show").on("click", function(e) { 
 
    var row = grid.select(); 
 
    if (row) { 
 
    var item = grid.dataItem(row); 
 
    alert ("The ID is :" + item.Id); 
 
    } else {  
 
    alert("Select a row"); 
 
    } 
 
});

#grid { 
 
    width : 490px; 
 
}

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" /> 
 
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script> 
 

 
Select row and click <button id="show" class="k-button">Here</button> to show hidden Id. 
 
<div id="grid"></div>