I am trying to add a dropdown in a node and want to be able to create and remove the nodes. I am able to do that but whenever i create/remove a node the dropdown values that i have selected are removed from where the node is created or removed. I am using select2 for dropdown if that helps.
below is the link for demonstration
https://www.arsallodhi.com/jstree/index.html
thanks in advance
I think redraw method is called which does removes the values. So i tried to catch it but couldnt.
<html>
<head>
<style>
.jstree-default .jstree-node, .jstree-leaf {
min-height: 35px !important;
}
.jstree-open .jstree-node {
padding-top: 15px !important;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
</head>
<body>
<div id="jstreee">
<ul>
<li class="jstree-open">
Organization
</li>
</ul>
</div>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
function formatDropdown1(option) {
if (option.id) {
return option.text;
} else {
return '';
}
};
function addTagValueClass() {
$('.tag').select2({
placeholder: '',
allowClear: true,
tags: true,
templateSelection: formatDropdown1,
});
}
var counter = 0;
function customMenu2(node) {
var position = 'inside';
var parent;
var selected_id;
selected_id = parent = $('#jstreee').jstree('get_selected');
counter++;
var node_data;
node_data = "<li class='node-li'><select data-live-search='true' class='tag' placeholder='Tag'><option></option><option value='volvo'>Project</option><option value='saab'>Owner</option><option value='mercede'>Department</option><option value='audi'>Business Unit</option></select></li>"
var items = {
createItem: {
label: "Add Node",
action: function () {
$('#jstreee').jstree().create_node(parent, {"id": "ajson5" + counter, "text": node_data}, position
, function () {
addTagValueClass();
$('#jstreee').jstree().open_node('#' + parent);
});
}
},
deleteItem: {
label: "Remove Node",
action: function () {
if (selected_id != "j1_1") {
$('#jstreee').jstree().delete_node(selected_id);
addTagValueClass();
}
}
}
};
return items;
}
$('#jstreee').on('open_node.jstree', function (e, data) {
addTagValueClass();
});
$('#jstreee').jstree({
"core": {"check_callback": true, "themes": {"icons": false}, "toggle_node": true}, // so that modifying operations work
"plugins": ["contextmenu"], contextmenu: {items: customMenu2}
});
</script>
</body>
</html>
I want that the values which i have set through the dropdown remain even when a node is created or removed.
Related
I am building a muti-page website with Kendo UI for Jquery. I have a dropdown to select the style the user want. For now I can change the style, but it doesn't stick; as soon as I refresh the page it goes back to the default style. I want the style to also change for all the other pages.
Here is my code:
HTML
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<link rel="stylesheet" href="css/kendo.default.min.css"/>
<script src="script/jquery.min.js"></script>
<script src="script/kendo.all.min.js"></script>
</head>
<body class="k-content">
<label for="theme">Theme:</label>
<input id="theme" name="theme">
<button class="k-button">Export Immagine</button>
<button class="k-button">Export Excel</button>
</body>
</html>
Jquery
$('#theme').kendoDropDownList({
dataSource: [
{ text: "Original", value: "default" },
{ text: "Black", value: "black" },
{ text: "Blue Opal", value: "blueopal" },
{ text: "Metro", value: "metro" },
{ text: "Silver", value: "silver" }
],
dataTextField: "text",
dataValueField: "value",
change: function (e) {
var theme = (this.value() || "default").toLowerCase();
changeTheme(theme);
}
});
// loads new stylesheet
function changeTheme(skinName, animate) {
var doc = document,
kendoLinks = $("link[href*='kendo.']", doc.getElementsByTagName("head")[0]),
commonLink = kendoLinks.filter("[href*='kendo.common']"),
skinLink = kendoLinks.filter(":not([href*='kendo.common'])"),
href = location.href,
skinRegex = /kendo\.\w+(\.min)?\.css/i,
extension = skinLink.attr("rel") === "stylesheet" ? ".css" : ".less",
url = commonLink.attr("href").replace(skinRegex, "kendo." + skinName + "$1" + extension);
var theme = $('#theme').getKendoDropDownList().value();
$('.k-chart').each(function () {
var chart = $(this).data('kendoChart');
chart.options.theme = skinName;
chart.setOptions({ theme: theme });;
});
function preloadStylesheet(file, callback) {
var element = $("<link rel='stylesheet' media='print' href='" + file + "'").appendTo("head");
setTimeout(function () {
callback();
element.remove();
}, 100);
}
function replaceTheme() {
var oldSkinName = $(doc).data("kendoSkin"),
newLink;
if (kendo.support.browser.msie) {
newLink = doc.createStyleSheet(url);
} else {
newLink = skinLink.eq(0).clone().attr("href", url);
newLink.insertBefore(skinLink[0]);
}
skinLink.remove();
$(doc.documentElement).removeClass("k-" + oldSkinName).addClass("k-" + skinName);
}
if (animate) {
preloadStylesheet(url, replaceTheme);
} else {
replaceTheme();
}
};
I know I have to use sessionStorage, but I don't really know how to implement that with Kendo. Can someone help me?
Set the session storage value inside the changeTheme function with the chosen theme name:
sessionStorage.setItem('user.theme', skinName);
Then check for it on page load, and set it if any value is set:
let userTheme = sessionStorage.getItem('user.theme');
if (userTheme) {
changeTheme(userTheme);
$('#theme').getKendoDropDownList().value(userTheme);
}
Dojo
Hi I'm trying to get data via ajax and using vue wrapper component. Here is my code.
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
</style>
</head>
<body>
<div id="el"></div>
<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: {{ input.selected }}</p>
<select2 :options="options" v-model="input.selected">
<option disabled value="0">Select one</option>
</select2>
</div>
</script>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
<script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
var vm = this;
$(this.$el)
// init select2
.select2({data: this.options})
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
});
},
watch: {
value: function (value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
},
options: function (options) {
// update options
$(this.$el).empty().select2({data: options})
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#el',
template: '#demo-template',
data: {
input: {
selected: "all"
},
options: []
},
created: function () {
this.mymethod();
},
methods: {
mymethod: function () {
var vm = this;
$.get("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
vm.options = [
{id: 'all', text: 'All'},
{id: 1, text: 'Hello'},
{id: 2, text: 'World'},
{id: 3, text: 'Bye'}
];
vm.input.selected = 2;
});
}
}
});
</script>
</body>
</html>
After items loaded to drop down I need to change the selected item like this
vm.input.selected = 2;
But unfortunately this is not happening after ajax request. If I added the array before ajax it happens as expected but I need data from an ajax request. And I have rduced the complexity of code for better visibility.
Here is a jsfiddle for issue. I think the issue is with vue component.
I did a few tests and it seems like you're essentially changing the select2's value before its options, and since option 2 doesn't exist, the change fizzles.
Like I mentioned in my comment, changing the order of options and value in the component's watch fixes this, probably because that way the options are changed right before the new value is set.
Working example:
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function() {
var vm = this;
$(this.$el)
// init select2
.select2({
data: this.options
})
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function() {
vm.$emit('input', this.value)
});
},
watch: {
options: function(options) {
// update options
$(this.$el).empty().select2({
data: options
})
},
value: function(value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
}
},
destroyed: function() {
$(this.$el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#el',
template: '#demo-template',
data: {
input: {
selected: "all"
},
options: []
},
created: function() {
this.mymethod();
},
methods: {
mymethod: function() {
var vm = this;
$.get("https://api.coindesk.com/v1/bpi/currentprice.json", function(data) {
vm.options = [{
id: 'all',
text: 'All'
},
{
id: 1,
text: 'Hello'
},
{
id: 2,
text: 'World'
},
{
id: 3,
text: 'Bye'
}
];
vm.input.selected = 2;
// setTimeout(() => { vm.input.selected = 2; }, 0);
});
}
}
});
html,
body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el"></div>
<!-- using string template here to work around HTML <option> placement restriction -->
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: {{ input.selected }}</p>
<select2 :options="options" v-model="input.selected">
<option disabled value="0">Select one</option>
</select2>
</div>
</script>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
I found this example which highlights a row after it has been selected but the problem with it is that it keeps the previous row(s) highlighted after another one has been selected.
Here's part of the code
//js
rowClick: function(args) {
var $row = this.rowByItem(args.item);
$row.toggleClass("highlight");
},
//css
tr.highlight td.jsgrid-cell {
background-color: green;
}
I can't find a solution to unhighlight the previously selected row
A little late to the party on this one, however the accepted answer by #Narenda didn't completely solve my problem. This may help someone else that stumbles across this later.
If you need a single select only, here's a way of doing it:
Extend the jsGrid plugin with a method to find a row by index:
jsGrid.Grid.prototype.rowByIndex = function(arg){
//this._content.find("tr")[arg] returns a DOM element instead of a jQuery object
//Pass the DOM element to the find method to get a jQuery object representing it
return this._content.find(this._content.find("tr")[arg]);
};
Modify the rowClick function in #Narenda's answer:
rowClick: function ( args ) {
//Deselect all rows
for(var i = 0; i<this.data.length; i++){
this.rowByIndex(i).removeClass("jsgrid-highlight-row");
}
//Everything else as per the previous answer
var $row = this.rowByItem(args.item),
selectedRow = $("#jsGrid").find('table tr.jsgrid-highlight-row');
if (selectedRow.length) {
selectedRow.toggleClass('jsgrid-highlight-row');
};
$row.toggleClass("jsgrid-highlight-row");
//Any other code to run on item click
}
And add some CSS. This mimics the row hover in the default theme:
tr.jsgrid-highlight-row td.jsgrid-cell {
background:#c4e2ff;
border-color:#c4e2ff;
}
You can achieve by this following steps
First on row click you need to get selected row like this
var selectedRow = $("#jsGrid").find('table tr.highlight').
Then you can use
selectedRow.toggleClass('highlight') or selectedRow.removeClass('highlight')
DEMO
$("#jsGrid").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method Need to set auto load true
autoload: true,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
var data = [{
nickname: "Test",
email: "t#gmail.com"
}, {
nickname: "Test 1",
email: "t1#gmail.com"
}, {
nickname: "Test 2",
email: "t2#gmail.com"
}, {
nickname: "Test 3",
email: "t3#gmail.com"
}];
return data;
}
},
rowClick: function(args) {
var $row = this.rowByItem(args.item),
selectedRow = $("#jsGrid").find('table tr.highlight');
if (selectedRow.length) {
selectedRow.toggleClass('highlight');
};
$row.toggleClass("highlight");
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}]
});
tr.highlight td.jsgrid-cell {
background-color: green;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="jsGrid"></div>
If you came looking for a solution in which only 1 line is selected and which also deselects the same line, here is the solution:
selectedVal = null;
$(document).ready(function(){
jsGrid.Grid.prototype.rowByIndex = function(arg) {
//this._content.find("tr")[arg] returns a DOM element instead of a jQuery object
//Pass the DOM element to the find method to get a jQuery object representing it
return this._content.find(this._content.find("tr")[arg]);
};
});
rowClick: function (args) {
selectedVal = args.item;
let $row = this.rowByItem(args.item);
if ($row.hasClass("highlight") === false) {
//Deseleciona todas as linhas
for (let i = 0; i < this.data.length; i++) {
this.rowByIndex(i).removeClass("highlight");
}
$row.toggleClass("highlight");
} else {
selectedVal = null;
$row.toggleClass("highlight");
}
console.log(selectedVal);
}
I've been trying to display the suggestions of the typeahead in a specific html element like a div instead of the default auto-complete popup below the input textbox. Is there a way to redirect the suggestions to a custom html element.
A
first create css class named
.hide{display:none;}//css
//javascript
$(typeahead class or id name).typeahead(
{
hint: false,
highlight: true,
minLength: 1,
classNames: {
menu: 'hide' // add class name to menu so default dropdown does not show
}
},{
name: 'names',
display: 'name',
source: names,
templates: {
suggestion: function (hints) {
return hints.name;
}
}
}
);
$(typeahead class or id name).on('typeahead:render', function (e, datum)
{
//empty suggestion div that you going to display all your result
$(suggestion div id or class name').empty();
var suggestions = Array.prototype.slice.call(arguments, 1);
if(suggestions.length){
for(var i = 0; i < suggestions.length; i++){
$('suggestion div').append(liveSearch.template(
suggestions[i].name,
suggestions[i].id));
}
}else{
$('#result').append('<div><h1>Nothing found</h1></div>');
}
});
Just use $('input').typeahead({ menu: $('#your-div-id'); }).
classNames sets names of used classes in div:
$('#frm-searchForm-q').typeahead({
highlight: true,
menu: $('.f-search__suggestion'), // my div
classNames: {
dataset: 'f-search__results',
suggestion: 'f-search__item',
highlight: 'highlight'
}
});`
Made some modification to #JamesNorman suggestion and that worked for me:
<style>
span.twitter-typeahead {
width: 100% !important;
}
.twitter-typeahead .hide-element.tt-open {
display: none !important;
}
#divToDisplaySuggestions::before {
color: #6f6f6f !important;
content: 'No item found';
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<input type="text" class="form-control" id="searchInput" placeholder="Enter Item to Search" autocomplete="off">
/*
* Typeahead.js 0.11.1 with Bloodhound
* */
var _objData = {};
_objData.myItems = [];
var $_myItemsList = $('#divToDisplaySuggestions'),
$_myItems = $('#searchInput'),
_myItems = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
wildcard: '%QUERY',
url: '/includes/ajax.php?ajxFetchQuery=%QUERY',
transform: function (_response) {
// Note _response on php file is an Associative Array.
// Map the remote source JSON array to a JavaScript object array.
_objData.myItems = [];
return $.map(_response, function (_item) {
_objData.myItems.push(_item);
return _item;
});
}
}
});
$_myItems
.typeahead({
hint: false,
highlight: true,
minLength: 3,
classNames: {
menu: 'hide-element' // add class name to menu so default dropdown does not show.
}
},
{
name: 'th-my-items',
display: 'id',
source: _myItems,
limit: 20
})
.on({
'typeahead:render': function (ev, selectedItemData) {
$_myItemsList.empty();
if (_objData.myItems.length > 0) {
for (var _i in _objData.myItems) {
var _bkItem = _objData.myItems[_i];
var $_bkItem = $('<p>' + _bkItem.id + '</p>');
// Append to list.
$_bkItem.appendTo($_myItemsList);
}
$_myItemsList.removeClass('empty-booking');
} else {
$_myItemsList.addClass('empty-booking');
}
}
});
$_myItems
.on({
keyup: function () {
var _self = this;
if (!$(_self).val()) {
$_myItemsList.empty();
}
if ((_objData.myItems.length === 0) && ($(_self).val().length >= 3)) {
$_myItemsList.addClass('empty-booking');
} else {
$_myItemsList.removeClass('empty-booking');
}
}
});
I am trying to merge two JSON file and using it in autocompleteplugin.
But I do get an error TypeError: $(...).easyAutocomplete is not a function even I have added js library for both auto complete and jquery.
My code look like this:
<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>
<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>
I made a working example based on your code.
Please check you have the correct paths when you include the script files. And also check if jQuery is included.
Hope will help you:
$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
$.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
var final = [];
final.push(data1.employees1);
final.push(data2.employees2);
var new_final = final[0].concat(final[1]);
var options = {
data: new_final,
getValue: "firstName",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<div class='easy-autocomplete'>
<input id="KUNDE"/>
</div>
You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.