Cách thay đổi chiều cao của Lưới Kendo ui

Question

Làm cách nào để thay đổi chiều cao của Lưới Kendo khi sử dụng trình bao bọc?

Answer 1

Tôi giả sử phương pháp bạn đang tìm kiếm nằm trong cấu hình có thể cuộn được (vì có một Grid cần để có thể cuộn nếu bạn muốn có chiều cao)

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

Answer 2

HtmlAttributes() sẽ cho phép bạn thêm các thuộc tính cho <div> chứa các thanh công cụ, phân trang, bảng, vv

TableHtmlAttributes() sẽ cho phép bạn thêm các thuộc tính để chỉ <table> yếu tố

Exmaple thiết lập bảng để 750px bằng cách thêm thuộc tính kiểu:

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

Answer 3

Bạn cũng có thể sử dụng quy tắc css bên ngoài cho điều này, có thể thích hợp hơn nếu lưới của bạn được sử dụng lại (như trong một phần xem). Nếu bạn cung cấp thuộc tính kiểu hoặc chiều cao, Kendo sẽ thêm các thuộc tính đó vào dòng và do đó chúng không thể được ghi đè bởi một biểu định kiểu bên ngoài. Đôi khi bạn muốn điều đó, nhưng đôi khi bạn không.

Sử dụng chuỗi .Name() được cung cấp cho trình bao bọc, thật dễ dàng để viết quy tắc css để nhắm mục tiêu tiêu đề hoặc nội dung.

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

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

Lưu ý rằng lớp .k-grid-header-wrap có thể khác nhau tùy thuộc vào cách bạn khởi tạo lưới. Ngoài ra, bạn phải nhắm mục tiêu các thẻ tr hoặc th bên trong tiêu đề. Tạo kiểu cho toàn bộ tiêu đề (thường là thẻ div) dẫn đến kết quả không phù hợp. Một số trình duyệt sẽ không áp dụng quy tắc, một số trình duyệt sẽ để lại hiện vật có thể nhìn thấy nơi đường viền của tr/thứ thực bắt đầu.

Ồ, và tôi cũng nên nói rằng cách tiếp cận này cho phép sự linh hoạt khi thay đổi giữa lưới bao bọc MVC tạo lưới và lưới tạo j thông thường. Hoặc bạn có thể tái sử dụng bảng định kiểu giữa các lưới khác nhau.

Answer 4

Để thay đổi chiều cao động

loại bỏ htmlattributes:

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

Thêm cuộn với ô tô:

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

Answer 5

Trong những gõ mạnh sử dụng cho một chiều cao cố định cứng nhắc

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

Trong Js sau khi sử dụng khai dataSource

$("#Grid").kendoGrid({ 

      dataSource: { }, 

      height: 450, 

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

      columns: 
       [ 
        *** 
       ] 
     }); 

Bạn cũng có thể ràng buộc lưới của bạn cho tối thiểu và chiều cao tối đa cho tất cả các bạn có girds qua css.

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

Hoặc bạn có thể chỉ định lưới cụ thể, bạn thay thế lưới .k bằng id lưới cụ thể #YourGridName. Hi vọng điêu nay co ich.