[Solved] Pager pageSizes dropdownlist width

[Josh]

I'm trying to control the width of the options displayed in the page sizes part of the pager (used in conjunction with a listview). Right now they seem to be driven by the width of the k-input holding the page-sizes value. The problem is that we have customized the design of our dropdowns to be wider and more spacious, but the options for the page sizes do not reflect that width (yet, this works for explicit dropdownlist widgets) and I can't seem to find a way to control their width. Can you recommend a way (css classes or other properties) to control that?

[Iliana Dyankova]

Hello Joshua,

You could change the grid pager dropDownList width using the following CSS rule: 

.k-pager-wrap .k-dropdown{
    width: 280px; /* specify the width */
}

Regards,
Iliana Nikolova
Telerik

[Josh]

(apologies for the delayed response - just now getting back to this issue)

Thanks Iliana. This doesn't solve the problem I'm having. I don't see how to control where these elements get their width setting.

Here is a js.bin to demonstrate the issue:
http://jsbin.com/eqocIYIf/1/edit

(apologies for the messy CSS - I had to hack it out of some large files)

[Iliana Dyankova]

Hi Josh,

In case you would like to change the pager DropDownList list width you could use the following code snippet: 

var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
ddl.list.width(100);

For your convenience here is the updated jsBin example. 

Regards,
Iliana Nikolova
Telerik

[Chris]

If you want to force the DropDownList element to auto resize it's width and force the DropDownList  and Items List to have the same width, you can use the following JS code.  I include it in the following grid DataBound event handling function that also updates the grid PageSize to show all items in the grid DataSource.

        var onDataBound = function() {
            try {
                if (dataIsBound === false) {//this is a global JS variable that is initialized as false when the page loads
                    dataIsBound = true;
                    var grid = $("#yourGridName").data("kendoGrid");
                    if (grid != null) {
                        if (grid.dataSource != null) {
                            if (grid.dataSource.data() != null) {
                                dataItems = grid.dataSource.data();
                                if (dataItems != null) {   

                                   // ensure all data source items are displayed
                                   grid.dataSource.pageSize(dataItems.length);
                                   grid.refresh();

                                    // force dropdownlist and items list to have same width:
                                    var ddl = $('[data-role="dropdownlist"]').data("kendoDropDownList");
                                    if (ddl != null && ddl.list != null) {
                                        var ele = $('[role="listbox"]');
                                        if (ele != null) {
                                            ele.width("auto");
                                            ddl.list.width(ele.width());
                                            console.log("---- updated ele.width(auto) = " + ele.width());
                                            console.log("---- updated ddl.list.width = " + ddl.list.width());
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            } catch (ex) {
                console.log("error: " + ex.message);
            }
        };