Okno edycji siatki KendoUI, jak ukryć pole

Question

Czy istnieje sposób na ukrycie pola w okienku edycji, które powinno być nadal widoczne w samej siatce?

Próbowałem ustawić to ukryte: prawda, ale kendo wydaje się to ignorować. Gdy opcja edycji jest ustawiona na false, ukrywa pole tekstowe, ale etykieta pola jest nadal wyświetlana. Czy można pozbyć się zarówno etykiety, jak i pola tekstowego?

Moje źródła danych:

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

Answer 1

Nie ma takiej opcji jak „ukryte: true”, a to dlatego, że jest ignorowany. Można użyć zdarzenia edit siatki ukryć jakiś element z okna popup:

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

Answer 2

Podobne rozwiązanie pracował dla mnie.

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

Answer 3

Jeśli używasz Html.Kendo() Siatka < >() dla ASP.NET MVC, należy to zrobić:

Dodaj Edycja obsługi zdarzeń do .Events w swoich atrybutów kontroli tak:

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

Gdzie "hideIdField" to funkcja obsługi zdarzeń js.

W EventHandlers.js dodaj funkcję.

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

Gdzie ID produktu to nazwa pola identyfikatora z modelu źródłowego.

Answer 4

Jeśli korzystasz z interfejsu użytkownika dla ASP.NET MVC, możesz skorzystać z poniższego podejścia, w którym można nie tylko ukryć samą kontrolę, ale także ukryć element div Divid, który zajmuje miejsce na front-end.

dodawania obsługi zdarzeń

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

Dodaj 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> 

Ukryj kontrolę ProductID z etykietą i tag dominującej. Brak miejsca zajęte na liści koniec;)

Answer 5

Aby ukryć pole po prostu dodać do modelu Widok:

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

A jeśli chcesz zachować złożony i po prostu być ukryte, zrób tak:

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

Answer 6

Podobne rozwiązanie pracował dla mnie:

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

Lubię the answer @jfl gives i jest przydatna do podjęcia że dea i przedłużyć go do ładnej konfiguracji wielokrotnego użytku.

Dlaczego? Istnieje kruchość w śledzeniu tego, co jest porządkowe w kolumnie, którą trzeba ukryć.Oznacza to, że odpowiedź @ jfl ma wartość tylko dla pierwszego zestawu pól/kolumny, a nawet the version in my quick comment wymaga, aby kolejność i potencjalnie liczba kolumn nie uległa zmianie.

Zamiast tego można ujednolicić sposób ukrywania kolumn, umieszczając właściwość w deklaracji kolumn, a następnie sprawdzając, czy zawiera ona obsługę zdarzeń edit, która jest wywoływana po wyświetleniu okna podręcznego. Otrzymasz odwołanie do pełnej deklaracji columns w wydarzeniu edit, więc mamy dużą elastyczność.

Mam a full example at this fiddle, ale tutaj jest to w skrócie:

Dodałem właściwość hideMe w deklaracjach kolumna:

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

Następnie, opierając się na komentarzu odpowiedź & wspomniano wcześniej mam to w moim edit obsługi:

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

Nie więcej kolumna porządkowa śledzenie potrzebne. Możesz dodawać kolumny, zmieniać zamówienia, ukrywać nowe, cokolwiek, zmieniając to, co ma na sobie hideMe. (Patrząc wstecz, pewnie powinien był nazywany że hideMeOnEdit, ale masz rację.)

Answer 8

Rozszerzanie odpowiedź udzieloną przez Ruffin za maszynopis 1.x

w przypadku edycji siatki:

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

aw kolumnie dodać element hideMe jako atrybutu:

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

jest to konieczne, ponieważ raport maszynopis jako pole błąd jednej kolumnie, która nie została zadeklarowana.

Answer 9

reprezentują np mają PK_ pola:

edit: function(e) { 

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

Answer 10

Jako alternatywę do stosowania wskaźnika pętla jako wyświetlane w odpowiedzi podane przez Ruffinowi, jest również możliwość nabyć odpowiedni indeks etykiety kolumny, wyszukując for atrybut pasujący do pola kolumny powtórzonej. Domyślny szablon Kendo automatycznie generuje atrybut o wartości for dla wszystkich etykiet edytora.

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

Odpowiedź jest tutaj: Kendo-ui MVC PopUp editor: How to hide fields i tutaj: http://www.telerik.com/forums/editing-grid-via-popup-mode-hide-fields

Answer 12

Tworzenie funkcji takiego:

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

a następnie w swojej dziedzinie, należy ustawić właściwość edytor następująco :

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 } 

]

W ten sposób możesz łatwo ukryć więcej niż jedno pole w edytorze wyskakujących okienek.W tym przypadku Pola 1, Pole 2, Pole 3 i Pole 4 będą wyświetlane w siatce, ale Pola 1 i Pole 4 nie będą wyświetlane w edytorze podręcznym.