Comment puis-je Cacher Kendo UI de Colonnes de la Grille à l'aide de JavaScript, de Réagir, Anguleux, de Vue ou de ASP.NET MVC

Je suis en train de travailler sur un HTML5 et JavaScript site web.

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

à quel point avez-vous besoin pour accéder à la valeur à l'aide de Jquery ?

InformationsquelleAutor user1076698 | 2014-09-30

.net c#javascript kendo-grid kendo-ui

110

À L'Aide De JavaScript

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

Masquer une colonne au cours de 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 par sélecteur css

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

Masquer une colonne par colonne index

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

Masquer une colonne par colonne nom

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

Masquer une colonne par colonne de la référence d'objet

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

À L'Aide De Réagir

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

Masquer une colonne au cours de 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>
    );
  }
}

À L'Aide Angulaire

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

Masquer une colonne au cours de 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>
    `
})

Par programme masquer une colonne

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

L'Aide De Vue

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

Masquer une colonne au cours de 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>

À l'aide de ASP.NET MVC

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

Masquer une colonne au cours de définition de la grille

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

À l'aide de PHP

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

Masquer une colonne au cours de définition de la grille

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

InformationsquelleAutor Nicholas

Comme @Nic dit il y a plusieurs façons de masquer une colonne, mais je vais supposer que vous utilisez KendoUI méthodes pour s'en cacher. I. e: définir la colonne hidden true ou la programmation d'invoquer hideColumn.

Si oui, vous devriez vous rappeler que vous modèle peut avoir des champs qui ne sont pas affichées ou même pas mappé dans les colonnes mais ils existent et vous pouvez toujours y accéder.

Si nous avons la suite de définition de la Grille:

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 cachés. Je ne peux toujours accéder à la valeur de Id en passant par le 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);

Praticable exemple

JS:

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

CSS:

#grid {
    width : 490px;
}

HTML:

<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>

InformationsquelleAutor OnaBai

Vous devez vous connecter pour publier un commentaire.