KendoUI grille modifier popup, comment cacher le champ

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().Grille de<>() pour ASP.NET MVC, vous devriez faire ceci:

Ajouter Modifier gestionnaire d'événement .Les événements de votre contrôle d'attributs comme ceci:

.Events(e => e.Edit("hideIdField"))

où "hideIdField" est votre fonction de gestionnaire d'événements js.

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 la réponse @jfl donne, et il est utile de prendre cette idée et de l'étendre à une belle, réutilisable à l'installation.

Pourquoi? Il y a une fragilité à garder une trace de ce que l'ordinal de la colonne est que vous devez cacher. @Jfl réponse fonctionne pour le premier fieldset/colonne, et même la version de mon petit commentaire exige que l'ordre et éventuellement le nombre de colonnes ne changent pas.

à la place, vous pouvez standardiser la façon dont vous masquez les colonnes en plaçant une propriété dans la déclaration des colonnes, et ensuite vérifier dans le edit event handler qui est invoqué après l'affichage du popup. Vous obtenez une référence à l' columns déclaration edit événement, nous avons donc beaucoup de souplesse.

j'ai un exemple complet à ce violon, mais il est ici en bref:

j'ai ajouté un hideMe propriété dans la colonne déclarations:

columns: [
    { field: "name" },
    { field: "position" },
    {
        field: "age",
        hideMe: true              // <<< This is new.
    },
    { command: "edit" }
],

alors, en me basant sur la réponse et le commentaire mentionnés plus haut, j'ai ceci dans mon edit gestionnaire:

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 traçage ordinal des colonnes. Vous pouvez ajouter des colonnes, changer des ordres, cacher de nouvelles, n'importe quoi en changeant ce qui a hideMe. (En y repensant, j'aurais probablement dû appeler celahideMeOnEdit, mais vous avez compris.)

si vous utilisez L'UI pour ASP.NET MVC, vous pouvez utiliser l'approche suivante où vous pouvez non seulement cacher le contrôle lui-même, mais aussi cacher la div première partie qui occupe de l'espace sur le front-end.

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 de la production avec L'étiquette et l'étiquette de Parent. Aucun espace occupé sur le front-end ;)

for example have field PK_:

 edit: function(e) {

    e.container.find("input[name='PK_']").hide();
    e.container.find("label[for='PK_']").hide();
}

pour masquer un champ, ajoutez simplement ceci au modèle de vue:

[ScaffoldColumn(false)] 
public int Id { get; set; }

Et si vous voulez garder l'déposé et juste être caché, faire comme ceci:

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

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éer une fonction comme ceci:

function noEditor(container, options) { container.prevObject.find("div[data-container-for='" + options.field + "']").hide(); container.prevObject.find("label[for='" + options.field + "']").parent().hide(); }

et ensuite 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 cacher plus d'un champ dans l'éditeur popup. Dans ce cas, Field1, Field2, Field3 et Field4 seront affichés dans la grille, mais Field1 et Field4 ne seront pas affichés dans l'éditeur popup.

extension de la réponse donnée par ruffin pour dactylographier 1.x

dans la grille éditer l'événement:

 , 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 ajouter l'élément hideMe comme attribut:

  columns: [
             {
                field: "Id",
                title: "", width: 1,
                attributes: { hideMe: true }
             },
   ...

c'est nécessaire parce que le rapport dactylographié comme une erreur un champ de colonne qu'il n'est pas déclaré.

comme alternative à l'utilisation de l'index de la boucle comme indiqué dans la réponse donnée par ruffin, il est également possible d'acquérir l'index d'étiquette correspondant de la colonne en recherchant le for attribut correspondant au champ de la colonne itérée. Le modèle par défaut de Kendo génère automatiquement for attribut pour toutes les étiquettes de l'é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();
    }
});

la Réponse est ici: Kendo ui MVC Contextuel de l'éditeur: Comment masquer les champs et ici: http://www.telerik.com/forums/editing-grid-via-popup-mode-hide-fields