About jsTree
I'm implementing the Metronic on a brand new system and want to use the jsTree, but with radios instead checkboxes. As I couldn't found any documentation about any "radio" plugin of it I've need to make by hand. Is there any?
Secondly, about the custom icons: I'm trying to use KeenIcons with duotone but they just not show up. Aren't they supported? Is there any way to set the custom <i> tag of them on the node config to they show up properly?
Lastly: is there any way to make the node rows bigger? Asking because it's a kinda hard to use it on mobile device as the touchable area can be really tricky.
Replies (4)
Hi,
Thanks for the heads-up. We just wanted to let you know that we are checking it and get back to you soon.
Regards.
Hi,
As we checked jsTree official documentation the radio control support is not available. It has only the checkbox support.
jsTree accepts class for icons so duotone icons can not be used since the duotone icons can be set only as HTML code, not as CSS class.
The customization of the jstree layout is quite complicated since if you change any padding, margin, or height of the node it impacts the entire jstree layout and it gets misaligned.
Regards.
Thanks on your reply, Sean.
If someone else want's to implement "radios" inside the tree I've did in this way:
<div class="mb-10">
</p><ul>
<li class="jstree-open" data-jstree="{"icon":"/images/icon.png"}">
<input type="radio" name="radioName" value="1"> Select this
<li class="jstree-open" data-jstree="{"icon":"/images/icon.png"}">
<input type="radio" name="radioName" value="2"> Select that
<li class="jstree-open" data-jstree="{"icon":"/images/icon.png"}">
<input type="radio" name="radioName" value="3" disabled> Not selectable
</ul>
</div>And, then, a Javascript using jQuery to trigger the "unselection" of all radios in tree and, then, select the checkbox (if the checkbox isn't disabled):
$("#kt_docs_jstree").jstree().on("select_node.jstree", function(e, data) {
$("#kt_docs_jstree input[type=radio]").attr("checked", false);
if (!$("#" + data.selected + ">a>input[type=radio]").is(":disabled")) {
$("#" + data.selected + ">a>input[type=radio]").attr("checked", "checked");
}
});
})PS.: if is there a way to "export" the content of the KeenIcons as SVG it would be great, as we could use them inside the tag itself.
Hi,
Great workaround. Thanks for sharing it.
Regarding the duotone icon, if you can use HTML code for the icon you just use it as shown in the docshere:
<i class="ki-duotone ki-wrench fs-2x">
<i class="path1"></i>
<i class="path2"></i>
</i>Regards.
