Jak ukryć kolumny Kendo UI Grid używając Angular, JavaScript lub ASP.NET MVC

Question

Pracuję nad stroną HTML5 i JavaScript.

Czy możliwe jest posiadanie ukrytej kolumny w Kendo UI Grid i uzyskanie dostępu do wartości za pomocą JQuery?

Answer 1

Korzystanie JavaScript

Zobacz Kendo UI API reference.

ukryć kolumnę podczas definicji siatki

Korzystanie z realizacji JavaScript można dodać hidden: true:

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

ukryć kolumnę przez selektor CSS

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

ukryć kolumna po kolumnie w DEX

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

Ukrywanie kolumnę nazwa kolumny

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

Ukrywanie kolumnę przez odwołanie do obiektu kolumna

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

Stosując kątowe

Zobacz Kendo UI for Angular API reference

ukryć kolumnę podczas definicji siatki

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

programowo ukryć kolumnę

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

Korzystanie ASP.NET MVC

Zobacz Kendo MVC API reference

ukryć kolumnę podczas definicji siatki

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

Używanie PHP

Zobacz Kendo UI for PHP API reference

ukryć kolumnę podczas definicji siatki

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

Answer 2

Jak mówi @Nic istnieje wiele sposobów ukrywania kolumny, ale zakładam, że używasz metod KendoUI do jej ukrywania. Np. Ustawić kolumnę hidden na true lub programowo wywołać hideColumn.

Jeśli tak, należy pamiętać, że model może zawierać pola, które nie są wyświetlane lub nawet nie są odwzorowane w kolumnach, ale istnieją i nadal można uzyskać do nich dostęp.

Jeśli mamy następującą definicję Grid:

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

Gdzie mam ogłoszony kolumnę Id jako ukryty. I nadal może uzyskać dostęp do wartości Id przechodząc do modelu przy użyciu:

// 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 przykład

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>