KendoUI grid edit popup, how to hide field

Question

Is there a way to hide a field in edit popup that should still be visible in the grid itself?

I have tried setting it to hidden:true, but kendo seems to ignore it. When editable is set to false, it hides the textbox but field label is still shown. Is it possible to get rid of both label and textbox?

My datasource:

schema: {
    total: "Total",
    data: "Data",
    model:{
        id:"Id",
        fields:{
            Id:{ visible: false, editable:false },
            Name:{ editable:true },
            NumberOfUsers:{ hidden:true, editable:false }
        }
    }
}

Answer 1

There is no such option as "hidden: true" and this is why it is being ignored. You can use the edit event of the grid to hide some element from the popup window:

$("#grid").kendoGrid({
  edit: function(e) {
     e.container.find("input:first").hide();
  }
});

Answer 2

Similar solution worked for me:

edit: function(e) {
    e.container.find(".k-edit-label:first").hide();
    e.container.find(".k-edit-field:first").hide();
},

Answer 3

If you are using Html.Kendo().Grid<>() for ASP.NET MVC, you should do this:

Add Edit event handler to .Events in your control attributes like this:

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

Where "hideIdField" is your js event handler function.

In EventHandlers.js, add the function.

function hideIdField(e) {
   $("#ProductID").hide();
   $("label[for='ProductID']").hide();
}  

Where ProductID is the name of your Id field from your source model.

Answer 4

I like the answer @jfl gives, and it's useful to take that idea and extend it to a nice, reusable setup.

Why? There's a brittleness to keeping track of what the ordinal of the column is that you need to hide. That is, @jfl's answer only works for the first fieldset/column, and even the version in my quick comment requires that the order and potentially number of columns doesn't change.

Instead, you can standardize how you hide columns by placing a property in the columns' declaration, and then check for it in the edit event handler that is invoked after the popup is displayed. You get a reference to the full columns declaration in the edit event, so we've got a lot of flexibility.

I've got a full example at this fiddle, but here it is in brief:

I've added a hideMe property in the column declarations:

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

Then, building on the answer & comment mentioned earlier, I have this in my edit handler:

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

No more column ordinal tracking needed. You can add columns, change orders, hide new ones, whatever just by changing what has hideMe on it. (Looking back, I probably should've called that hideMeOnEdit, but you get the point.)

Answer 5

To hide a field simply add this to the view model:

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

And if you want to keep the filed and just be hidden, do like this:

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

Answer 6

Similar solution worked for me:

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();
},

Answer 7

If you are using UI for ASP.NET MVC, You can use the following approach where you can not only hide control itself but also hide FirstParent div which is occupying space on front-end.

Add Event handler

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

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

Hide ProductID control with Label and Parent tag. No space occupied on frond-end ;)

Answer 8

for exemple have field PK_:

 edit: function(e) {

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

Answer 9

As an alternative to using the loop's index as displayed in the answer given by ruffin, it is also a possibility to acquire the column's corresponding label index by searching for the for attribute matching the iterated column's field. Kendo's default template automatically generates a for attribute for all editor labels.

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

Answer 10

Create a function like this:

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

And then in your field, set the editor property as follows:

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 }

]

This way you can easily hide more that one field in the popup editor. In this case Field1, Field2, Field3 and Field4 will be displayed in the grid, but Field1 and Field4 will not be displayed in the popup editor.

Answer 11

Don't forget the option of using the data annotation on the model:

[HiddenInput(DisplayValue = false)]

(if your model is based on ASP.NET MVC)

Answer 12

Extending the answer given by ruffin for Typescript 1.x

in the grid edit event:

 , 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();
                    }
               }
         });
     }  

and in the column add the hideMe element as attribute:

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

This is necessary because typescript report as an error one column field that it is not declared.

Answer 13

Answer is here: Kendo-ui MVC PopUp editor: How to hide fields and here: http://www.telerik.com/forums/editing-grid-via-popup-mode-hide-fields