igTree- set custom target and navigationUrl

C-00227339

by rivanova

HTML

<title></title>

<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="https://cdn-na.infragistics.com/igniteui/2022.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="https://cdn-na.infragistics.com/igniteui/2022.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="https://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/2022.1/latest/js/infragistics.lob.js"></script>

<ul id="tree"></ul>

JavaScript

$(function() {
  var data = [{
      ID: 1,
      RegionName: "North America",
      Countries: [{
          ID: 1,
          CountryName: "United States",
          Target: "_self",
          NavigateUrl: "https://www.igniteui.com/help/api/2022.1/ui.igtree"
        },
        {
          ID: 2,
          CountryName: "Canada",
          Target: "_self",
          NavigateUrl: "https://www.igniteui.com/help/api/2022.1/ui.igtree"
        },
        {
          ID: 3,
          CountryName: "Mexico",
          Target: "_self",
          NavigateUrl: "https://www.igniteui.com/help/api/2022.1/ui.igtree"
        },
      ],
    },
    {
      ID: 2,
      RegionName: "South America",
      Countries: [{
          ID: 4,
          CountryName: "Brazil",
          Target: "_blank",
          NavigateUrl: "https://www.infragistics.com/"
        },
        {
          ID: 5,
          CountryName: "Uruguay",
          Target: "_blank",
          NavigateUrl: "https://www.infragistics.com/"
        },
      ],
    },
    {
      ID: 3,
      RegionName: "Europe",
      Countries: [{
          ID: 6,
          CountryName: "United Kingdom",
          Target: "_blank",
          NavigateUrl: "https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery"
        },
        {
          ID: 7,
          CountryName: "Germany",
          Target: "_blank",
          NavigateUrl: "https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery"
        },
        {
          ID: 8,
          CountryName: "Bulgaria",
          Target: "_blank",
          NavigateUrl: "https://www.infragistics.com/community/forums/f/ignite-ui-for-jquery"
        },
      ],
    },
  ];

  $("#tree").igTree({
    dataSource: data,
    defaultNodeTarget: "_blank",
    bindings: {
      textKey: "RegionName",
      valueKey: "ID",
      childDataProperty: "Countries",
      bindings: {
        textKey: "CountryName",
        valueKey: "ID",
        targetKey: "Target",
       ...