如何使用 JavaScript、React、Angular、Vue 或 ASP.NET MVC 隐藏 Kendo UI 网格列 [英] How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC

查看：20
本文介绍了如何使用 JavaScript、React、Angular、Vue 或 ASP.NET MVC 隐藏 Kendo UI 网格列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

解决方案

使用 JavaScript

请参阅 Kendo UI API 参考.

在网格定义期间隐藏一列

你可以添加hidden: true:

$("#gridName").kendoGrid({列: [{隐藏:真，字段:id"}，{ 字段:名称"}],数据源: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]});

通过 css 选择器隐藏列

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

按列索引隐藏列

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

按列名隐藏列

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

按列对象引用隐藏列

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

使用 React

请参阅 Kendo UI for React API 参考

在网格定义期间隐藏一列

您可以设置show:false:

class App 扩展 React.Component {列 = [{title: '产品 ID',字段:'产品ID'，显示:假},{title: '产品名称',字段:'产品名称'，显示:真实},{title: '单价',字段:'单价'，显示:真实}]构造函数(){极好的();this.state = {列:this.columns，显示:假};}使成为() {返回 (<div><网格数据={产品} >{this.state.columns.map((column, idx) =>column.show &&(<Column key={idx} field={column.field} title={column.title}/>))}</网格>

);}}

使用角度

参见 Kendo UI for Angular API参考

在网格定义期间隐藏一列

您可以添加[hidden]="true"

@Component({选择器:'我的应用'，模板:`<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="产品名称" width="200"></kendo-grid-column><kendo-grid-column field="UnitPrice" title="Unit Price" width="230"></kendo-grid-column></kendo-grid>`})

以编程方式隐藏列

@Component({选择器:'我的应用'，模板:`<div class="example-config"><button (click)="restoreColumns()" class="k-button">恢复隐藏的列</button>

<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;">隐藏</ng-模板></kendo-grid-column></ng-模板></kendo-grid>`})导出类 AppComponent {公共 gridData: any[] = sampleCustomers;公共列:string[] = [ 'CompanyName', 'ContactName', 'ContactTitle'];公共隐藏列:字符串[] = [];公共恢复列():无效{this.hiddenColumns = [];}公共隐藏列(字段:字符串):无效{this.hiddenColumns.push(field);}}

使用Vue

请参阅 Kendo UI for Vue API 参考

在网格定义期间隐藏一列

您可以添加:hidden="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>

使用 ASP.NET MVC

请参阅 Kendo MVC API 参考

在网格定义期间隐藏一列

@(Html.Kendo().Grid().Name("网格名称").Columns(columns =>{columns.Bound(m => m.Id).Hidden()columns.Bound(m => m.Name)}))

使用 PHP

请参阅 Kendo UI 以获取 PHP API 参考

在网格定义期间隐藏一列

隐藏(真)；?>

I'm working on a HTML5 and JavaScript website.

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

解决方案

Using JavaScript

See the Kendo UI API reference.

Hide a column during grid definition

You can add 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

$("#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

Hide a column during grid definition

You can set 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

Hide a column during grid definition

You can add [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

Hide a column during grid definition

You can add :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

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

Hide a column during grid definition

<?php
    $column = new KendoUIGridColumn();
    $column->hidden(true);
?>

这篇关于如何使用 JavaScript、React、Angular、Vue 或 ASP.NET MVC 隐藏 Kendo UI 网格列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆