Come posso impostare una proprietà di larghezza massima per le singole colonne della griglia del kendo?

Question

Ecco un jsfiddle con una griglia kendo campione:

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

Ecco dove ho impostato le colonne 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(); 
}); 

ho aggiunto singole larghezze per ciascuna delle colonne. Tuttavia, vorrei anche impostare una larghezza massima per ogni colonna della griglia del kendo. È possibile impostare una larghezza massima (non impostata per tutte le colonne ma larghezza massima per le singole colonne?)?

Answer 1

Non esiste una proprietà come larghezza massima esposta per griglia di kendo. Una delle soluzioni rotonde sarà quella di impostare Larghezza della colonna come autosize e quindi utilizzare il modello in cui si utilizzano le proprietà CSS per mantenere la larghezza massima.

Di seguito è riportato l'esempio. Non sono sicuro se stai cercando la stessa risposta.

<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

Ho codice JavaScript che contribuirà a raggiungere questa funzionalità. Fornisce un modo per una colonna (comando) di mantenere una dimensione fissa.

Da un lato, funge da dimensione minima per una colonna, ma se la griglia dovesse aumentare di dimensioni, viene applicata la dimensione originale. Ciò consente ad altre celle della griglia di aumentare di dimensioni in misura maggiore.

Verificare this dojo che mostra questo codice in azione.

Si noti che tutte le colonne devono avere una larghezza specificata (questa diventa effettivamente una larghezza minima).

L'evento di ridimensionamento del browser viene utilizzato per attivare il ricalcolo delle dimensioni delle griglie.

Questa funzione supporta master/dettagli e raggruppamento.

Non ho considerato il ridimensionamento della colonna a questo punto.

Se avete idee per miglioramenti, provate!