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
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("").
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?
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
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?
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