When I click on a bar of a PanelBar I both select the option as well I toggle it (open / close). Is it possible not to open it but just select and click on the icon for controlling open/close?
I am afraid this is not supported. As a partial work-around you can make the PanelBar expand and select only by clicking the expand arrow like this:
$('#panelbarName>li').on('click',function(e){
if(!$(e.target).is('.k-icon')){
e.stopPropagation();
}
})
Unfortunately there is much more logic to be handled to just select (highlight the item) without expanding it.
$("#panelbar>li").on("click", function (e) {
if ($(e.target).is(".k-i-arrow-s")) {
$("#panelbar").data("kendoPanelBar").expand($(e.target).closest("li"));
}
else if ($(e.target).is(".k-i-arrow-n")) {
$("#panelbar").data("kendoPanelBar").collapse($(e.target).closest("li"));
}
else {
$("#panelbar").data("kendoPanelBar").select($(e.target).closest("li"));
}
e.stopPropagation();
})
Related
Using this I can display a menu by right clicking a cell:
// right click context menu
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);
//grid.setSelectedRows(cell.row);
$("#contextMenu")
.data("row", cell.row)
.css("top", e.pageY)
.css("left", e.pageX)
.show();
$("body").one("click", function () {
$("#contextMenu").hide();
});
});
However I would like the row to be selected, both as visual confirmation that the correct row has been right-clicked, and because some of the menu items use the selected row for their functions.
This:
grid.setSelectedRows(cell.row);
doesn't work. What is the correct way?
It might be as simple as the fact that setSelectedRows takes an array of row indexes.
Try
grid.setSelectedRows([cell.row]);
Does anyone know of a way to trigger the editing of a row just by clicking the row?
I would like to see the same functionality that I see when I click an edit command button, but triggered by selecting the row.
You can add this to your change event for your grid:
myGrid.setOptions({
editable: {
mode: "inline"
},
change: function(){
this.editRow(this.select());
}
});
I know this is an old question, but I just had need for a solution and this is what worked for me. I wanted to use double-click, but the click event should also work.
var grid = $('#grid').data('kendoGrid');
$('#grid .k-grid-content table').on(
'dblclick',
'tr',
function () { grid.editRow($(this)); }
);
The selector ("#grid .k-grid-content table") works for my current configuration (mainly I have virtual scrolling turned on) and so may need to be adjusted for your specific situation.
I was wondering how to have a better control of my d3.brush component.
I would like to have some extra controls on it, like:
right click (opens a special menu, instead of regular browser one - and instead of strange brush behavior )
been able to disable the resizable (i.e. allowing the user to only move the brush and not resizing it) brush feature (whenever I want to control it)
I've already read some older similar questions here but no luck so far.
I can already read when a right click happend on my brush area with:
//code from an older post
function rightClick() {
if (d3.event.sourceEvent.which == 3 || d3.event.sourceEvent.button
== 2) { //3==firefox, 2==ie
return true;
} else {
return false;
}
}
and here is my code that uses the rightClicl() return:
function brushed() {
if(rightClick()){
console.log("Right click : " + rightClick());
}
else {
console.log("Right click <false> : " + rightClick())
x.domain(brush.empty() ? x.domain() : brush.extent());
if(!brush.empty()){
//do something and redraw it
}
else{ //correctiong when brush.empty() restables x.domain to general value
resetView();
}
}//end-of first else
}
but every time rightClick() is true, I still have my brush acting "as a regular" left-click.
Any help / insight is appreciated.
Thank you for your time.
Context menu
I'm using this d3-context-menu for showing context menu on svg elements.
However the plugin can not be used on d3.brush rects directly. The right mousedown event will also trigger brush event. I tried event.stopImmediatePropagation(), it worked.
g.selectAll(".extent")
.on("mousedown", function() {
if (d3.event.button === 2) { // only enable for right click
d3.event.stopImmediatePropagation();
}
})
.on("contextmenu", d3.contextMenu(menu));
Disable resize
It seems that d3 has no explicit option for that feature.
But you can remove the resize rects in brush group.
// after call brush
brushG.selectAll(“.resize”).remove();
I have a web application, which works fine with Firefox and IE, but in Webkit browsers like Chrome it doesn't.
There are two click events, this application uses, which don't work with Chrome:
Ctrl + Left-Click for selecting records in a table
Right-Click for opening a contextual menu
It's like the click events don't get fired at all...
Right click:
document.body.addEventListener('contextmenu', function(ev) {
alert('show your custom context menu');
return false;
}, false);
Ctrl + Left click:
document.body.addEventListener('click', function(ev) {
if(ev.ctrlKey) {
alert('select single table cell');
}
}, false);
its better to use Jquery to be honesty, i prefer something like this to catch a right click and escape from browser compatibility issues
$('#elementtobeClicked').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button ?');
break;
case 2:
alert('Middle mouse button ?');
break;
case 3:
alert('Right mouse button ?');
break;
default:
alert('You have a micky mouse !');
}
});
or
$('#elementtobeClicked').bind("contextmenu",function(e){
alert('Context Menu ?');
return false;
});
have some good time over jquery
have to go through
event.shiftKey && event.ctrlKey
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.