Làm cách nào tôi có thể đặt thuộc tính chiều rộng tối đa cho các cột lưới kendo riêng lẻ?

Question

Dưới đây là một jsfiddle với một mạng lưới kendo mẫu:

http://jsfiddle.net/owlstack/Sbb5Z/1619/

Đây là nơi tôi đặt cột kendo:

$(document).ready(function() { 
    var grid = $("#grid").kendoGrid({ 
     dataSource: { 
      data: createRandomData(10), 
      schema: { 
       model: { 
        fields: { 
         FirstName: { 
          type: "string" 
         }, 
         LastName: { 
          type: "string" 
         }, 
         City: { 
          type: "string" 
         }, 
         Title: { 
          type: "string" 
         }, 
         BirthDate: { 
          type: "date" 
         }, 
         Age: { 
          type: "number" 
         } 
        } 
       } 
      }, 
      pageSize: 10 
     }, 
     height: 500, 
     scrollable: true, 
     sortable: true, 
     selectable: true, 
     change: onChangeSelection, 
     filterable: true, 
     pageable: true, 
     columns: [{ 
      field: "FirstName", 
      title: "First Name", 
      width: "100px", 
     }, { 
      field: "LastName", 
      title: "Last Name", 
      width: "100px", 
     }, { 
      field: "City", 
      width: "100px", 
     }, { 
      field: "Title", 
      width: "105px" 
     }, { 
      field: "BirthDate", 
      title: "Birth Date", 
      template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #', 
      width: "90px" 
     }, { 
      field: "Age", 
      width: "50px" 
     }] 
    }).data("kendoGrid"); 

    applyTooltip(); 
}); 

tôi thêm độ rộng cá nhân cho mỗi cột. Tuy nhiên, tôi cũng muốn đặt chiều rộng tối đa cho mỗi cột lưới kendo. Có thể thiết lập một chiều rộng tối đa (không phải là một thiết lập cho tất cả các cột nhưng chiều rộng tối đa cho các cột riêng lẻ?)?

Answer 1

Không có thuộc tính nào như độ rộng tối đa được hiển thị cho lưới kendo. Một trong những vòng về giải pháp sẽ được thiết lập chiều rộng của cột là autosize và sau đó sử dụng mẫu nơi bạn sử dụng thuộc tính css để duy trì chiều rộng tối đa.

Sau đây là ví dụ. Không chắc chắn nếu bạn đang tìm kiếm câu trả lời tương tự.

<style>.intro { max-width: 100px ;width: 20px ;background-color: yellow;</style> 


<script> 
$(document).ready(function() { 
       $("#grid").kendoGrid({ 
        dataSource: { 
         type: "odata", 
         transport: { 
          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
         }, 
         pageSize: 20 
        }, 
        height: 550, 
        groupable: true, 
        sortable: true, 
        pageable: { 
         refresh: true, 
         pageSizes: true, 
         buttonCount: 5 
        }, 
        columns: [{ 
         field: "ContactName", 
         title: "Contact Name", 
         template : '<span class=intro>#:ContactName#</span>' 
        }, { 
         field: "ContactTitle", 
         title: "Contact Title" 
        }, { 
         field: "CompanyName", 
         title: "Company Name" 
        }, { 
         field: "Country", 
         width: 150 
        }] 
       }); 
      }); 
     </script> 

Answer 2

Tôi có mã JavaScript sẽ giúp đạt được chức năng này. Nó cung cấp một cách cho một cột (lệnh) để giữ lại một kích thước cố định.

Một mặt, nó hoạt động như một kích thước tối thiểu cho một cột, nhưng nếu lưới đã tăng kích thước, kích thước ban đầu được thực thi. Điều này cho phép các ô lưới khác tăng kích thước bằng một lượng lớn hơn.

Khám phá this dojo cho biết mã này đang hoạt động.

Lưu ý rằng tất cả các cột cần phải có chiều rộng được chỉ định (điều này có hiệu quả trở thành chiều rộng tối thiểu).

Sự kiện thay đổi kích thước trình duyệt được sử dụng để kích hoạt tính toán lại kích thước của lưới.

Chức năng này hỗ trợ chính/chi tiết và nhóm.

Tôi chưa xem xét thay đổi kích thước cột tại thời điểm này.

Nếu bạn có bất kỳ ý tưởng cải tiến nào thì hãy tiếp tục!