Reputation: 1668

KendoUI grid edit popup, how to hide field

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

Upvotes: 24

Answers (15)

DBatesX

Reputation: 11

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

Upvotes: 0

jfl

Reputation: 451

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.

Upvotes: 1

Dan Randolph

Reputation: 751

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.

Upvotes: 14

Kapuriya Kapil

Reputation: 11

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

Upvotes: 0

David Craft

Reputation: 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)

Upvotes: 1

womd

Reputation: 3453

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

Upvotes: 0

Danny Bogers

Reputation: 110

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

Upvotes: 1

Azarsa

Reputation: 1308

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

Upvotes: 7

TRIKI_Sami

Reputation: 79

for exemple have field PK_:

 edit: function(e) {

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

Upvotes: 3

freedeveloper

Reputation: 4092

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.

Upvotes: 0

ruffin

Reputation: 17453

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

Upvotes: 13

Danilo C.

Reputation: 51

KendoUI grid edit popup, how to hide field

Answers (15)

Related Questions