Wie kann ich eine max-width -Eigenschaft auf einzelne Kendo-Gitterspalten einstellen?

Question

Hier ist ein jsfiddle mit einer Probe Kendo Raster:

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

Hier ist, wo ich die Kendo-Spalten gesetzt:

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

ich einzelne Breiten zu jeder der Spalten hinzugefügt. Ich möchte jedoch auch eine maximale Breite für jede Kendo-Gitterspalte festlegen. Ist es möglich, eine maximale Breite festzulegen (nicht eine für alle Spalten, sondern die maximale Breite für einzelne Spalten?)?

Answer 1

Es gibt keine Eigenschaft wie maximale Breite für Kendo-Gitter. Eine der runden Lösung wird sein, Breite der Spalte als automatische Größenanpassung und dann Vorlage verwenden, wo Sie CSS-Eigenschaften verwenden, um maximale Breite beizubehalten.

Folgendes ist das Beispiel. Nicht sicher, ob Sie nach der gleichen Antwort suchen.

<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

Ich habe JavaScript-Code, der dazu beitragen wird, diese Funktionalität zu erreichen. Es bietet eine Möglichkeit für eine (Befehls-) Spalte, eine feste Größe beizubehalten.

Auf der einen Seite fungiert es als Mindestgröße für eine Spalte, aber wenn das Raster vergrößert werden sollte, wird die ursprüngliche Größe erzwungen. Dies ermöglicht, dass andere Rasterzellen um eine größere Menge vergrößert werden.

Auschecken this dojo, die diesen Code in Aktion zeigt.

Beachten Sie, dass alle Spalten eine bestimmte Breite haben müssen (dies wird effektiv zu einer minimalen Breite).

Das Browserresize-Ereignis wird zum Auslösen der Größenneuberechnung der Raster verwendet.

Diese Funktion unterstützt Master/Detail und Gruppierung.

Ich habe die Spaltengrößenanpassung an dieser Stelle nicht berücksichtigt.

Wenn Sie irgendwelche Ideen für Verbesserungen haben, dann gehen Sie dafür!