Comment puis-je cacher des colonnes de grille 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 en utilisant JQuery?
2 réponses
Utilisant JavaScript
voir le Kendo UI reference API.
masquer 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 par le sélecteur css
$("#gridName").find("table th").eq(1).hide();
cacher une colonne par index de colonne
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(1);
Masquer une colonne par colonne nom
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn("Name");
cacher une colonne par colonne référence d'objet
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);
En Utilisant React
voir le Kendo UI pour Réagir de référence de l'API
masquer 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 L'Angle
voir le Kendo UI Angulaire de référence de l'API
masquer 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>
`
})
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);
}
}
Utilisation De La Vue
voir le Kendo UI for Vue référence API
masquer 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>
en utilisant ASP.NET MVC
voir le référence API MVC de Kendo
cacher une colonne pendant la grille définition
@(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 for PHP API reference
masquer une colonne lors de la définition de la grille
<?php
$column = new \Kendo\UI\GridColumn();
$column->hidden(true);
?>
comme le dit @Nic, il y a plusieurs façons de cacher une colonne, mais je suppose que vous utilisez les méthodes KendoUI pour la Cacher. I. e: définir la colonne hidden true ou la programmation d'invoquer hideColumn.
si c'est le cas, vous devez vous rappeler que votre model peut avoir des champs qui ne sont pas affichés ou même pas mappés 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é la colonne Id comme caché. Je ne peux toujours accéder à la valeur de Id en allant au modèle en utilisant:
// 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>