22

有没有办法在编辑弹出窗口中隐藏一个在网格本身中仍然可见的字段？

我尝试将其设置为 hidden:true，但剑道似乎忽略了它。当 editable 设置为 false 时，它​​会隐藏文本框，但仍显示字段标签。是否可以同时摆脱标签和文本框？

我的数据源：

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

14 回答 14

23

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

edit: function(e) {
    e.container.find(".k-edit-label:first").hide();
    e.container.find(".k-edit-field:first").hide();
},
于 2013-05-08T13:40:56.163 回答
18

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

$("#grid").kendoGrid({
  edit: function(e) {
     e.container.find("input:first").hide();
  }
});
于 2013-05-07T11:16:13.857 回答
14

如果你在 ASP.NET MVC 中使用 Html.Kendo().Grid<>()，你应该这样做：

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

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

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

在 EventHandlers.js 中，添加该函数。

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

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

于 2014-07-22T17:54:01.647 回答
12

我喜欢@jfl 给出的答案，采用这个想法并将其扩展到一个不错的、可重用的设置是很有用的。

为什么？跟踪需要隐藏的列序号是一件很脆弱的事情。也就是说，@jfl 的答案仅适用于第一个字段集/列，甚至我快速评论中的版本也要求列的顺序和潜在的数量不会改变。

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

我在这个 fiddle 有一个完整的例子，但这里是简短的：

我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，但你明白了。）

于 2015-12-17T14:51:07.360 回答
6

要隐藏字段，只需将其添加到视图模型：

[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)
}))
于 2015-09-27T22:49:25.453 回答
4

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

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();
},
于 2015-11-20T22:26:10.787 回答
3

如果您使用 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>

使用标签和父标签隐藏 ProductID 控件。前端不占用空间；）

于 2015-07-03T17:28:48.127 回答
3

例如有字段 PK_：

 edit: function(e) {

    e.container.find("input[name='PK_']").hide();
    e.container.find("label[for='PK_']").hide();
}
于 2016-03-13T21:13:53.577 回答
1

创建一个这样的函数：

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

于 2017-09-05T12:34:14.300 回答
1

作为使用 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();
    }
});
于 2017-05-24T16:03:12.520 回答
1

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

[HiddenInput(DisplayValue = false)]

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

于 2018-12-03T17:18:02.977 回答
0

扩展 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 }
             },
   ...

这是必要的，因为打字稿将未声明的列字段报告为错误。

于 2016-01-05T21:09:28.233 回答
0

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

    公共课学生数据{

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

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

于 2021-08-10T05:37:23.837 回答
0

答案在这里： Kendo-ui MVC 弹出编辑器：如何隐藏字段 ，在这里： http ://www.telerik.com/forums/editing-grid-via-popup-mode-hide-fields

于 2017-06-08T12:54:35.060 回答