I'm implementing functionality to create a link between two nodes on Shift+Alt+Click. Like this
function graphSelectionChange(event){
var selection = event.selection;
if (selection.length === 2 && event.altKey){
var fromitem=selection[0];
var toitem=selection[1];
chart.addData({
links:[{
"id":"ll"+nextId,
from:fromitem.id,
to:toitem.id,
"style":{"label":"newLink"}
}]
});
nextId += 1;
}
}
The altKey seems not to be detected. According to this http://jsfiddle.net/Rw4km/ it is the alt/option button on a keyboard. Any clue?
Use click event (it also has selection attribute).
Selection event does not have altKey property.
There are other selection changes, like selected nodes disappearing, that do not have associated mouse clicks an you probably do not want a link added in such case.
Related
I would like the pressed state of the trumbowyg toolbar buttons (bold/italic etc) to be read out by NVDA screen reader. I have implemented the aria-pressed solution, which works fine for VoiceOver; it reads out select/deselect when the buttons have been selected and deselected, however not for NVDA:
function addValuesToTextEditorButtons() {
const toggleButton = element => {
// Check to see if the button is pressed
var pressed = (element.getAttribute("aria-pressed") === "true");
// Change aria-pressed to the opposite state
element.setAttribute("aria-pressed", !pressed);
}
const handleBtnKeyDown = event => {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
toggleButton(event.target);
}
var buttons = $('.trumbowyg-button-pane .trumbowyg-button-group button[type="button"]');
buttons.each(function (index, element) {
let title = element.title.split(' ')[0]
element.value = title
element.setAttribute('aria-label', title)
element.setAttribute('aria-pressed', false)
element.setAttribute('role', 'button')
element.addEventListener('click', event => {
handleBtnKeyDown(event)
})
element.removeAttribute('tabindex')
});
}
First off, verify that the element you're setting aria-pressed on is a real button (or role='button'). It looks like that's true from your code snippet but would be the first thing to verify. ARIA attributes are only valid on certain elements. (See https://www.w3.org/TR/html53/dom.html#allowed-aria-roles-states-and-properties)
Some screen readers might still announce the value of the attribute even if it's not valid so sometimes that explains why one SR works (such as VO) whereas another does not (NVDA).
I've used aria-pressed successfully with all screen readers without a problem. For NVDA, it will announce the element as a "toggle button" and will say "pressed" or "not pressed" depending on the value.
I am trying to make clicking the right mouse button behave like the left mouse button when clicking on objects.
This is the code I have been playing around with:
$(".upper-canvas").bind('contextmenu', function (env) {
canvas.on('mouse:over', function(e) {
canvas.setActiveObject(e.target);
});
return false;
})
But it doesn't behave as I thought it would.
After right clicking on an object, it doesn't select the object, but then it subsequently and continuously selects elements on hovering.
I, perhaps naively, assumed the hover event would only be active one time on right-clicking.
So long as you're only working with objects, this should work:
$(".upper-canvas").bind('contextmenu', function(ev) {
var pointer = canvas.getPointer(ev.originalEvent);
var objects = canvas.getObjects();
for (var i = objects.length - 1; i >= 0; i--) {
if (objects[i].containsPoint(pointer)) {
canvas.setActiveObject(objects[i]);
break;
}
}
if (i < 0) {
canvas.deactivateAll();
}
canvas.renderAll();
ev.preventDefault();
return false;
});
When a user right clicks in the canvas, it gets the (x, y) coordinates of the click. Then it looks through all the objects in the canvas and selects an object if it contains the point. I believe that fabric retains z-order in reverse order in the objects list, so this should respect that since it goes through the list backwards. If the click doesn't select any object, then it will deselect any selected objects. Finally, it prevents default and returns false to prevent the normal right click pop up from occurring.
This should work fairly well with objects, but it probably won't work super well with groups.
When a Kendo grid cell is open for editing, what is the best way to close the cell (and move to the next cell) with the right arrow key?
Take a look on the following snippet. It is a simple way for doing what you want:
// Bind any keyup interaction on the grid
$("#grid").on("keyup", "input", function(e)
{
// Right arrow keyCode
if (e.keyCode == 39)
{
// Ends current field edition.
// Kendo docs says that editCell method:
// "Switches the specified table cell in edit mode"
// but that doesn't happens and the current cell keeps on edit mode.
var td = $(e.target)
.trigger("blur");
// Find next field
td = td.closest("td").next();
// If no cell was found, look for the next row
if (td.length == 0)
{
td = $(e.target).closest("tr").next().find("td:first");
}
// As ways happens on kendo, a little (ugly)workaround
// for calling editCell, because calling without
// the timer doesn't seem to work.
window.setTimeout(function()
{
grid.editCell(td);
}, 1);
}
});
I don't know why but I could not save a Fiddle for that, I got 500 Internal error. Anyway it seems to achieve what you need. The grid needs to be in edit mode incell.
I have a Kendo Grid, where I have defined an Editor like this:
#(Html.Kendo().Grid(Model.Data)
.Name("GridINT")
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("MyTemplateName")
.Window(w => w.Width(500))
.Window(w => w.Title("My Template")))
Before I engage the editor, I bind a mouseup handler to the rows, and I tweak the style of the command button. When the editor closes, whether by Submit, Cancel, or 'X', my handler and style tweaks are gone for the affected row. I need to restore them, but I haven't found the valid event. I have bound the cancel click event like this:
$('.k-grid-cancel').bind('click', function ( e ) {
colorCommandCells();
});
but if I restore my handler/style to a grid row here, the editor's closing process undoes what I have done.
Bottom line: how can I know that the editor is finished updating the grid (which it does, as I have described, even if the editor is cancelled) and which row was the one that the editor messed with?
This is the code that colors the command cells:
function colorCommandCells() {
// This block colors the command cell according to ISNEW. It must run every time the DataBound event occurs.
var grid = $("#GridINT").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
var currentUid = gridData[i].uid;
var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
var editButton = $(currentRow).find(".k-grid-edit");
var aColor = gridData[i].ISNEW == 1 ? "#FFCCFF" : "transparent";
var aText = gridData[i].ISNEW == 1 ? "Add" : "Edit";
var parent = $(editButton).closest("td");
$(parent[0]).css('background-color', function () { return aColor; });
editButton[0].innerHTML = "<span class=\"k-icon k-edit\"></span>" + aText;
}
}
Basically the Grid is rebound each time after such operations, and it is good to either use delegate events attached to the tbody of the Grid or bind the events each time when the dataBound event of the Grid occurs.
There are two parts to this answer: First, when building the DataSource for the Grid, assign a function to the Sync Event.
.Events(e => e.Sync("syncGrid"))
Also, when building the Grid, assign a function to the Cancel event.
.Events(e => e.DataBound("gridIsDataBound").Cancel("cancelEditor").Edit("gridEdit"))
You have to have both, because the Sync event will fire if the popup editor is closed via "Submit" and the Cancel event will fire if the popup editor is closed via "Cancel" or "X". Both functions should call something like this, where colorACommandCell is where I restore my style values:
function closeEditor() {
var timer;
clearTimeout(timer);
timer = setTimeout(colorACommandCell, 100);
}
There is still some activity related to the Grid that occurs after the editor closes (this is what clobbers my style tweaks). I found that, if I queued up my "fixes" to wait 0.1 seconds, then they would not get overwritten. Ideally, however, I'd like to have a more certain event that fires when the Editor is REALLY finished. I don't expect to be able to trust this timer on every machine that runs my code.
I have a tree-like structure using Kendo UI tree view. Each node is displayed as a hyperlink and on clicking each one, a new kendotabstrip will be opened. My problem is if I select one node, the results are displayed fine in a new tab but if I close the newly opened tab and then select the same node then no new tab is opened since the node has already been selected. If I have to choose the same node, then I have to access another node and then come back to node.
I tried to deselect the selected item once the new tab is opened using the following snippet:
var treeview=$(#grpTree).data("KendoTreeView");
var selNode=treeview.select();
selNode.find("span.k-state-selected").removeClass("k-state-selected")
but the node is not getting deselected. Is there any other way to do it or have I missed out anything?
I know this post is a bit dated, but as Telerik is continually upgrading its components, I thought I'd put this here so that people can be aware of this change moving forward.
You can deselect all selected nodes with the following syntax:
var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());
Source: Kendo UI Treeview Documentation for Select
Yes this is by design. If you want to attach a click handler which will be triggered each time (no matter if the node is already selected). You can attach a delegate event like the following:
$('#treeviewName').on('click','.k-item',function(e){
var clickedNode = $(this);
var treeViewClientObject = $(e.delegateTarget).data().kendoTreeView;
})
My code:
var treeview=$(#grpTree).data("KendoTreeView");
treeview.select(null);
This calls the change function always, so this can be another solution:
$("#favorite_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#calendar_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');
$("#calendar_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#favorite_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');