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

Page Item Count "unselectable"?

8 Answers 370 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
Craig asked on 15 Jan 2018, 06:39 PM
Hey – was looking for a little help. My grid selector to select how many records to show in the grid is disabled and I’m not sure why. What controls the disabling of this drop down (see screen shot attached).It shows “unselectable” in the html..?

8 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 16 Jan 2018, 02:31 PM
Hello Craig,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Craig
Top achievements
Rank 1
answered on 18 Jan 2018, 04:34 PM

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

0
Preslav
Telerik team
answered on 22 Jan 2018, 10:42 AM
Hi 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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Craig
Top achievements
Rank 1
answered on 23 Jan 2018, 04:59 PM

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

0
Preslav
Telerik team
answered on 25 Jan 2018, 12:22 PM
Hi 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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Craig
Top achievements
Rank 1
answered on 30 Jan 2018, 06:01 PM

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

0
Craig
Top achievements
Rank 1
answered on 31 Jan 2018, 03:45 PM

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

 

 

0
Preslav
Telerik team
answered on 01 Feb 2018, 11:38 AM
Hi 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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Craig
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Craig
Top achievements
Rank 1
Share this question
or