This is a migrated thread and some comments may be shown as answers.

Dropdownlist as Filters resetting the height

3 Answers 160 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ALEXIS V.
Top achievements
Rank 1
ALEXIS V. asked on 12 Jun 2014, 02:55 PM
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.

3 Answers, 1 is accepted

Sort by
0
ALEXIS V.
Top achievements
Rank 1
answered on 12 Jun 2014, 07:23 PM
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.
0
ALEXIS V.
Top achievements
Rank 1
answered on 13 Jun 2014, 01:06 PM
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.

0
Alexander Popov
Telerik team
answered on 16 Jun 2014, 01:07 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
ALEXIS V.
Top achievements
Rank 1
Answers by
ALEXIS V.
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or