JsTree check nodes - javascript

I have saved checked nodes in cookies with this code:
$.cookie('q_cats', $("#category-tree").jstree("get_checked"), { expires: 7 });
I am loading my tree with this code:
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});
I don't know how can check saved nodes in my tree

Why don't you use the state plugin - it does exactly that - restore state across refreshes / reloads. Just look it up, all you need to do is add a string to your config (plugins section):
$('#category-tree').jstree({
"plugins": ["wholerow", "checkbox", "search", "state"],
"core": {
"themes": {
"responsive": false
},
"data": {
"url": "/blogs/get_cats/",
"dataType": "json"
}
}
});

Related

How to pass an array value to Router.navTo in SAPUI5

I have this call in a SAPUI5 code. Before the soldTo was a simple comboBox, but I changed it for a multiComboBox. So, now this.soldTo is an array.
this._oRouter.navTo("SearchResult", {
soldTo: this.soldTo,
shipTo: this.shipTo,
}, false);
The routing in manifest.json is defined like this:
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.openOrder.AM.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteApp",
"pattern": "",
"target": [
"Search"
]
},
{
"pattern": "{soldTo}/{shipTo}/SearchResult",
"name": "SearchResult",
"target": [
"SearchResult"
]
},
{
"name": "ResultDetails",
"pattern": "{}/ResultDetails",
"target": [
"ResultDetails"
]
}
],
"targets": {
"Search": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "Search",
"viewLevel": 1
},
"SearchResult": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "SearchResult",
"viewLevel": 2
},
"ResultDetails": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "ResultDetails",
"viewLevel": 3
}
}
}
I'm getting this error after change.
"Uncaught TypeError: Cannot read properties of null (reading 'length')"
Does anyone has an exemple how to pass the multiComboBox values to the function Router.navTo, please?
There is no need to send the array with a URL. The URL makes only sense if you want a unique address for a specific record. Therefore you should pass it with the model on your component.
Define your model in the manifest. The definition will enable you to access it using "this.getModel(""). In your views you can access the model with "this.getOwnerComponent().getModel("").

Jstree clear search does but keep nodes open

I initially had a simple jstree where all data was loaded at initialization.
$("#tree").jstree().search(searchString)
and
$("#tree").jstree("clear_search")
was working perfectly fine.
Now I have larger tree with lazy loading. My tree configuration is as follows
{
"core": {
"check_callback": true,
"loaded_state": true,
"data": {
"url": "http://x.x.x.x:9000/yang/loadOneLevel",
"dataType": "json"
},
"worker": false
},
"plugins": [
"massload",
"search",
"state"
],
"massload": {
"method": "post",
"url": "http://x.x.x.x:9000/yang/massLoadTree",
"dataType": "json"
},
"search": {
"ajax": {
"url": "http://x.x.x.x:9000/yang/searchTree",
"dataType": "json"
}
}
}
Now I perform search and clear as follows
$("#tree").jstree('search', searchString, false, false,[],false);
$("#tree").jstree("clear_search");
The search results are showing up fine. However, on clearing search, the nodes which opened to show search results close off.
Is there a way to keep all nodes open and just remove the css added for search matches?

JQuery Datatable Refresh - Unable to receive parameter value on MVC controller side

Trying to pass some parameters in JQuery Datatables, its working fine on init.
But when I try to refresh the datatable the values are received as empty on controller side.
Here is the code:
$("#SearchResultsTable").DataTable({
"processing": true,
"serverSide": true,
"bLengthChange": false,
"filter": false,
"pageLength": #Model.PageSize,
"orderMulti": false,
"ajax": {
"url": "/Request/SearchRequest",
"type": "POST",
"datatype": "json",
"data": {
"Date_To": document.getElementById("Date_To").value,
"Date_From": document.getElementById("Date_From").value
}
},
"columns": [
{ "data": "ABC", "name": "ABC", "autoWidth": true },
{ "data": "DEF", "name": "DEF", "autoWidth": true }
]
});
Refresh Datatable:
$("#Search_Btn").click(function () {
$("#SearchResultsTable").DataTable().clear();
$("#SearchResultsTable").DataTable().draw();
});
Also tried:
$("#Search_Btn").click(function () {
var table = $('#SearchResultsTable').DataTable();
table.ajax.reload();
});
I would like to refresh the table in such a way the updated vales of 'Date_To' & 'Date_From' are available on controller side.
You will need to pass the parameters via jquery datatable like below:
"data": function (data) {
data.Date_To = document.getElementById("Date_To").value;
data.Date_From = document.getElementById("Date_From").value;
}
Please take a look at the following tutorial for more details
https://www.codeproject.com/Articles/1170086/Grid-with-Server-Side-Advanced-Search-using-JQuery

jstree - tree nodes are recreated after adding a new node or removing an existing one

i built a tree with nodes using jstree. the user can choose the color background of the node with a colorpicker in the contextmenu.
Unfortunately i noticed that when a new node is created or another one removed, the tree seems to be recreated. indeed css stuff get lost and things added in node.data too.
how can i prevent this?
this is my code:
function treeCreation(){
var core = {
'check_callback': true,
};
var plugins = [
"contextmenu", "dnd", "search",
"state", "types", "wholerow"
];
var types = {
"default": {
'max_depth': 1
}
};
var contextmenu = {
"items": function($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
},
"Color": {
"separator_before": false,
"separator_after": false,
"label": "Color",
"action": function (obj) {
$('#colorpicker').trigger('click');
}
}
};
}
};
var animation = 400;
$('#tree').jstree({
"plugins" : plugins,
'core': core,
'animation': animation,
'types': types,
'contextmenu': contextmenu
});
}
i added custom callbacks because i needed to manipulate strings for translating the context-menu. Maybe it depends on that?

JsTree dnd single items

I'm using JsTree 3.0.2 with dnd and checkbox plugins. This are my current settings
$('#dataTree').jstree({
"core": {
"themes": {
"responsive": false
},
"check_callback": true,
'data': [...]
},
"checkbox": {
"keep_selected_style": false
},
"types": {
"default":{
"max_depth": 0,
"icon": "fa fa-list icon-state-success icon-lg"
},
},
"plugins": ["contextmenu", "dnd", "types","checkbox"]
});
The problem is when I drag an item all checked items are dragged. How can I prevent this? I want to maintain checked items but only drag hovered one.
Thanks

Categories