Jak zmienić wysokość Kendo ui Grid

Question

Jak zmienić wysokość siatki Kendo podczas korzystania z owijarki?

Answer 1

Zakładam metoda szukasz jest pod przewijalnych konfiguracji (jest tam, ponieważ potrzeby jedna kratka być przewijane jeśli chcesz go mieć wysokość)

.Scrollable(scr=>scr.Height(230)) 

Answer 2

HtmlAttributes() pozwoli Ci dodać atrybuty do <div> która posiada paski narzędzi, stronicowania, stół, itp

TableHtmlAttributes() pozwoli Ci dodać atrybuty tylko <table> elementem

Exmaple stolu do 750px dodając atrybut style:

@Html.Kendo().Grid(Model) 
       .Name("Grid") 
       .TableHtmlAttributes(new {style="height: 750px;"}) 

Answer 3

Można również korzystać z zewnętrznych reguł CSS dla tego, co może być korzystne, jeśli siatka jest ponownie wykorzystywane (jak w częściowym widokiem). Jeśli podasz atrybut stylu lub wysokości, Kendo doda je w linii i dlatego nie można ich zastąpić zewnętrznym arkuszem stylów. Czasami tego chcesz, ale czasami nie.

Stosując łańcuch dostarczany do opakowania, można łatwo zapisać regułę css, aby kierować ją do nagłówka lub treści.

#GridName .k-grid-content { 
    height: 300px; /* internal bit with the scrollbar */ 
} 

#GridName .k-grid-header-wrap tr { 
    height: 75px; /* header bar */ 
} 

Uwaga, że ​​klasa .k-grid-header-wrap mogą się różnić w zależności od sposobu zainicjowania siatki. Ponadto musisz kierować znaczniki tr lub th do nagłówka. Stylizowanie całego nagłówka (zwykle jest to znacznik div) prowadzi do niespójnych wyników. Niektóre przeglądarki nie stosują tej reguły, niektóre przeglądarki pozostawiają widoczny artefakt, w którym zaczynają się granice rzeczywistego tr/th.

Aha, i powinienem również powiedzieć, że to podejście pozwala na elastyczność przy zmianie pomiędzy utworzoną siatką opakowania MVC a regularną siatką utworzoną przez js. Możesz też użyć arkusza stylów między różnymi siatkami.

Answer 4

Aby zmienić wysokość dynamicznie

usunąć htmlattributes:

.HtmlAttributes(new { style = "height:600px;" })

Dodaj przewijane z Auto:

.Scrollable(a => a.Height("auto"))

Answer 5

W silnie typowanych nich korzystać na sztywnej wysokości ustalonej

.Scrollable(scrollable => scrollable.Height(100)) 

w JS po użyciu deklaracji DataSource

$("#Grid").kendoGrid({ 

      dataSource: { }, 

      height: 450, 

      pageable: { 
       refresh: true, 
       pageSizes: true 
      }, 

      columns: 
       [ 
        *** 
       ] 
     }); 

Można także powiązać swoją siatkę dla minimalnej i maksymalnej wysokości dla wszystkich przepasuje masz przez CSS.

.k-grid .k-grid-content { 
min-height: 100px; 
max-height: 400px; 
} 

Albo można określić konkretnej sieci, wymianie .K-siatkę z konkretnym identyfikatorze siatki #YourGridName. Mam nadzieję że to pomoże.