web-dev-qa-db-fra.com

Comment masquer les colonnes de la grille de Kendo UI en utilisant JavaScript, React, Angular, Vue ou ASP.NET MVC

Je travaille sur un site Web HTML5 et JavaScript.

Est-il possible d'avoir une colonne cachée dans la grille de Kendo UI et d'accéder à la valeur à l'aide de JQuery?

javascriptc#.netkendo-uikendo-grid
41
user1076698

Utiliser JavaScript

Voir le référence de l'API Kendo UI .

Cacher une colonne lors de la définition de la grille

Vous pouvez ajouter hidden: true:

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

Masquer une colonne avec le sélecteur css 

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

Masquer une colonne par index de colonne 

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

Masquer une colonne par nom de colonne 

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

Masquer une colonne par référence à un objet de colonne 

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

Utilisation de React

Voir le Kendo UI pour React référence API)

Cacher une colonne lors de la définition de la grille

Vous pouvez définir 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>
    );
  }
}

En utilisant angulaire

Voir le Kendo UI pour Angular API

Cacher une colonne lors de la définition de la grille

Vous pouvez ajouter [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>
    `
})

Masquer une colonne par programme 

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

Utiliser Vue

Voir le Kendo UI pour Vue référence de l'API

Cacher une colonne lors de la définition de la grille

Vous pouvez ajouter :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>

Utiliser ASP.NET MVC

Voir le référence de l'API Kendo MVC

Cacher une colonne lors de la définition de la grille 

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

Utiliser PHP

Voir le Kendo UI pour PHP référence de l'API

Cacher une colonne lors de la définition de la grille 

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

Comme @Nic le dit, il y a plusieurs façons de cacher une colonne, mais je vais supposer que vous utilisez des méthodes KendoUI pour la cacher. I.e: définissez la colonne hidden sur true ou appelez-le par programme hideColumn.

Si tel est le cas, vous devez vous rappeler que votre modèle peut comporter des champs non affichés ou mappés dans des colonnes, mais ils existent et vous pouvez toujours y accéder.

Si nous avons la définition de grille suivante:

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

Où j'ai déclaré une colonne Id comme étant masquée. Je peux toujours accéder à la valeur de Id en accédant au modèle à l'aide de:

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

Exemple 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>
6
OnaBai