We Keep Coding

Custom pasting into empty datatable

When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.

I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70

Select2 Event for creating a new tag

I'm using the jQuery Select2 (v4) plugin for a tag selector.
I want to listen for when a new tag is created in the select element and fire an ajax request to store the new tag. I discovered there is the createTag event but this seems to fire every time a letter is entered into the select2 element. As shown in my fiddle: http://jsfiddle.net/3qkgagwk/1/
Is there a similar event that only fires when the new tag has finished being entered? I.e. it's enclosed by a grey box enclosing it.

I can't find any native method unfortunately. But if you're interested in simple "workarounds", maybe this get you closer:
$('.select2').select2({
tags: true,
tokenSeparators: [",", " "],
createTag: function (tag) {
return {
id: tag.term,
text: tag.term,
// add indicator:
isNew : true
};
}
}).on("select2:select", function(e) {
if(e.params.data.isNew){
// append the new option element prenamently:
$(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>');
// store the new tag:
$.ajax({
// ...
});
}
});
DEMO
[EDIT]
(Small update: see #Alex comment below)
The above will work only if the tag is added with mouse. For tags added by hitting space or comma, use change event.
Then you can filter option with data-select2-tag="true" attribute (new added tag):
$('.select2').select2({
tags: true,
tokenSeparators: [",", " "]
}).on("change", function(e) {
var isNew = $(this).find('[data-select2-tag="true"]');
if(isNew.length && $.inArray(isNew.val(), $(this).val()) !== -1){
isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
$.ajax({
// ... store tag ...
});
}
});
DEMO 2

The only event listener that worked for me when creating a new tag was:
.on("select2:close", function() {
(my code)
})
This was triggered for new tags and selecting from the list. change, select2:select, select2:selecting and any others did not work.

One more simple check will be this based on the difference in the args of the event .....
While I was dealing with this situation, I had seen this difference; that when the new element is created the event args data does not have an element object but it exists when selecting an already available option...
.on('select2:selecting', function (e) {
if (typeof e.params.args.data.element == 'undefined') {
// do a further check if the item created id is not empty..
if( e.params.args.data.id != "" ){
// code to be executed after new tag creation
}
}
})

Another workaround. Just insert it to the beginning:
}).on('select2:selecting', function (evt) {
var stringOriginal = (function (value) {
// creation of new tag
if (!_.isString(value)) {
return value.html();
}
// picking existing
return value;
})(evt.params.args.data.text);
........
It relies on underscore.js for checking if it's string or not. You can replace _.isString method with whatever you like.
It uses the fact that when new term is created it's always an object.

Fancytree activate node on button click

I have a fancy tree solution on my website and i would like to have a button that will trigger a specific node.
Can i activate a specific node from a button click or trigger it after the fancy tree has loaded?
My fancytree code:
$("#tree").fancytree({ //Fancy Tree
checkbox: false,
selectMode: 3,
extensions: ["dnd"],
source: {
url: "#(Url.Action("GetCategoryForFancyTree", "LinksDocuments"))" + '?time=' + timestamp,
success: function(data){
console.log(data);
},
cache: true
}
});
I saw that this code maybe i could use but i dont dont know the node key for the node, how could i retrieve the key?
$("#tree").fancytree("getTree").getNodeByKey("id4.3.2").setActive();

The .getNodeByKey is just expecting the "id" of the node element. For example to get the "Sample Node" from the following example just set the id for each element:
<div id="tree">
<ul>
<li id="123">Sample Node</li>
</ul>
</div>
And use something like this to activate it:
$("#tree").fancytree("getTree").getNodeByKey("123").setActive();
I recommend adding this to the "init: function() {}" otherwise it may not activate if the tree is still loading/building.
Can also use the following from within the "init:", should do the same.
data.tree.activateKey("123")
Finally, to get the key if you don't already know it:
click: function (event, data) {
var node = data.node;
alert("ID: " + node.key);
}

Remove from a ComboBox a parameter in extjs 3.4

I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!

Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}

Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.

How to get checked nodes in jquery jstree

I have created one jquery jstree and it's working fine. Now the problem is how to get the the checked nodes details.
For Creating JStree The code is:
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{"data":"pe_opensourcescanning","id":0,"pId":-1,"children": [{"data":"tags","id":30,"pid":0},{"data":"branches","id":29,"pid":0},{"data":"trunk","id":1,"pid":0,"children":[{"data":"import-export","id":28,"pid":1},{"data":"custom_development","id":12,"pid":1},{"data":"Connectors","id":7,"pid":1},{"data":"support","id":6,"pid":1},{"data":"Installation-Configuration","id":5,"pid":1},{"data":"backup","id":2,"pid":1}]}]}
]
},
"plugins" : [ "themes", "json_data", "checkbox", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
Now while getting checked nodes i need all the attributes values for those checked elements. Say like for "tags" the json object looks like {"data":"tags","id":30,"pid":0}, so if user select tag i need the value of "data" And "id". i have tried to write some code but unfortunately that is not working.
Getting Checked Nodes.
$("#" +div2.childNodes[i].id).jstree("get_checked",null,true).each
(function () {
alert(this.data);
alert(this.id);
});
Kindly give me a solution.

As the Author of jstree (Ivan Bozhanov) points out on google-Groups Discussion regarding get_checked, it can also be achieved using the following:
$('#tree').jstree(true).get_selected();
This returns a List of the IDs, e.g. ["j1_2"] or ["j1_2", "j1_3", "j1_1"]
Check out the fiddle by Ivan Bozhanov himself on: jsfiddle-Example get_selected

function submitMe(){
var checked_ids = [];
$("#server_tree").jstree("get_checked",null,true).each
(function () {
checked_ids.push(this.id);
});
doStuff(checked_ids);
Go through this once
jstree google groups

$.each($("#jstree_demo_div").jstree("get_checked",true),function(){alert(this.id);});

$('#dvTreeStructure').on('changed.jstree', function (e, data) {
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text.trim());
}
alert('Selected: ' + r.join(', '));
}

While using get_checked or get_selected pass the boolean as false to get the whole node where if you send as true, it will return only node Ids.
You have a look at https://www.jstree.com/api/#/?q=checkbox&f=get_checked([full])
You can also have a look at https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes to get an idea of different kind of selected.