Comment ajuster la hauteur de la fenêtre de liste déroulante kendo

Question

J'utilise une liste déroulante kendo (avec un contenu statique) à l'intérieur d'une colonne de la grille de kendo comme indiqué ci-dessous:

function artDropDownEditor(container, options) { 
    $('<input required data-text-field="Art" data-value-field="Landescode" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataSource: gridDataSource(actions.wasserversorgung.getAllWasserbezug, 10) 
     }); 
} 

     var wasserversorgungGrid = $("#wasserversorgung-grid").kendoGrid({ 
     dataSource: wasserversorgungGridDataSource, 
     scrollable: true, 
     navigatable: true, 
     sortable: true, 
     columnMenu: true, 
     selectable: "row", 
     editable: { 
      confirmation: "ausgewählte Wasserversorgung löschen?", 
     }, 
     pageable: { 
      pageSizes: [10, 20, 50], 
      refresh: true, 
     }, 
     filterable: true, 
     resizable: true, 
     height: 500, 
     columns: [ 
      { 
       field: "Wasserbezug", 
       title: "Art der Wasserversorgung", 
       width: "120px", 
       headerTemplate: "<span title='@I(40)' style='@S(40)'>Art der Wasserversorgung</span>", 
       editor: artDropDownEditor, 
       template: "#=Wasserbezug.Art#", 
      }, 
      ] 
     }).data().kendoGrid; 

     wasserversorgungGridDataSource.bind('dataBound', function(e) { 
      this.element.find('tbody tr:first').addClass('k-state-selected'); 
     }); 

La source de données pour la liste déroulante a 10 enregistrements, mais seulement 9 peuvent être vus dans la liste déroulante sans avoir à faire défiler vers le bas. Maintenant, je voudrais mettre en place la liste déroulante de sorte que tous les 10 enregistrements sont vus sans avoir à faire défiler. Quelqu'un peut-il me montrer un moyen de le faire?

Merci et meilleures salutations. Manu

Answer 1

Vous pouvez utiliser la configuration de la hauteur de DropDownList (http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-height)

function artDropDownEditor(container, options) { 
$('<input required data-text-field="Art" data-value-field="Landescode" data-bind="value:' + options.field + '"/>') 
    .appendTo(container) 
    .kendoDropDownList({ 
     autoBind: false, 
     dataSource: gridDataSource(actions.wasserversorgung.getAllWasserbezug, 10), 
     height: 1000 
    }); 
} 

Ce paramètre est « suggestion », comme la hauteur de la fenêtre ne dépassera pas la hauteur des éléments, à savoir même si vous définissez la valeur à 1000 mais il ne faut que 500px pour afficher tous les éléments, le popup ne sera que de 500px.

Exemple: http://dojo.telerik.com/@Stephen/OCOkI

Sans la configuration de la hauteur, il y aura une barre de défilement sur la catégorie pop-up et avec elle la fenêtre contextuelle sera juste assez grand pour montrer tous les articles.