Is it possible to specify the left and top or X,Y position of the Popup Kendo menu?
As I can see from the official documentation
http://docs.telerik.com/kendo-ui/api/javascript/ui/popup#configuration-position
it's only possible to specify some string parameters.
But I would like to specify the exact position (for example the position of the mouse click)
I've solved by stepping into Kendo UI source code I've found that you can specify the exact position of the popup in the open method simply doing popup.open(x,y).
See this modified Kendo Example
But it's not documented
Kendo Popup Open documentation
You could try to override the position of the popup via jQuery's css function in the open event.
open: function(event) {
event.sender.element.css("top", "20px");
}
Related
I use CkEditor BalloonEditor:
BalloonEditor.create(document.querySelector('#editor'), { ...options... });
By design the balloon toolbar of CkEditor 5 is only shown when I mark some text in the editor. That's totally okay for standard text operations as making a text bold, italic or changing its colors.
But if I want to insert something (image, table, media) I first must type something, mark it, so that the toolbar is shown before I can insert new content. That is not practical. So actually the balloon editor is great for changing existing content, not to insert new content.
My idea now is, that I want to open the toolbar by clicking with the right mouse button, showing the toolbar instead of the browser's context menu. Nice would be if the toolbar then only contains actions to insert new content (as inserting image, table, media) and the actions for formatting content (as bold, italic, font color) disappears or at least are disabled.
So basically I would implement something like:
<div id="editor" oncontextmenu="showContextMenu(event)">
...
function showContextMenu(event) {
event.preventDefault();
// --> Open here the balloon toolbar at the current caret position. How?
}
I tried finding a solution with a hack:
When clicking with the right mouse button, I inserted a space character at the clicked position and marked/selected it automatically so that the CkEditor balloon editor opened the toolbar. That worked so far, but then I had this undesired space character in the document and I struggled to remove it gracefully afterwards. Furthermore the context menu also contained the text formatting actions (as bold, italic and so on, since there was text - the inserted space selected).
Another idea would be to develop an own toolbar completely detached from CkEditor and then using Commands to insert the appropriate commands as #denov has suggested in his solution. But I think this should actually be possible to achieve with the CkEditor API by using the class ContextualBalloon. But how?
Does anyone have any idea how to achieve this or can guide me with some directions?
Thx!
For images you can just drag the image into the editor.
Commands are the way to interact with the editor. The Images plugin uses the ImageInsertCommand
assuming you have the editor assigned to the global window object you could do
function showContextMenu(event) {
event.preventDefault();
window.editor.execute('imageInsert', { source: 'https://upload.wikimedia.org/wikipedia/commons/8/8d/Frog_on_palm_frond.jpg'} )
}
Unfortunately, it's not possible to show the balloon toolbar if the selection is collapsed. This behaviour is defined here.
I would like complex button, which has several text elements and which should change their state and color depending on button state.
Unfortunately, I see that Xamarin button has only predefined image and text parameters.
How to have multiple controls inside a button in Xamarin?
Visual state manager(Only XF 3.0+) have three states: normal, disabled, focused which is named "CommonStates", or you can create custom states.Maybe it could help:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager
I think you must read more in content view, where you can add labels into stacklayout or grid with your own api bindable property, then use it wherever you want in your code:
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.contentview
I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}
I have a data table, and on one of the columns, i have tooltip for specific information about the specific rows, now i am trying to place a link inside the tooltip, and that should be clickable (which should navigate to another page),
so here i am unable to click the link inside the tooltip, because when we try to move mouse inside tooltip the tooltip also moving,
and i want the tooltip to be displayed on mouseover as usual and also when i click a specific row that tooltip should stay there and it should allow me to click that link.
can some one help me out for this?
You should set the followMouse attribute to false
i'm developing a simple Firefox Addon: a button with popup shown with a classical mouse over event.
Does someone know if is possible set the position of the popup ?
Ex: top left instead bottom right
Thanks
Did you take a look at this?
Also take a look at positioning popups. It also has an example.