CODEWITHSUNDEEP
javascriptkendo-uikendo-gridkendo-asp.net-mvc
Manu
Manu

Reputation: 1470

How to adjust the height of the kendo dropdown list window

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

Upvotes: 1

Views: 6555

Answers (1)

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

You can use the DropDownList's height configuration(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
    });
}

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.com/@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.

Upvotes: 6

Related Questions