Forums Ignite UI for ASP.NET MVC
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eduardo Mayorgas
20
How to set a link url or controller action in a tree childnode
posted

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",
                      }

           });

      });
});

  • 0
    Offline posted

    Here's a quick approach:

    Add the link URL to each JSON menu item, such as:

    json
    Copy 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:

    javascript
    Copy 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.

  • 0
    Offline posted

    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:

    json
    Copy 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:

    javascript
    Copy 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.