I'm trying to add the onSelect event to the following code:
var treeview = $("#treeview").kendoTreeView({
animation:true,
dragAndDrop:false,
select: onSelect,
}).data("kendoTreeView");
// onSelect function call
function onSelect(e) {
kendoConsole.log("Selecting: " + this.text(e.node));
}
It is not working. All I want is to select a parent node.
If i am not wrong, you want to select a parent node of a node you selected, i have made small fiddle for you. You have to prevent (e.preventDefault()) the default behavior of select event. I am simply using parent and select client APIs.
Edit: Sorry, i accidentally deleted the fiddle, i have linked the working one.
Related
Please help
I'm using materialize version 1.0.0-rc.1 with react.
When I call javascript method to focus input field, it works only with textbox field.
You can check my code here at codepen
Thank you.
I found that I have to call focus() method of the input element which is a property of the instance returned by init command M.FormSelect.init().
const selectInstance = M.FormSelect.init(elm, {});
// then to focus the select field
selectInstance.input.focus();
I found the working example online and I can see check box adjacent to each node of the tree The fiddle link mentioned last section given below:
Dojo tree with checkbox not displaying
Now my requirement is when the parent node is checked, all the child node should also gets checked and it should work in DOJO 1.3 release
Can help someone help fix the fiddle code
Within the checkbox listener you can put code to find the children and check them also:
The tree has to bexpanded before adding the other checkmarks because the children nodes are not created till the parent is expanded the first time.
dojo.connect(cb, "onChange", function() {
var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
//treeNode.expand();
treeNode.tree._expandNode(treeNode);
dojo.publish("/checkbox/clicked", [{
"checkbox": this,
"item": treeNode
}]);
var parentcb = this;
console.log(parentcb.checked)
treeNode.getChildren().forEach(function(item) {
var checkbox = dijit.getEnclosingWidget(item.labelNode.children[0]);
checkbox.set('checked', parentcb.checked)
});
});
Fiddle:http://jsfiddle.net/mcfskLop/8/
I have a view that creates a sub-view per item in the list. Generically let's call them ListView and ListItemView. I have attached an event as follows on ListItemView:
events: {
"click .remove": "removeItem"
}
I have template-generated html for ListItemView that is approximately like the following (swapped lb/rb for {/} so you can see the "illegal" html):
{div class="entry" data-id="this_list_item_id"}
SOME STUFF HERE
{div class="meta"}
{a class="remove" href="javascript:;"}[x]{/a}
{/div}
{/div}
The problem is, when the click on any of the [x]'s, ALL of the ListItemViews trigger their removeItem function. If I have it go off of this model's id, then I drop all the items on the page. If I have it go off the clicked item's parent's parent element to grab the data-id, I get a delete for EACH ListItemView instance. Is there a way to create an instance-specific event that would only trigger a single removeItem?
If I have ListView hold a single instance of ListItemView and reassign the ListItem model and render for each item in the list it works. I only end up with one action (removeItem) being triggered. The problem is, I have to find the click target's parent's parent to find the data-id attr. Personally, I think the below snippet is rather ugly and want a better way.
var that = $($(el.target).parent()).parent();
Any help anyone gives will be greatly appreciated.
It seems like your events hash is on your ListView.
If it is, then you can move the events hash to ListItemView and your removeItem function can be the following
removeItem: function() {
this.model.collection.remove(this.model);
}
If this isn't the case, can you provide your ListView and ListItemView code so I can look at it.
A wild guess but possible; check that your rendered html is valid. It might be possible that the dom is getting in a tiz due to malformed html
I have a page with 50 hidden checkboxes, and I want to be able to toggle each checkbox by clicking on a visible link. The actual checkboxes have to stay hidden...so... Is there a better way to do this, with a JS function so I don't have to include the entire onclick in each link? And I use mootools, not jQuery.
This works to activate a checkbox:
Select
But to toggle it, this works:
onclick="if (event.target.tagName != 'INPUT') document.getElementById('field_select_temp_professional_10').checked = !document.getElementById('field_select_temp_professional_10').checked"
None of what you posted is actually mootools code, you may as well not use mootools...
Markup:
Select
js in your domready:
document.getElements("a.add_app").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_select_p" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
If you have 100+ then I suggest you look at using event delegation from mootools-more and add just one event to the parent instead of creating 100 events and storing 100 functions that deal with it.
This is coding to patterns, and it involves changing your markup to make things work. You can also make the change based upon walking the DOM in relation to the clicked item, e.g. this.getParent().getElement("input[type=checkbox]"), or something can mean you don't need to store a relative id in the element itself.
HI,
I have a ExtJS parent 'container' type, whereas i need to add a 'contextmenu' listener to any element that is added to this parent container, via Drag/Drop.
Can someone guide me as to the best way to do this?
I have tried this below but can't get the function to fire.
myContainer.on('added', function(obj1,obj2,index){
alert('added');
});
this may not be the 'best practice' to do it this way anyway...?
thanks for the help !
You're using the wrong event... The added event gets fired when (using your example) myContainer is added to some other container. What you'll need is the add event that fires, when an item is added to myContainer:
myContainer.on('add', function(container, component, index) {
component.on('contextmenu', function() {
});
});