Редактировать всплывающее окно KendoUI, как скрыть поле

Есть ли способ скрыть поле во всплывающем окне редактирования, которое должно быть видимым в самой сетке?

Я попытался установить его в скрытое: true, но kendo, похоже, игнорирует его. Когда для параметра editable установлено значение false, он скрывает текстовое поле, но метка поля все еще отображается. Можно ли избавиться от ярлыка и текстового поля?

Мой источник данных:

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

ОТВЕТЫ

Ответ 1

Нет такой опции, как "hidden: true", и поэтому ее игнорируют. Вы можете использовать событие edit сетки, чтобы скрыть какой-либо элемент из всплывающего окна:

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

Ответ 2

Аналогичное решение сработало для меня:

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

Ответ 3

Если вы используете Html.Kendo(). Grid < > () для ASP.NET MVC, вы должны сделать это:

Добавить Обработчик обработчика событий в .Events в ваших атрибутах управления, например:

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

Где "hideIdField" - это ваша функция обработчика событий js.

В EventHandlers.js добавьте функцию.

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

Где ProductID - это имя вашего поля идентификатора из исходной модели.

Ответ 4

Мне нравится ответ @jfl дает, и полезно принять эту идею и расширить ее до хорошей, многоразовой установки.

Почему? Там хрупкость, чтобы отслеживать, что порядковый номер столбца, что вам нужно скрыть. То есть @jfl-ответ работает только для первого поля/столбца, и даже версия в моем быстром комментарии требует, чтобы порядок и потенциальное количество столбцов не менялись.

Вместо этого вы можете стандартизировать, как вы скрываете столбцы, помещая свойство в объявление столбцов, а затем проверяйте его в обработчике событий edit, который вызывается после отображения всплывающего окна. Вы получаете ссылку на полное объявление columns в событии edit, поэтому у нас есть много гибкости.

У меня полный пример на этой скрипте, но здесь он кратко:

Я добавил свойство hideMe в объявлениях столбцов:

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

Затем, опираясь на ответ и комментарий, упомянутые ранее, у меня это есть в моем обработчике edit:

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

Больше не требуется отслеживать порядковый номер столбца. Вы можете добавлять столбцы, изменять заказы, скрывать новые, независимо от того, что изменилось на hideMe. (Оглядываясь назад, я, вероятно, должен был назвать это hideMeOnEdit, но вы поняли суть.)

Ответ 5

Чтобы скрыть поле, просто добавьте это в модель представления:

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

И если вы хотите сохранить подачу и просто скрыться, выполните следующие действия:

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

Ответ 6

Если вы используете интерфейс для ASP.NET MVC, вы можете использовать следующий подход, в котором вы можете не только скрыть сам контроль, но и скрыть div FirstParent, занимающий пространство на интерфейсе.

Добавить обработчик событий

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

Добавить 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>

Скрыть элемент управления ProductID с меткой Label и Parent. Нет места, занятого на конце;)

Ответ 7

для примера есть поле PK _:

 edit: function(e) {

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

Ответ 8

Аналогичное решение сработало для меня:

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

Ответ 9

Создайте такую ​​функцию:

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

И затем в вашем поле установите свойство editor следующим образом:

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 }

]

Таким образом вы можете легко скрыть больше одного поля в всплывающем редакторе. В этом случае поле Field1, Field2, Field3 и Field4 будут отображаться в сетке, но Field1 и Field4 не будут отображаться во всплывающем редакторе.

Ответ 10

Расширение ответа, данного ruffin для Typescript 1.x

в событии редактирования сетки:

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

и в столбце добавить элемент hideMe в качестве атрибута:

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

Это необходимо, потому что Typescript сообщает в качестве поля ошибки одно столбец, что оно не объявлено.

Ответ 11

В качестве альтернативы использованию индекса цикла, отображаемого в ответе ruffin, также можно получить соответствующий индекс столбца, указав атрибут for, соответствующий полю столбца с итерированием. Стандартный шаблон Kendo автоматически генерирует a for для всех ярлыков редактора.

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

Ответ 13

Не забывайте использовать аннотацию данных для модели:

[HiddenInput(DisplayValue = false)]

(если ваша модель основана на ASP.NET MVC)