如何使用JavaScript，React，Angular，Vue或ASP.NET MVC隐藏Kendo UI网格列

I'm working on a HTML5 and JavaScript website.

我正在开发一个HTML5和JavaScript网站。

Is it possible to have a hidden column in Kendo UI Grid and access the value using JQuery?

是否可以在Kendo UI Grid中使用隐藏列并使用JQuery访问该值？

2 个解决方案

#1

Using JavaScript

See the Kendo UI API reference.

请参阅Kendo UI API参考。

Hide a column during grid definition

在网格定义期间隐藏列

You can add hidden: true:

你可以添加hidden：true：

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

Hide a column by css selector

通过css选择器隐藏列

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

Hide a column by column index

按列索引隐藏列

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

Hide a column by column name

按列名隐藏列

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

Hide a column by column object reference

按列对象引用隐藏列

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

Using React

See the Kendo UI for React API reference

有关React API参考，请参阅Kendo UI

Hide a column during grid definition

在网格定义期间隐藏列

You can set show: false:

你可以设置show：false：

class App extends React.Component {
  columns = [
    {
      title: 'Product Id',
      field: 'ProductID',
      show: false
    },
    {
      title: 'Product Name',
      field: 'ProductName',
      show: true
    },
    {
      title: 'Unit Price',
      field: 'UnitPrice',
      show: true
    }
  ]

  constructor() {
    super();
    this.state = {
      columns: this.columns,
      show:false
    };
  }

  render() {
    return (
      <div>
        <Grid data={products} >
          {this.state.columns.map((column, idx) =>
            column.show && (<Column key={idx} field={column.field} title={column.title} />)
          )}
        </Grid>
      </div>
    );
  }
}

Using Angular

See the Kendo UI for Angular API reference

有关Angular API参考，请参阅Kendo UI

Hide a column during grid definition

在网格定义期间隐藏列

You can add [hidden]="true"

你可以添加[hidden] =“true”

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

Programmatically hide a column

以编程方式隐藏列

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

Using Vue

See the Kendo UI for Vue API reference

请参阅Kendo UI for Vue API参考

Hide a column during grid definition

在网格定义期间隐藏列

You can add :hidden="true"

你可以添加：hidden =“true”

<kendo-grid :height="600"
            :data-source-ref="'datasource1'"
            :pageable='true'>
    <kendo-grid-column field="ProductID" :hidden="true"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
</kendo-grid>

Using ASP.NET MVC

See the Kendo MVC API reference

请参阅Kendo MVC API参考

Hide a column during grid definition

在网格定义期间隐藏列

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

Using PHP

See the Kendo UI for PHP API reference

有关PHP API参考，请参阅Kendo UI

Hide a column during grid definition

在网格定义期间隐藏列

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

#2

As @Nic says there are multiple ways of hiding a column but I'm gonna assume that you are using KendoUI methods for hiding it. I.e: set the column hidden to true or programmatically invoke hideColumn.

正如@Nic所说，有多种隐藏列的方法，但我会假设你使用KendoUI方法来隐藏它。即：将列隐藏设置为true或以编程方式调用hideColumn。

If so, you should remember that you model might have fields that are not displayed or not even mapped in columns but they exist and you can still access them.

如果是这样，您应该记住，您的模型可能包含未显示或甚至不在列中映射的字段，但它们存在且您仍然可以访问它们。

If we have the following Grid definition:

如果我们有以下网格定义：

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

Where I've declared a column Id as hidden. I still can access the value of Id by going to the model using:

我已将列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 example

可运行的例子

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>