Tôi có thể ẩn các cột lưới giao diện người dùng Kendo bằng cách sử dụng Angular, JavaScript hoặc ASP.NET MVC

Question

Tôi đang làm việc trên trang web HTML5 và JavaScript.

Có thể có cột ẩn trong Lưới giao diện người dùng Kendo và truy cập giá trị bằng JQuery không?

Answer 1

Sử dụng JavaScript

Xem Kendo UI API reference.

Ẩn một cột trong định nghĩa lưới

Sử dụng thực hiện hoạt Javascript bạn có thể thêm hidden: true:

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

Ẩn một cột bằng cách css selector

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

Ẩn một cột theo cột trong Dex

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

Ẩn một cột theo tên cột

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

Ẩn một cột bằng cách tham chiếu đối tượng cột

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

Sử dụng góc

Xem Kendo UI for Angular API reference

Ẩn một cột trong định nghĩa lưới

@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> 
    ` 
}) 

lập trình ẩn cột

@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); 
    } 
} 

Sử dụng ASP.NET MVC

Xem Kendo MVC API reference

012.

Ẩn một cột trong định nghĩa lưới

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

Sử dụng PHP

Xem Kendo UI for PHP API reference

Ẩn một cột trong định nghĩa lưới

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

Answer 2

Như @Nic nói có nhiều cách để ẩn một cột nhưng tôi sẽ giả định rằng bạn đang sử dụng phương pháp KendoUI để ẩn nó. I.e: đặt cột hidden thành true hoặc theo chương trình gọi hideColumn.

Nếu vậy, bạn nên nhớ rằng mô hình của bạn có thể có các trường không được hiển thị hoặc thậm chí không được ánh xạ trong cột nhưng chúng tồn tại và bạn vẫn có thể truy cập chúng.

Nếu chúng ta có định nghĩa Lưới sau:

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"); 

Nơi tôi đã tuyên bố một cột Id như ẩn. Tôi vẫn có thể truy cập giá trị của Id bằng cách vào mô hình sử dụng:

// 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 dụ

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>