Как установить свойство max-width для отдельных столбцов сетки kendo?

Question

Вот jsfiddle с образцом кендо сетки:

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

Вот где я поставил столбцы кендо:

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

я добавил индивидуальные ширины для каждой из колонок. Тем не менее, я также хотел бы установить максимальную ширину для каждого столбца сетки kendo. Можно ли установить максимальную ширину (не единицу для всех столбцов, а максимальную ширину для отдельных столбцов?)?

Answer 1

Для сетки кендо нет свойства, такого как max-width. Одним из раундов решения будет установка ширины столбца как автоматизация, а затем использование шаблона, в котором вы используете свойства css для поддержания максимальной ширины.

Ниже приведен пример. Не уверен, что вы ищете тот же ответ.

<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

У меня есть код JavaScript, который поможет достичь этой функциональности. Он обеспечивает способ для столбца (команды) сохранить фиксированный размер.

С одной стороны, он действует как минимальный размер для столбца, но если сетка должна увеличиваться в размере, применяется первоначальный размер. Это позволяет другим клеткам сетки увеличиваться в размере на большее количество.

Отъезд this dojo, который показывает этот код в действии.

Обратите внимание, что все столбцы должны иметь указанную ширину (это фактически становится минимальной шириной).

Событие изменения размера браузера используется для инициирования пересчета размеров решеток.

Эта функция поддерживает мастер/детали и группировку.

Я не рассматривал изменение размеров столбцов на этом этапе.

Если у вас есть идеи по улучшению, то идите!