KendoUI網格編輯彈出框，如何隱藏字段

Question

有沒有一種方法可以在編輯彈出窗口中隱藏應該仍然在網格中可見的字段？

我試着將它設置爲隱藏：true，但kendo似乎忽略它。 當可編輯設置爲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事件電網隱藏在彈出窗口中的一些元素：

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

Answer 2

類似的解決方案爲我工作。

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

Answer 3

如果您正在使用Html.Kendo（）電網< >（）爲ASP.NET MVC，你應該這樣做：

添加編輯事件處理程序.Events在控制屬性是這樣的：

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

其中「hideIdField」是您的js事件處理函數。

在EventHandlers.js中添加函數。

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

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

Answer 4

如果您正在爲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控制與標籤和父標記。佔據在頭端沒有空間;

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

類似的解決方案爲我：

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 7

我喜歡the answer @jfl gives，並採取，我是非常有用dea並將其擴展爲一個很好的可重用設置。

爲什麼？跟蹤需要隱藏的列的序號是脆弱的。也就是說，@ 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，但你明白了吧。）

Answer 8

擴展由網格編輯事件魯芬的打字稿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 } 
      }, 
    ... 

這是必要的，因爲作爲一個錯誤一列外地打字稿報告，它沒有聲明。

Answer 9

爲爲例具有字段PK_：

edit: function(e) { 

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

Answer 10

作爲替代使用循環的索引顯示在由魯芬給出的答案，它也是通過搜索獲取​​列的對應的標籤索引中的可能性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(); 
    } 
}); 

Answer 11

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

Answer 12

創建這樣的功能：

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不會顯示在彈出式編輯器中。