有没有办法隐藏编辑弹出窗口中仍应在网格本身中可见的字段？
我尝试将其设置为 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 }
}
}
}
【问题讨论】：
标签： kendo-ui kendo-grid
类似的解决方案对我有用：
edit: function(e) {
e.container.find(".k-edit-label:first").hide();
e.container.find(".k-edit-field:first").hide();
},
【讨论】：
k-edit-label 和k-edit-field 是父级div 的前两个子级k-edit-form-container。 使用自定义模板，无法保证第一个 input 就是您要隐藏的内容！ 因为第一个“输入”（或模板想要的任何内容）是 在第一个k-edit-field div，这个答案的选择器有更少的边缘情况。您还可以使用 jQuery 的 :eq(n) 零索引选择器来隐藏第三个标签和字段（注意“或”选择器）：e.container.find(".k-edit-label:eq(2), .k-edit-field:eq(2)").hide();
没有像“hidden: true”这样的选项，这就是它被忽略的原因。您可以使用网格的edit 事件从弹出窗口中隐藏某些元素：
$("#grid").kendoGrid({
edit: function(e) {
e.container.find("input:first").hide();
}
});
【讨论】：
如果你在 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 字段的名称。
【讨论】：
我喜欢the answer @jfl gives，采纳这个想法并将其扩展为一个不错的、可重复使用的设置很有用。
为什么？跟踪需要隐藏的列序号是很脆弱的。也就是说，@jfl 的答案仅适用于第一个字段集/列，甚至the version in my quick comment 也要求列的顺序和潜在数量不变。
相反，您可以通过在列的声明中放置一个属性来标准化隐藏列的方式，然后在弹出窗口显示后调用的edit 事件处理程序中检查它。您会在 edit 事件中获得对完整 columns 声明的引用，因此我们有很大的灵活性。
我有 a full example at this 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，但你明白了。）
【讨论】：
要隐藏一个字段，只需将其添加到视图模型：
[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)
}))
【讨论】：
类似的解决方案对我有用：
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();
},
【讨论】：
如果您使用的是 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 控件。前端没有占用空间;)
【讨论】：
例如有字段 PK_:
edit: function(e) {
e.container.find("input[name='PK_']").hide();
e.container.find("label[for='PK_']").hide();
}
【讨论】：
除了使用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();
}
});
【讨论】：
创建一个这样的函数：
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 不会显示在弹出编辑器中。
【讨论】：
不要忘记在模型上使用数据注释的选项：
[HiddenInput(DisplayValue = false)]
（如果您的模型基于 ASP.NET MVC）
【讨论】：
扩展 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 将未声明的列字段报告为错误。
【讨论】：
像这样在数据模型类“[ScaffoldColumn(false)]”中设置
公开课学生数据 {
[ScaffoldColumn(false)]
public int Id { get; set; }
public string Name { get; set; }
}
这将在弹出窗口中隐藏一个 id。 这是用于 ASP.NET MVC 的 UI
【讨论】：