I am using a kendo dropdown list (with static content) inside a kendo grid column as given below:

    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');
        });

The data source for the dropdown list has 10 records, but only 9 can be seen in the dropdown without having to scroll down. Now, I would like to set up the dropdown list so that all 10 records are seen without having to scroll. Can someone show me a way how to do this?

Thanks and best regards. Manu

I am using a kendo dropdown list (with static content) inside a kendo grid column as given below:

    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');
        });

The data source for the dropdown list has 10 records, but only 9 can be seen in the dropdown without having to scroll down. Now, I would like to set up the dropdown list so that all 10 records are seen without having to scroll. Can someone show me a way how to do this?

Thanks and best regards. Manu

• javascript
• kendo-ui
• kendo-grid
• kendo-asp-mvc

1 Answer 1

You can use the DropDownList's height configuration(http://docs.telerik./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
    });
}

This setting is "suggestion" as the height of the popup will not exceed the height of items, i.e. even if you set the value to 1000 but it only takes 500px to show all the items, the popup will only be 500px.

Example: http://dojo.telerik./@Stephen/OCOkI

Without the height config, there will be a scrollbar on the Category popup and with it the popup will be just big enough to show all the items.