Hi, I´m in a mvc .net project and I have no idea how to set the <a href> property tag in the <li> with the Json function, how can I change the '#' in the href and the target?
My Cshtml have the tree menu like this elements:
<ul style="" data-depth="2">
<li class="ui-igtree-node ui-igtree-node-nochildren" data-path="0_2_0" data-value="000000000000000000000000" data-role="node">
<a href="#" target="_self" class="ui-corner-all">Lorem Ipsum dolor sit amet</a>
</li>
</ul>
I load the tree menu with a Json like this structure:
My Json is like:
$(function () {
var data = []; $.post("LoadMenuTree", {}, function (menu, status) { data = menu;
// Initialize igTree $("#tree").igTree({ dataSourceType: "json", dataSource: data, initialExpandDepth: 0, bindings: { textKey: "menu_string", valueKey: "id", childDataProperty: "menuDto", }
});
}); });
To dynamically set the href and target attributes in a tree menu loaded via JSON, you can modify the data processing within your JavaScript. Since you’re using a JSON object to populate your tree, you can include the url property directly in your JSON and adjust the binding settings accordingly.
Here's a quick approach:
Add the link URL to each JSON menu item, such as:
jsonCopy code{ "menu_string": "Lorem Ipsum dolor sit amet", "id": "000000000000000000000000", "url": "/targetPage", "target": "_self"}Bind the url and target properties using JavaScript after retrieving the data in your igTree setup. For example:
javascriptCopy code$(function () { $.post("LoadMenuTree", {}, function (menu) { $("#tree").igTree({ dataSourceType: "json", dataSource: menu, initialExpandDepth: 0, bindings: { textKey: "menu_string", valueKey: "id", childDataProperty: "menuDto", urlKey: "url", // Bind the URL here targetKey: "target" // Bind the target here }, nodeContentTemplate: "<a href='${url}' target='${target}'>${menu_string}</a>" }); });});This way, your links should dynamically populate as specified in the JSON. Additionally, if you’re working on a creative project like Incredibox Sprunki and exploring innovative user interface elements, similar JSON-based tree setups can streamline dynamic content display for improved interactivity.
Thank you for answering, you made my day. My issue was also resolved all because of you. I appreciate you mam.
Hello Eduardo,
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Riva IvanovaEntry Level Software Developer
Thnaks a lot, I´d resolve my issue with your tip ;)
Thank you for posting into our community!
I have been looking into your question and what I could suggest in order to change the target attribute is setting the defaultNodeTarget option of the igTree. This option will set the default target attribute value for all node anchors. However, if you require the target attribute to be different for some nodes, what I could suggest is using the targetKey option.
Additionally, setting custom values for the href attribute could be achieved by using the navigateUrlKey option.
Here could be found a small sample demonstrating my suggestion. Please test it on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Entry Level Software Developer