8 Answers, 1 is accepted
The unselectable attribute is not the cause of this problem because the parent elements are selectable.
I tried to replicate the scenario and seems that the pager works as expected on my side. Having said that, could you please modify the following test page so it clearly demonstrates the behavior of your project?
This will help me to fully understand the case. After that, I will be able to eventually provide a workaround/fix.
Regards,
Preslav
Progress Telerik

Hi Preslav - thank you for your reply. I did some more research and found that it was indeed not disabled. The list of options for # of results to show is actually being showed off screen to the bottom and quite a ways (20 or greater pixels) from the actual drop down. I'm not sure why that is but is there any way to always make it appear above the drop down instead of below it? Since it's at the bottom of the grid I don't ever want it to popup below itself, it will always be off screen.
Thanks!
Craig
Generally speaking, the popup should be displayed on top automatically. For example:
Having said that, I am not sure what is causing the described faulty behavior.
However, to force the popup to always show on the top, we could use the approach from this forum:
For example:
var
ddl = $(
".k-grid-pager [data-role='dropdownlist']"
).data(
"kendoDropDownList"
);
ddl.popup.setOptions({
origin:
"top left"
,
position:
"bottom left"
})
ddl.popup.options.animation.open.effects =
"slideIn:up"
For a runnable example, check this Dojo:
I hope this helps.
Regards,
Preslav
Progress Telerik

Hi Preslav - thanks for the help. I did try that custom code in document.ready but it doesn't seem to have any impact? Is there somewhere else I can set it. It really seems like the terlerik calcuations of where to place that page item count list is off. I inspected the browser elements and sometimes it's calculating at top 2000? Way off the screen. It's doing it so far off the screen that it causes the browser scroll bar to expand when I don't do anything. Please see the image attached for more details and let me know if you have any other ideas. It feels like the animation container is too blame. I don't need the animation - if I could turn that off maybe that would help?
Thank you as always!!
Craig
You can put the code in the dataBound event handler. However, I assume that if it does not work in the document ready, it won't work in the dataBound either.
Without replicating the problem, I am out of ideas how it can be fixed. Having said that, it will help me a lot to continue my investigation if you can prepare and share a sample runnable page with dummy data that clearly replicates and isolates the problem. Examining this page locally will help me fully understand the case and eventually I might be able to provide a workaround.
Regards,
Preslav
Progress Telerik

Hi Preslav - I have narrowed this down to it being the animations that kick in to slide the dropdown in and the filters, etc. It doesn't always determine the correct placement. This seems to be for all animations from what I've found from searching the web. Is there someway to turn off the animations?
I also noticed this from someone else which is very similar:
https://www.telerik.com/forums/positioning-issue-when-dropdownlist-is-near-bottom-of-page
If I can turn off anything to get this to work better that would be great. Please advise.
Thanks!
Craig

Thank you - that looks great in your sample but doesn't work for me. Already tried that from a previous post you sent. I know it's the animation because the only thing that helps is if I try to override those classes (I've also seen several posts on animation issues). This is what at least helps the animation to appear somewhat decently:
.k-animation-container {
position: relative !important;
top: -80px !important;
}
So yes I would like to turn off the animations or set their position as part of the drop down properties when it's initialized? Btw this has to do with ALL animations including the grid filter popups so it's an overall animations issues not just drop down so I need a global solution.
Thanks,
Craig
To disable all the Kendo UI animations, you could use this internal method:
kendo.effects.disable()
We are using the above method for testing purposes, however, I believe in your scenario it will fit the requirements.
I hope this helps.
Regards,
Preslav
Progress Telerik