Adding auto complete to jstree input node - javascript

I am creating a JsTree which has an input box Node. I want to enable auto-complete for this input box. The application is in angular4, but the file i am using for creating the jstree is a .js file.
inst.create_node(obj, {
li_attr : {
'class' : 'child-menu listener-menu'
},
a_attr:{
'ondragover' : 'allowDropSR(event,"widgets")',
'ondrop' : 'dropSR(event,"widgets")'
},
text : "<span>Enter Country here</span>"
},
"last", function(new_node) {
new_node.data = {
file : true,
stopDrilldown : true,
hasParent : true
};
setTimeout(function () {
inst.edit(new_node);
$('.jstree-rename-input').attr();
},0);
});
$('.widget-list-tab a').tab('show');
$('.jstree-clicked').next('ul').find('li:last').find('a').focus();
},

Best approach would have been to write your own jsTree plugin. You can possibly hook the keydown event of jsTree for edit box to populate your list of items as a autocomplete suggestion and using jQuery UI autocomplete feature.
.bind("keydown.jstree", function(e) {
if(e.target.tagName && e.target.tagName.toLowerCase() === "input"
&& e.target.className.toLowerCase() === "jstree-rename-input" ) {
$(".jstree-rename-input").autocomplete({
// AJAX can be used for list here
source: countries
});
}
});
countries: is the list suggestion.
You can see in more details at https://everyething.com/jsTree-with-AutoComplete-Box

Related

First time parent & child checkbox not checked in treeview kendo ui with angularjs 1.6

I have integrated Kendo UI v2017.3.1206 (http://www.telerik.com/kendo-ui) treeview with angular 1.6.
I have one strange issue like when i am first time clicking on any parent checkbox its not selecting its children chekboxes and at second time when i am clicking on any parent checkbox its working fine.
I am generating datasource from database based on selected option from dropdown. So when user changes selection from dropdown i am generating new datasource in controller and rebind with treeview.
There are no any javascript errors on my console.
I have below treeview options configured at my controller:
Code in my controller file:
vm.treeViewOptions = {
dataSource: formatedDataSource,
dataTextField: "text",
checkboxes: {
checkChildren: true
},
loadOnDemand: false,
expandAll: false,
dataBound: function(e) {
if(e.node){
e.sender.expand(e.node);
}
},
check: function(e) {
/* Change color to light blue for text if checkbox is checked for treeview */
var checkboxstatus = $(e.node).find("input:checkbox").prop('checked');
if (checkboxstatus) {
$(e.node).find('span.k-in').addClass('selectedItem');
} else {
$(e.node).find('span.k-in').removeClass('selectedItem');
}
setTimeout(function() {
$scope.$apply(function() {
vm.selectedPermissionCount = getCheckedItems(e.sender).length;
});
})
},
select: function(e) {
e.preventDefault();
}
}
Code in my HTML file:
<div id="treeview" class="float-left bd-x-0 bd-y-0" k-options="vm.treeViewOptions" k-rebind="vm.treeViewOptions" kendo-tree-view="tree">
Please let me know if any solutions for this.

TinyMCE 4 - Custom HTML inside the SplitButton

How can I add custom HTML instead of regular button in TinyMCE 4 inside the split button drop menu?
ed.addButton('demo_button', {
title: 'Demo Button',
type: 'splitbutton',
onclick: function() {
},
menu: [
{
text : 'Some Regular Button', onclick : function() {
}
},
{
//How to add some custom html for combo box here for example?
}
]
});
In previous version (TinyMCE 3) I was able to use this:
var c = cm.createSplitButton('demo_button', {
title : 'Demo Button',
onclick : function() {
}
});
c.onRenderMenu.add(function(c, m) {
m.onShowMenu.add(function(c,m){
var $menu = jQuery('#menu_'+c.id+'_co').find('tbody:first');
if($menu.data('added')) return;
$menu.append('SOME HTML HERE');
$menu.data('added',true);
});
});
So basically my question is how to migrate this piece of code to TinyMCE 4?
Cheers
If you were using TinyMCE 3.0 are now migrating to TinyMCE 4+, may be you can first try using their compat3x plugin, which will allow you to transition most of your old plugins without modifications as per their documentation available here:
TinyMCE compat3x plugin
Like you did with the v3, you have to edit the dom after TinyMCE rendering.
To catch rendering process, use init_instance_callback
See : http://www.tinymce.com/wiki.php/Configuration%3ainit_instance_callback
And this SO answer : https://stackoverflow.com/a/24557748/911718

Any way to prevent "select_node.jstree" from being called when node closed in the jstree?

When you open nodes, it's fine. The "select_node.jstree" is not called. However, when you select a node and then close its' parent, jstree fires "select_node.jstree" for that parent node for some strange reason. Is there any way around this or is that just a flaw with jstree? I'd appreciate the help! Here's my code:
$("#RequirementsTree")
.bind("select_node.jstree", function(event, data) {
ReqNode = data.rslt.obj;
$("#req_tree_modal").dialog({ height: 400, width: 600, modal: true, closeOnEscape: true, resizable: false, show: "blind" });
$("#RMSDoc_ParentNodeID").val(data.rslt.obj.attr("id").substring(4));
if(is_requirement_node(data))
{
dispEditRequirementView();
var ReqCheck = data.rslt.obj.attr("name");
#* This is a REQUIREMENT *#
if(ReqCheck == "requirement")
{
// Ajax call to Server with requirement id passed in
$.ajax({
type: "POST",
url: '#Url.Content("~/RMS/getRequirementStateByID")',
data: {
ReqID : data.rslt.obj.attr("id").substring(4)
},
success: function(new_data) {
if(new_data == 1){
$("#RMSDoc_ReqEnabled").attr("checked", "checked");
$("#RMSDoc_ReqEnabled").val("true");
}
else if(new_data == 0) {
$("#RMSDoc_ReqEnabled").removeAttr("checked");
$("#RMSDoc_ReqEnabled").val("false");
}
}
});
$("#RMSDoc_RBSRequirement_RequirementsId").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_RBSRequirement_RequirementsText").val($.trim(data.rslt.obj.text()));
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSEditReqButton.ConfigurableLabelDesc");
}
else {
alert("Requirement node select error");
}
}
#* This is a TREE BRANCH *#
else
{
dispAddRequirementView();
$("#RMSDoc_TreeBranch_Text").val($.trim($('.jstree-clicked').text()));
$("#RMSDoc_TreeBranch_id").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_TreeBranch_Level").val(data.rslt.obj.attr("name").substring(7));
$("#RMSDoc_RBSRequirement_RequirementsText").val("");
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSCreateReqButton.ConfigurableLabelDesc");
}
})
Update:
I found a way to get it to work within the plugin, add the following to the "ui" config section:
"ui": {
"select_limit": 1,
"selected_parent_close":false
},
I believe what was happening is that when a sub-node was selected, collapsing the parent node would cause the parent node to be selected, triggering the event.
---------- Original Answer ---------------------
I'm not sure on the answer working within the bounds of the plugin. But I did find a work-around.
I added a class to each of the anchor () tags inside the tree "an".
<li class='jstree-closed' id="phtml_3" rel="folder">
test node 2
</li>
Then I wired JQuery to look for anchors with this class, and handled my click that way.
instance.on("click", "a.an", function (e) {
alert("click");
});
I still need to add code to find the ID from the parent-container, not optimal... but I don't have to compete with the collapse anymore for my click.

can jsTree use radio check

i know there is a plugin for jsTree named jquery.tree.checkbox.js.
that make the tree node multi checkable.
i just wondered if there is a plugin to raido check the tree node?
or how can i modify jquery.tree.checkbox.js to achieve that?
This can simply be done by adding the attribute
rules:{
multiple : false
}
Inside the configuration of the tree.
This will make it impossible to choose multiple entries.
#Asaf's answer seems to no longer work on version 3.3.1 in 2016. You now need to set multiple on core:
$jstree.jstree({
core: {
multiple: false,
...
}
});
Setting multiple:false will still allow cascading so you need to turn that off too.
version 3.3.3
$(".tree").jstree({
plugins: ["checkbox"],
core: {
data: ...,
multiple: false
},
checkbox: {
three_state: false,
cascade: "none"
}
});
The radio button option is still not released, so you have to change the chceckbox option as single select.
bind('check_node.jstree', function(e, data) {
var currentNode = data.rslt.obj.attr("id");
$("#tree").jstree("get_checked",null,true).each
(function () {
if(currentNode != this.id){
jQuery.jstree._reference($("#tree")).uncheck_node('#'+this.id);
}
});
});
refer this http://jsfiddle.net/bwTrP/1/
Using jsTree version 3.2.1 with the checkbox plugin it is possible to emulate radiobutton behaviour handling the 'changed' event as follows:
//jstree configuration:
'checkbox': {
three_state: false, //required for the cascade none to work
cascade: 'none' //no auto all_children<->parent selection
},
//...
var resetting = false;
$('#tree').on('changed.jstree', function (e, data) {
if (resetting) //ignoring the changed event
{
resetting = false;
return;
}
if ($("#multiselect").is(':checked') == false && data.selected.length > 1) {
resetting = true; //ignore next changed event
data.instance.uncheck_all(); //will invoke the changed event once
data.instance.check_node(data.node/*currently selected node*/);
}
});
JSFiddle: JSTree radiobutton behaviour example using checkbox plugin

Working example of jeditable and autocomplete working together

I see a lot of google posts on this but all seems to be talking about how this is in progress. Does anyone know of a working version of jeditable and autocomplete functionality working together so i can click on text and get a textbox and have autocomplete functionality working against that textbox
EDIT:
I am opening a bounty, as it still seems like none of these solutions replicate Stack overflow tags + jeditable where i can use jeditable to get a editable texbox after clicking on text and then be able to enter a comma separated list that autocomplete each entry as i type (similar to entering tags in stack overflow).
Take a look at this
JQuery Based Inplace Editing + AutoComplete
Usage
$('#edit').editable( 'echo.php', // POST URL to send edited content
{ indicator : , // options for jeditable
event: 'click' // check jeditable.js for more options
},
{ url: "search.php", //url form where autocomplete options will be extracted
minChars: 1, // check autocomplete.js for more options
formatItem:formatItem,
selectOnly: 1,
inputSeparator:';' // a new option of inputSeparator was introduced.
}
);
You can use ',' as input separator.
This is exactly what Jeditable custom inputs are for. Check quick and dirty
working demo (start typing something starting with letter a).
Demo was done in 5 lines of code. It uses Jörn Zaefferer's Autocomple plugin for autocompletion:
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.data);
}
});
Then you can call Jeditable with something like:
$(".autocomplete").editable("http://www.example.com/save.php";, {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
multiple : true,
data : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});
I had the need for the same functionality with jeditable and autocomplete from bassistance, for a list of emails separated by a comma. So, I changed the demo from Mika Tuupola and had it working like this:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
$('input', this).autocomplete(settings.autocomplete.urlOrData,
settings.autocomplete.options);
}
});
And when you call jEditable you need to add the following:
$('.autocomplete').editable('http://www.example.com/save', {
type: 'autocomplete',
autocomplete: {
urlOrData: ["Aberdeen", "Ada", "Adamsville"] , // can also be url: 'http://www.example.com/autocomplete',
options: {
multiple: true
}
}
});
The basic thing to understand here is that when you call $('input', this).autocomplete(...) you are actually applying the autocomplete plugin functionality to the editable input, and that's where you must pass the autocomplete options, via the settings object, which is the same as the settings you pass to jeditable.
Editable: jQuery jeditable I've used it recently in my project (as such and with slight modification to work with page methods)
AutoComplete: bassistance
Combining it with jQuery UI isn't much different to Mika's example above. This works for me
$.editable.addInputType('autocomplete', {
element : $.editable.types.text.element,
plugin : function(settings, original) {
$('input', this).autocomplete(settings.autocomplete);
}
});
$(".autocomplete").editable("http://www.example.com/save.php", {
type : "autocomplete",
tooltip : "Click to edit...",
onblur : "submit",
autocomplete : {
minLength : 2,
source : ["Aberdeen", "Ada", "Adamsville", "Addyston", "Adelphi", "Adena", "Adrian", "Akron"]
}
});
Complete working integration of dataTable, dataTables editable (legacy), jEditable, autocomplete jQuery plugins with AJAX source and results updated at bottom on page(i.e. appended to body of html) is solved by:
$.editable.addInputType('autocomplete', {
element: $.editable.types.text.element,
plugin: function(settings, original) {
var $row = $(this).closest('tr').prop('id');
settings.autocomplete.appendTo = "#results-"+$row;
$('input', this).autocomplete(settings.autocomplete);
}
});
Datatable legacy editable code:
{
tooltip: 'Click to update Owner',
type: 'autocomplete',
autocomplete: {
serviceUrl: './search/users/by/name',
minChars: 5,
paramName: 'username',
dataType: 'json'
},
cancel : 'Cancel',
submit : 'Submit',
}
TD in table have:
<td id="results-${obj.taskId}">

Categories