The Kendo ui Scheduler does not render correctly unless the containing element is visible at initialization time.
If you call .kendoScheduler() on an element that is not "on screen" (e.g. display: none) it does not render and function correctly.
In particular the height, scrollbars and time bar properties do not result in expected functionality. But if element start visible the problem does not appear
Error example
The Scheduler uses JavaScript size calculations and these do not work for hidden elements.
To readjust the widget layout, execute the resize() method of the Scheduler after it becomes visible.
http://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages#individual-widget-resizing
Related
I need Modal Page appears with "slide from bottom and cover (NOT push) current page" transition.
I set parameter animated of showModal method, but nothing changed.
How implement such transition for Modal Page? Android platform.
it's bug github.com/NativeScript/NativeScript/issues/5989
I have kinda hacky stuff, wrapping my elements with AbsoluteLayout and give it a high top value like '800',
and in navigatedTo function make transition animation with the negative value of the top attribute. In your case you would use left attribute and make transition over x.
Another solution that looks better in the UI, adding a custom component that would act as your modal, wrap your page elements with AbsoluteLayout, add your custom component when you need to show your modal, and apply the previous animation hack to it.
Tip: You can set the actionBarHiddin = true if you want to your custom component to overlay the full screen.
Tip: async/await and then would be very useful for the smoothing matters.
There's a collapsible sidebar on my webpage. When I collapse it, I want the svg element on the page to resize to take up all of the new blank space.
The function that resizes the svg is working. However, it is not being triggered when the sidebar is collapsed.
I have tried:
d3.select("#mydivHoldingSVG").on("resize", MyResize)
Where #mydivHoldingSVG is a <div> and MyResize is the function to resize the svg.
When the sidebar is collapsed, the <div> element increases in size (as inspected via Google Chrome developer view), which I thought constituted a "resize".
If the window is resized, that is, if I use:
d3.select(window).on("resize", MyResize)
Then the svg resizes correctly.
I have looked at the list of standard events to see if one can be applied to the div element (#mydivHoldingSVG) but I'm not seeing an obvious "when a div element changes" event.
Is there an eventListener that can be added on a <div> element being resized or changed?
The gist is that you should do it another way: the resize event only pertains to the window and will not fire on any other element.
The cleanest way to solve this problem would be call MyResize when you call whatever function is collapsing your sidebar, rather than trying to indirectly listen for the sidebar being collapsed.
We're using lots and lots of Kendo grids, many of which have virtual scrolling set up with a server-side data source.
Sometimes, one of them will hide records beyond the "reach" of the virtual scrollbar. We can see what's going on by using Developer Tools to make the internal scrollbar visible:
It's hard to put a finger on when this happens exactly - the bug keeps popping up in seemingly random places.
Any ideas how to narrow this down / deal with it?
Try resetting the virtual scroller in the grid onDataBound event.
onDataBound: function(evt) {
//Repaint the virtual scroll bar to make sure all rows are visible to user
var grid = evt.sender.wrapper.data("kendoGrid");
grid._rowHeight = undefined;
grid.virtualScrollable.refresh();
},
You need to do this on detail row expand and shrinks as well.
I tried virtualScrollable.refresh(), does not fully shown the hidden content, but using resize(true) works
$("#yourGridId").data("kendoGrid").virtualScrollable.refresh(); //does not fully show hidden content
$("#yourGridId").data("kendoGrid").resize(true); //works
just need to call this from all the related events (still working on identifying them)
As Telerik (more or less) points out in the docs, changes to the rowheight in a grid with virtual scrolling won't work when the grid has display: none.
We had an event handler that would hide the grid and fire an async call. On success of the async call, we were changing a value that resulted in a different rowheight (removed bold from one row).
That was enough to throw off the scrolling as pictured.
Is it possible to create and display an ad hoc jQuery UI tooltip, from with a particular TD element's mouseenter eventhandler, conditionally, if the value of the cell is above a certain amount, say? The code would test the cell's value and instantiate and display the tooltip after 500ms had elapsed, and close the tooltip in the mouseleave. By "ad hoc" I mean without having attached the tooltip to a selector in the document.ready section.
EDIT: The reason for my question: is there a significant memory or processing overhead to attaching a tooltip to every cell in a large table, when only a few of the cells would actually meet the conditions where a tooltip would be opened?
I'm implementing a image viewer based on the Image Viewer example (http://doc.trolltech.com/4.7-snapshot/widgets-imageviewer.html)
But I'm using the design mode for the interface.
A QLabel inside a QScrollBar QScrollArea. The image appears, but when I zoom, the bars never appear.
I found out the setValue() method -used in adjustScrollBar() method- from each scrollBar, never modifies its value (it's always 0).
If that value was greather than 0, the bar would appear. In the original example, it does.
What am I missing in UI designer??
Thanks.