Question

有没有办法隐藏编辑弹出窗口中仍然可以在网格中看到的字段？

我尝试将其设置为隐藏：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 }
        }
    }
}

Answer 1

类似的解决方案对我有用：

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

Answer 2

没有“hidden：true”这样的选项，这就是它被忽略的原因。您可以使用网格的edit事件来隐藏弹出窗口中的某些元素：

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

Answer 3

如果您使用的是ASP.NET MVC的Html.Kendo（）。Grid＆lt;＆gt;（），您应该这样做：

将Edit事件处理程序添加到控件属性中的.Events，如下所示：

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

其中“hideIdField”是你的js事件处理函数。

在EventHandlers.js中，添加函数。

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

其中ProductID是源模型中您的Id字段的名称。

Answer 4

我喜欢the answer @jfl gives，将这个想法扩展到一个漂亮的，可重复使用的设置非常有用。

为什么呢？要跟踪您需要隐藏的列的序数是一种脆弱性。也就是说，@ jfl的回答仅适用于第一个字段集/列，甚至the version in my quick comment也要求订单和可能的列数不会发生变化。< / p>

相反，您可以通过在列中放置属性来标准化隐藏列的方式。声明，然后在显示弹出窗口后调用的edit事件处理程序中检查它。您会在columns事件中获得完整edit声明的引用，因此我们可以获得很大的灵活性。

我已经a full example at this fiddle了，但这里简要介绍一下：

我在列声明中添加了hideMe属性：

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

然后，建立答案＆amp;前面提到的评论，我在我的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，但你明白了。）

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

Answer 6

如果您正在使用ASP.NET MVC的UI，您可以使用以下方法，您不仅可以隐藏控件本身，还可以隐藏占用前端空间的FirstParent div。

添加事件处理程序

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>

使用Label和Parent标记隐藏ProductID控件。在前端没有占用空间;）

Answer 7

类似的解决方案对我有用：

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 8

例如

有字段PK _：

 edit: function(e) {

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

Answer 9

创建一个这样的函数：

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

然后在您的字段中，按如下方式设置编辑器属性：

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将不会显示在弹出编辑器中。

Answer 10

不要忘记在模型上使用数据注释的选项：

[HiddenInput(DisplayValue = false)]

（如果您的模型基于ASP.NET MVC）

Answer 11

扩展由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报告为未声明的一个列字段的错误。

Answer 12

作为使用ruffin给出的答案中显示的循环索引的替代方法，还可以通过搜索与迭代列的字段匹配的for属性来获取列的相应标签索引。 Kendo的默认模板自动生成所有编辑器标签的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();
    }
});

Answer 13

答案在这里： Kendo-ui MVC PopUp editor: How to hide fields 和这里： http://www.telerik.com/forums/editing-grid-via-popup-mode-hide-fields

Answer 14

像这样在数据模型类“[ScaffoldColumn(false)]”中设置

公开课学生数据 {

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

这将在弹出窗口中隐藏一个 id。 这是用于 ASP.NET MVC 的 UI

KendoUI网格编辑弹出窗口，如何隐藏字段

14 个答案: