I am doing a double click on kendoui grid with the following code
dataBound: function (e) {
var grid = this;
grid.tbody.find("tr").dblclick(function (e)
{
var dataItem = grid.dataItem(this);
alert(dataItem.Name);
});
}
I get the row data correctly, but how can i do this using right mouseclick which gives a drop down option selection , cant find any demos by Telerik ??
You can use javaScript oncontextmenu:
dataBound: function (e) {
var grid = this;
grid.tbody.find("tr").dblclick(function (e) {
var dataItem = grid.dataItem(this);
alert(dataItem.Name);
});
grid.tbody.find("tr").on('contextmenu', function (a) {
a.preventDefault();
var dataItem = grid.dataItem(this);
alert(dataItem.name)
});
}
This will disable the right-click context menu and add your functionality when you right-click the grids tr element.
Example: Right click event (oncontextmenu)
Related
I am working with standalone (not mobile) and I think it is _getScroll method for reaching it.
how to implement it here qooxdoo selectbox example
I found similar for mobile implementing virtual scrolling list console.log says container._getScroll is not a function.
The idea is to get scrollbar from a widget, the scrollbar you are needed is NativeScrollbar of the widget qx.ui.list.List. Then add event handler for a "scroll" event. In handler u have to compare current position of scroll and maximum.
Try the code below (eg copy and paste into the Qooxdoo playground).
qx.Class.define("SelectBoxWithScrollEndEvent", {
extend: qx.ui.form.SelectBox,
construct: function(){
this.base(arguments);
this.__setupScroll();
},
events: {
"scrollEndHappened": "qx.event.type.Event"
},
members: {
__setupScroll: function(){
const list = this.getChildControl("list");
const scrollbar = list.getChildControl("scrollbar-y");
scrollbar.addListener("scroll", function(e){
if (scrollbar.getMaximum() === scrollbar.getPosition()){
this.fireEvent("scrollEndHappened");
}}, this);
}
}
});
const box = new SelectBoxWithScrollEndEvent();
const data = new qx.data.Array([1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5]);
const controller = new qx.data.controller.List(data, box);
box.addListener("scrollEndHappened", function(){
alert("SCROLL HAPPENED ALERT");
}, this);
this.getRoot().add(box);
I have created a datatable in which one of my column has a checkbox element and other column has a textbox element. The ID's for each of these are generated dynamically based on what data in the rows are populated.
What I have been trying to do with this is enable the textbox when a corresponding checkbox is checked. This datatable has pagination.
Issue:
Using the code below I am able to enable the textbox when the checkbox is checked on a certain page (page 1 for example). However, when I try to enable the textbox on page 2 after a few of the texboxes are enabled on page 1, it doesn't allow me to do so. What am I doing wrong ?
var table = $('#example').DataTable();
table.$("input:checkbox", { "page": "all"}).change(function () {
var someObj = {};
someObj.Checked = [];
table.$("input:checkbox", { "page": "all" }).each(function () {
if ($(this).is(":checked")) {
someObj.Checked.push($(this).attr("id"));
document.getElementById("ID_" + $(this).attr("id")).disabled = false;
}
});
//console.log(someObj.Checked);
});
Instead of looping through the checked boxes, I wrote the enable textbox on change event itself. This worked for me:
table.$("input:checkbox", { "page": "all" }).change(function () {
var checkedID = {};
checkedID.Checked = [];
if ($(this).is(":checked")) {
checkedID.Checked.push($(this).attr("id"));
document.getElementById("ID_" + $(this).attr("id")).disabled = false;
}
console.log(checkedID.Checked);
});
I used vis.js timeline to create a timeline . I need to create tooltip when mouse over into button only not the whole item . I applicate title . the tooltip appears but It was applicated on the whole item . I need a tooltip appplicated only when we mouse over the button not the whole item .
You can use the "template" function in the vis timeline config. In the template function you can modify what the item template should look like. There you can add a button and then add event listeners.
template: function(item) {
var itemTmp = document.createElement('div');
itemTmp.innerHTML = item.content + ' ';
var btn = document.createElement('button');
btn.innerText = 'Hover Me!';
btn.addEventListener('mouseover', function() {
btn.innerText = 'Done!';
});
btn.addEventListener('mouseout', function() {
btn.innerText = 'Hover Me!';
});
itemTmp.appendChild(btn);
return itemTmp;
}
Full example:
http://jsfiddle.net/tagisen/qp3dwrzn/
Hope this helps
I have a grid which is enabled with Ext.dd.DragZone. I am dragging records from the grid and dropping them on various nodes in a tree panel. Single record drops work great; however, I am unable to successfully drag multiple records to a tree node...only one record gets processed. The DragZone is instantiated on the render of the view by the following function:
renderDD: function(view){
grid = view.up('gridpanel');
grid.dragZone = Ext.create('Ext.dd.DragZone',view.el,{
onBeforeDrag: function(data,e){
return data.messagedata.foldertype==2 ? false : true;
},
getDragData: function(e){
var sourceEl = e.getTarget(view.itemSelector,10),d;
if(sourceEl){
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return(view.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).data,
ddel: d,
messagedata:view.getRecord(sourceEl).data
});
}
},
getRepairXY: function(){
return this.dragData.repairXY;
}
});
},
...
Can any one help me on dragging multiple records using DragZone and DropZone (not the grid plugins). Thank you kindly.
I would most likely do something like this Fiddle if you can't use the plugins. You can customize how you want the drag to look with your own HTML. I'm not really sure if this is the proper way to do it, but it was my first stab at it. Hopefully it helps you figure out how you want to tackle this.
The reason your code isn't working is because you're only getting a single record. Instead, I'm making use of the getSelection method provided by the grid class, which returns all of the selected items I've selected in the grid because I've created a rowmodel selection model with mode MULTI.
getDragData: function (event, b, c) {
var selection = view.getSelection();
var sourceEl = document.createElement('div');
sourceEl.innerHTML = 'blah';
if (selection) {
var d = sourceEl.cloneNode(true);
d.id = Ext.id();
return {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
records: selection
};
}
},
In my mobile safari project, i need to create a message posting feature. it is requires scrolling inside a textarea when lines of texts exceed the max rows of the text area. i couldn't find 'scrollable' property in Ext.field.textarea, any idea how?
Cheers!
There is a bug in touch 2.0.x such that the framework explicitly prevents the scroll action. Supposedly a fix will be in 2.1, though I didn't see that officially, just from a guy on a forum.
Until then, there is kind of a solution for touch1 here http://www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-working that you can port to V2. It basically involves adding an eventlistener to the actual textarea field (not the sencha object) and then calling preventdefault if it's a valid scrollevent.
The full code is at that link, but the salient bits are here.
Grab the <textarea> field (not the Sencha Touch object) directly and use addListener to apply
'handleTouch' on touchstart and 'handleMove' on touchmove
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) {
e.preventDefault();
e.stopPropagation(); // this tops scroll going to parent
}
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) {
e.stopPropagation(); // this tops scroll going to parent
}
}
Ext.define('Aspen.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}, 200, this),
constructor: function () {
this.callParent(arguments);
this.on({
scope: this,
keyup: function (textarea) {
textarea.adjustHeight(textarea);
},
change: function (textarea, newValue) {
textarea.adjustHeight(textarea);
}
});
}
});