I have a sortable list (done using prototype and scriptaculous): you can sort its elements or drag them into another list.
When I drop the element (let's call it ELEMENT_1) of a list into another one what I do is a 'clone' of the dropped element and then I insert (appendChild) it into the new list.
ELEMENT1 had some 'observe' (clicking on it do something, double-clicking on it do something else) that are of course lost when I do the cloning.. I want the cloned element to have the same 'observe' of ELEMENT1.
How can I do that?
Thanks in advance
Observe the lists instead of their items and allow event bubbling to do the work for you.
$('list1','list2').invoke('on', 'click', 'li', function(event, element){
// "this" is either list1 or list2
// "element" is the list item
}
Related
I am facing a problem in kendo treeview. I have a tree with 'folders'. I enabled the drag and drop functionality but whenever i drop a folder into another folder, it is positioned as the last item of that folder where it was dropped.
My datasource is of type kendo.data.HierarchicalDataSource and the incoming data is sorted by the 'caption'/text alphabetically. I want the dropped node to be sorted alfabetically as well, so in some way i want to trigger a resort call to the node where the other node was dropped.
How would i achieve this?
I already tried defining the sort parameter in the kendo.data.HierarchicalDataSource object but this doesn't change much.
Under the hood, a HierarchicalDataSource is a DataSource that has an array of children (items) that are also DataSources. Often, the items are just treated like a normal field, and operations on the main DataSource are not done recursively on the children.
Sorting is an example of this. As you see on https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/binding/sort-child-nodes, you need to sort the children recursively yourself:
function setSort(items){
for(var i=0; i < items.length; i++){
if(items[i].hasChildren){
items[i].children.sort({field: "FullName", dir: "desc"});
setSort(items[i].children.view());
}
}
}
I'm using RadListView and intercepting onItemLoading event.
Within that event, can I reference individual view elements inside the itemTemplate.
I see args.view._subViews - but I was wondering whether i could find element by name or something else. I assume id would not work because each item would have the same id.
You are correct getting by Id would only return the first one. However, if you have the reference to the ListView child group; using id will work to get the element out of a group.
Now if you use my NativeScript-Dom plugin then it is very simple; you can do:
var elements = RadListView.getElementsByClassName('someClass'); or RadListView.getElementsByTagName('Label'); or the newer functionality `
RadListView.runAgainstTagNames('Label', function(element) {
/* do something with this element */
});
And work with an array of elements that match your criteria.
Please also note that in a ListView that not all elements are preset; ListViews only have as many elements are needed to fill the ListView + 1 typically; so even if you have 2,000 items in the list view; you might only have 10 actual child ListView groups of elements. So when you did a GetElementsByTagNames('Label') you would only get 10 of them...
I am trying to make my chart 508 compliant. Hence in order to make it possible to navigate the chart using keyboard, i want to add anchor elements before every bar column. I tried doing :
d3.select("svg").insert("a",".nv-bar").attr("href","");
but it didnt work.
Can anybody suggest a better way of doing it. Thanks !
Here's one way to do it:
d3.selectAll('.nv-bar')
.each(function() {
var el = this;
d3.select(el.parentNode)
.insert('a', function(){return el;})
.attr('href', '');
});
The insert method will add elements to each item in the current selection, regardless of how many elements the "before" parameter matches.
My solution will add an anchor for each bar in the document, and takes advantage that the insert method can accept a selector string or a function that returns an element to insert before. (Although, somewhat frustratingly, it does not accept a DOM node directly)
Edit: Here's a jsfiddle with an example: https://jsfiddle.net/bgp6atzo/
I have a slickgrid that, in the 'onMouseEnter' event, I do the following:
change the underlying css for the row in question
call grid.invalidateRow()
call grid.render()
These latter two calls are necessary for the new css classes to be reflected. However, I then need to capture the onMouseLeave event, and it is not fired when I move my mouse away from the cell (or row), presumably because the call to invalidate/render has placed a new DOM element under my mouse, and it's no longer the one I initially "entered."
So I have two questions:
Is there another way to have the new css classes for a given cell be rendered without calling invalidateRow/render?
If not, is there another way to do this and still have the onMouseLeave event fired?
One option is to use the setCellCssStyles function.
grid.onMouseEnter.subscribe(function(e, args){
var cell = grid.getCellFromEvent(e),
param = {},
columnCss = {};
for(index in columns){
var id = columns[index].id;
columnCss[id] = 'my_highlighter_style'
}
param[cell.row] = columnCss
args.grid.setCellCssStyles("row_highlighter", param);
})
So the above changes the background-color of every cell of the row that has been moused into. In my fiddle, the mouseLeave subscription performs a simple console.log to ensure it is still firing.
Edit: fixed the external resource usages in the fiddle for cross-browser support
When using Sortable.create I can't seem to get the element that is being dragged. Does Sciptaculous not fully implement all Draggable and Droppable features when you use sortable?
Given:
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(){
console.log(this.draggables.each(function(e){if(e.dragging==true){return e};}));
}
My console always shows all the array of draggables. How do I only grab the one that is being dragged?
The onChange function actually gets a handle to the element passed in.
Sortable.create("sortArea", {scroll:window, onChange:orderLi});
function orderLi(elementBeingDragged){
console.log(elementBeingDragged);
}