Dropdownlist as Filters resetting the height

[ALEXIS V.]

Hi,

I have a grid which display items. The items are refreshed depending in the selection of a comboBox. Some of the filters are dropdownlists that display options related to the current items in the grid.

Each time the selection of the comboBox is changed I need to change the items in the grid and the filters that were accessed.

When the dropdownlists are getting reseted/refreshed the height is resetting.

The setup of the column:

{ field: "DOSExceptionCategory", title: "DOS Exception Category", width: 150, locked: false, lockable: false, filterable: { ui: exceptionCategoryFilter }, headerAttributes: { style: "overflow: visible; white-space: normal" } }

The setup of the dropdownlist filter:

var ksslExceptionCategory = [];

function exceptionCategoryFilter(element) {
    ksslExceptionCategory.push({
        LocationID: selectedLocationId, Filter: element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "locations/getdosexceptioncategories",
                        data: function () {
                            return { locationID: parseInt($("#comboBoxLocation").val()) };
                        }
                    }
                }
            },
            dataTextField: "Text",
            dataValueField: "Value",
            optionLabel: "--Select Value--",
            height: 450
        }).data("kendoDropDownList")
    });
}

The setup in the columnMenuInit to reset the dropdownlist filter (some code is omitted here):

columnMenuInit: function (e) {
        var popup = e.container.data("kendoPopup");
        var field = e.field;

        popup.bind("open", function (e) {
            switch (field) {
                case "DOSExceptionCategory":
                    $.each(ksslExceptionCategory, function (i, element) {
                        if (element.LocationID != selectedLocationId) {
                            element.LocationID = selectedLocationId;
                            element.Filter.dataSource.read();
                        }
                    });
                    break;

Any help will be appreciated.

Thanks.

[ALEXIS V.]

The height that is resetting is the height of the list of the dropdownlist. The attached print screens have an example of what I am talking about.

Thanks.

[ALEXIS V.]

Hi,

I dont know if I havent explain the issue right. The issue is that after resetting the dropdownlist datasource the dropdownlist-"list" is not showing the scroll bar.

for now this is fixing the issue:

.k-list {
    max-height: 350px !important;
}

I don't know if this is the cleanest way to go (because it affects other lists as well), but for now is road I am taking until a better solution comes up.

[Alexander Popov]

Hi Alexis,

In the current scenario I would recommend subscribing to the Grid's columnMenuInit event. Once the event is triggered you can manually adjust the CSS properties of the lists only inside it. For example: 

$("#grid").kendoGrid({
    columnMenuInit: function(e){
      e.container.find(".k-list").css("background-color", "red");
    }

Regards,
Alexander Popov
Telerik