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

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

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

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

Solution 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.)

Solution 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)
}))

View more solutions

Comments

[Isilmë O.]

This answer is more accurate.

[Azarsa]

To hide a filed simply add this to the view model: [ScaffoldColumn(false)]

[ruffin]

"Why more accurate?" you ask? In the popup, k-edit-label & k-edit-field are the first two children of the parent div with class k-edit-form-container. With custom templates, there's no guarantee the first input is what you're looking to hide! Since that first "input" (or whatever the template wants) is within the first k-edit-field div, this answer's selector has fewer edge cases. You could also use jQuery's :eq(n) zero-indexed selector to hide, say, the third label & field (note the "or" selector): e.container.find(".k-edit-label:eq(2), .k-edit-field:eq(2)").hide();

[pfeds]

That hides it from the grid, which is not what the OP wants

[Tom M]

Please refer to How do I write a good answer and provide some details in your answer.