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

score 24 · Answer 1 · edited Nov 03 '15 at 15:29

24

Similar solution worked for me:

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

edited Nov 03 '15 at 15:29

Uwe Keim

39,551
56
175
291

answered May 08 '13 at 13:40

jfl

451
3
7

2

This answer is more accurate. – Isilmë O. Mar 20 '15 at 12:17
3

"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();` – ruffin Dec 16 '15 at 20:13

score 18 · Accepted Answer · answered May 07 '13 at 11:16

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

score 14 · Answer 3 · edited Aug 27 '22 at 07:47

14

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 this function:

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

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

edited Aug 27 '22 at 07:47

CarenRose

1,266
1
12
24

answered Jul 22 '14 at 17:54

Dan Randolph

741
8
14

7

To hide a filed simply add this to the view model: [ScaffoldColumn(false)] – Azarsa Sep 27 '15 at 22:46

score 13 · Answer 4 · edited May 23 '17 at 12:10

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

Azarsa · Answer 5 · 2016-07-07T08:49:45.770

7

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

edited Jul 07 '16 at 08:49

answered Sep 27 '15 at 22:49

Azarsa

1,278
3
27
37

1

That hides it from the grid, which is not what the OP wants – pfeds Feb 18 '16 at 05:51

score 5 · Answer 6 · answered Nov 20 '15 at 22:26

5

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

answered Nov 20 '15 at 22:26

Danilo C.

51
1
1

score 3 · Answer 7 · answered Jul 03 '15 at 17:28

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

score 3 · Answer 8 · answered Mar 13 '16 at 21:13

3

for exemple have field PK_:

 edit: function(e) {

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

answered Mar 13 '16 at 21:13

TRIKI_Sami

79
1
9

Danny Bogers · Answer 9 · 2017-05-24T16:08:15.773

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

score 1 · Answer 10 · edited Oct 04 '22 at 11:14

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

score 1 · Answer 11 · edited Dec 03 '18 at 17:42

1

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)

edited Dec 03 '18 at 17:42

Dherik

17,757
11
115
164

answered Dec 03 '18 at 17:18

David Craft

11
1

Please refer to [How do I write a good answer](https://stackoverflow.com/help/how-to-answer) and provide some details in your answer. – Tom M Dec 03 '18 at 17:33

score 0 · Answer 12 · answered Jan 05 '16 at 21:09

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.

score 0 · Answer 13 · answered Jun 08 '17 at 12:54

0

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

answered Jun 08 '17 at 12:54

womd

3,077
26
20

Kapuriya Kapil · Answer 14 · 2021-08-10T05:44:01.737

0

set in datamodel class " [ScaffoldColumn(false)] " like this

public class studentdata {

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

this will hide an id in the popup. this is for UI for ASP.NET MVC

edited Aug 10 '21 at 05:44

answered Aug 10 '21 at 05:37

Kapuriya Kapil

11
2

score 0 · Answer 15 · answered Nov 15 '22 at 21:50

Similar to the answers provided by ruffin and Danny Bogers, we have been using the hideMe property, and in the edit event, calling the following function. As you can see, this allows you to hide fields from any edit, from only new items, or only existing items.

// Code to look for 'hideMe', 'hideOnNew' or 'hideOnEdit' attribute on a column.    
// Call from within kendoGrid({edit:function(e)})
function hideNonEditColumns(e) {
    let nonFieldColCount = 0;
    e.sender.columns.forEach(function (element, index) {
        if (!element.field) {
            nonFieldColCount++; //Count number of command elements to skip at beginning of the grid
        }
        let adjIndex = Number(index) - Number(nonFieldColCount);

        if (element.hideMe
            || (element.hideOnNew && e.model.isNew())
            || (element.hideOnEdit && e.model.isNew() == false)) {
            e.container.find(".k-edit-label:eq(" + adjIndex + "), .k-edit-field:eq( " + adjIndex + ")").hide();
        }
    });
}

KendoUI grid edit popup, how to hide field

15 Answers15