KendoUI grid popup popup, comment masquer le champ
Existe-t-il un moyen de masquer un champ dans la fenêtre de modification qui devrait toujours être visible dans la grille elle-même?
J'ai essayé de le définir en mode caché: vrai, mais le kendo semble l'ignorer. Lorsque modifiable est défini sur false, la zone de texte est masquée, mais le libellé du champ est toujours affiché. Est-il possible de se débarrasser de l’étiquette et de la zone de texte?
Ma source de données:
schema: {
total: "Total",
data: "Data",
model:{
id:"Id",
fields:{
Id:{ visible: false, editable:false },
Name:{ editable:true },
NumberOfUsers:{ hidden:true, editable:false }
}
}
}
Il n’existe pas d’option telle que "hidden: true" et c’est pourquoi elle est ignorée. Vous pouvez utiliser l’événement edit de la grille pour masquer un élément de la fenêtre contextuelle:
$("#grid").kendoGrid({
edit: function(e) {
e.container.find("input:first").hide();
}
});
Une solution similaire a fonctionné pour moi:
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
},
Si vous utilisez Html.Kendo (). Grid <> () pour ASP.NET MVC, procédez comme suit:
Ajoutez le gestionnaire d'événements Edit à .Events dans vos attributs de contrôle, comme ceci:
.Events(e => e.Edit("hideIdField"))
Où "hideIdField" est votre fonction de gestionnaire d'événements js.
Dans EventHandlers.js, ajoutez la fonction.
function hideIdField(e) {
$("#ProductID").hide();
$("label[for='ProductID']").hide();
}
Où ProductID est le nom de votre champ Id de votre modèle source.
J'aime bien la réponse donnée par @jfl , et il est utile de prendre cette idée et de l’étendre à une belle installation réutilisable.
Pourquoi? Il est difficile de garder trace de l'ordinal de la colonne que vous devez cacher. C'est-à-dire que la réponse de @ jfl only fonctionne pour le premier fieldet/column, et même la version dans mon bref commentaire nécessite que l'ordre et éventuellement le nombre de colonnes ne changent pas.
Au lieu de cela, vous pouvez normaliser la manière dont vous masquez les colonnes en plaçant une propriété dans la déclaration des colonnes, puis vérifiez-la dans le gestionnaire d'événements edit qui est appelé après l'affichage de la fenêtre contextuelle. Vous obtenez une référence à la déclaration columns complète dans l'événement edit. Nous avons donc beaucoup de flexibilité.
J'ai un exemple complet à ce violon , mais le voici en bref:
J'ai ajouté une propriété hideMe dans les déclarations de colonne:
columns: [
{ field: "name" },
{ field: "position" },
{
field: "age",
hideMe: true // <<< This is new.
},
{ command: "edit" }
],
Ensuite, en me basant sur la réponse et le commentaire mentionnés plus haut, j’ai ceci dans mon gestionnaire edit:
e.sender.columns.forEach(function (element, index /*, array */) {
if (element.hideMe) {
e.container.find(".k-edit-label:eq(" + index + "), "
+ ".k-edit-field:eq( " + index + ")"
).hide();
}
});
Plus besoin de suivi ordinal de colonne. Vous pouvez ajouter des colonnes, modifier des ordres, en masquer de nouvelles, peu importe, simplement en changeant ce qui a hideMe dessus. (En rétrospective, j'aurais probablement dû appeler cela hideMeOnEdit, mais vous comprenez.)
Pour masquer un champ, ajoutez simplement ceci au modèle de vue:
[ScaffoldColumn(false)]
public int Id { get; set; }
Et si vous voulez garder le fichier et juste être caché, faites comme ceci:
@(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden()
columns.Bound(m => m.Name)
}))
par exemple avoir le champ PK_:
edit: function(e) {
e.container.find("input[name='PK_']").hide();
e.container.find("label[for='PK_']").hide();
}
Si vous utilisez l'interface utilisateur pour ASP.NET MVC, vous pouvez utiliser l'approche suivante dans laquelle vous pouvez non seulement masquer le contrôle lui-même, mais également masquer le div FirstParent qui occupe de l'espace sur le frontal.
Ajouter un gestionnaire d'événements
Html.Kendo().Grid<ProductDTO>()
.Name("GRVProducts")
.Columns(c =>
{
c.Bound(p => p.ProductID);
c.Bound(p => p.Name);
c.Bound(p => p.Price);
}
)
.Events(events=> events.Edit("HideGridFields"))
Ajouter Javascript
<script type="text/javascript">
function HideGridFields(e)
{
HideControl("ProductID", e); //Hide ProductID control with Label and parent tag. No space occupied ;)
}
function HideControl(fieldName, e)
{
var cont = $(e.container);
HideFieldLabel(cont.find("label[for='"+fieldName+"']"));
HideFieldField(cont.find("#" +fieldName));
}
function HideFieldLabel(control)
{
control.parent(".editor-label").hide();
}
function HideFieldField(control) {
control.parent(".editor-field").hide();
}
</script>
Masquer le contrôle ProductID avec Label et balise parent. Pas de place occupée au bout de fronde;)
Une solution similaire a fonctionné pour moi:
edit: function(e) {
e.container.find("label[for=yourFieldName]").parent("div .k-edit-label").hide();
e.container.find("label[for=yourFieldName]").parent().next("div .k-edit-field").hide();
},
Créez une fonction comme celle-ci:
function noEditor(container, options) {
container.prevObject.find("div[data-container-for='" + options.field + "']").hide();
container.prevObject.find("label[for='" + options.field + "']").parent().hide();
}
Et puis dans votre champ, définissez la propriété editor comme suit:
columns: [
{ field: "Field1", title: "Field 1", editor: noEditor },
{ field: "Field2", title: "Field 2" },
{ field: "Field3", title: "Field 3" },
{ field: "Field4", title: "Field 4", editor: noEditor }
]
De cette façon, vous pouvez facilement masquer plus d’un champ dans l’éditeur de popup. Dans ce cas, Champ1, Champ2, Champ3 et Champ4 seront affichés dans la grille, mais Champ1 et Champ4 ne seront pas affichés dans l'éditeur contextuel.
N'oubliez pas la possibilité d'utiliser l'annotation de données sur le modèle:
[HiddenInput(DisplayValue = false)]
(si votre modèle est basé sur ASP.NET MVC)
Étendre la réponse donnée par ruffin pour TypeScript 1.x
dans l'événement d'édition de la grille:
, edit: function (e) {
e.sender.columns.forEach((element, index) => {
var ele: any = element;
if (ele.attributes != undefined) {
if (ele.attributes.hideMe) {
e.container.find(".k-edit-label:eq(" + index + "), "
+ ".k-edit-field:eq( " + index + ")"
).hide();
}
}
});
}
et dans la colonne, ajoutez l'élément hideMe en tant qu'attribut:
columns: [
{
field: "Id",
title: "", width: 1,
attributes: { hideMe: true }
},
...
Cela est nécessaire car TypeScript signale en tant qu'erreur un champ de colonne qu'il n'est pas déclaré.
Au lieu d'utiliser l'index de la boucle tel qu'il apparaît dans la réponse donnée par ruffin, il est également possible d'acquérir l'index d'étiquette correspondant à la colonne en recherchant l'attribut for correspondant au champ de la colonne itérée. Le modèle par défaut de Kendo génère automatiquement Un attribut for pour toutes les étiquettes d'éditeur.
var labels = e.container.find('.k-edit-label');
e.sender.columns.forEach(function (element) {
if (element.hideMe) {
var index = labels.find('label[for="' + element.field + '"]').parent().index();
if (index !== 0) //Prevent a potential zero division
index = index / 2;
e.container.find(".k-edit-label:eq(" + index + "), " + ".k-edit-field:eq( " + index + ")").hide();
}
});