Heterogeneous Data

In most TreeView applications, the displayMemberPath and childItemsPath properties are set to strings that define the name of the property that should be displayed on the nodes and the name of the property that contains child items (the default values for these properties are 'header' and 'items').

In some applications, however, the names of these binding properties depends on the hierarchical level of the data. In these cases, you can use an array of names for either property.

The tree below is bound to a list of 'continent' items, each with a 'countries' member that contains a list of 'country' items with a 'cities' member:

Africa

Algeria

Algiers

Oran

Constantine

Angola

Luanda

Ambriz

Bailundo

Benin

Porto Novo

Cotonou

Parakou

Botswana

Gaborone

Francistown

Molepolole

Asia

Afghanistan

Kabul

Kandahar

Herat

Armenia

Yerevan

Gyumri

Vanadzor

Azerbaijan

Baku

Agjabadi

Astara

Bahrain

Manama

Riffa

Sitra

Europe

Albania

Tirana

Elbasan

Fier

Andorra

Andorra la Vieja

Canillo

Encamp

Austria

Vienna

Salzburg

Graz

Belarus

Minsk

Barysaw

Slutsk

America

Canada

Ottawa

Toronto

Vancouver

United States

Washington

New York

Pittsburgh

Mexico

Mexico City

Acapulco

San Jose

Belize

Belmopan

Dangriga

Belize City

Ocenania

Australia

Canberra

Sydney

Melbourne

New Zealand

Wellington

Christchurch

Auckland

Fiji

Suva

Labasa

Nasinu

Vanuatu

Port Vila

Forari

Etate

// This file locates: "Scripts/Lesson/C1Nav/HeterogeneousData.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
 
    tree.itemsSource = getData();
    tree.displayMemberPath = 'continent,country,city'.split(',');
    tree.childItemsPath = 'countries,cities'.split(',');
 
    // get the data
    function getData() {
        return [
            {
                continent: 'Africa', countries: [
                  {
                      country: 'Algeria', cities: [
                        { city: 'Algiers' },
                        { city: 'Oran' },
                        { city: 'Constantine' }
                      ]
                  },
                  {
                      country: 'Angola', cities: [
                        { city: 'Luanda' },
                        { city: 'Ambriz' },
                        { city: 'Bailundo' }
                      ]
                  },
                  {
                      country: 'Benin', cities: [
                        { city: 'Porto Novo' },
                        { city: 'Cotonou' },
                        { city: 'Parakou' }
                      ]
                  },
                  {
                      country: 'Botswana', cities: [
                        { city: 'Gaborone' },
                        { city: 'Francistown' },
                        { city: 'Molepolole' }
                      ]
                  },
                ]
            },
            {
                continent: 'Asia', countries: [
                  {
                      country: 'Afghanistan', cities: [
                        { city: 'Kabul' },
                        { city: 'Kandahar' },
                        { city: 'Herat' }
                      ]
                  },
                  {
                      country: 'Armenia', cities: [
                        { city: 'Yerevan' },
                        { city: 'Gyumri' },
                        { city: 'Vanadzor' }
                      ]
                  },
                  {
                      country: 'Azerbaijan', cities: [
                        { city: 'Baku' },
                        { city: 'Agjabadi' },
                        { city: 'Astara' }
                      ]
                  },
                  {
                      country: 'Bahrain', cities: [
                        { city: 'Manama' },
                        { city: 'Riffa' },
                        { city: 'Sitra' }
                      ]
                  },
                ]
            },
            {
                continent: 'Europe', countries: [
                  {
                      country: 'Albania', cities: [
                        { city: 'Tirana' },
                        { city: 'Elbasan' },
                        { city: 'Fier' }
                      ]
                  },
                  {
                      country: 'Andorra', cities: [
                        { city: 'Andorra la Vieja' },
                        { city: 'Canillo' },
                        { city: 'Encamp' }
                      ]
                  },
                  {
                      country: 'Austria', cities: [
                        { city: 'Vienna' },
                        { city: 'Salzburg' },
                        { city: 'Graz' }
                      ]
                  },
                  {
                      country: 'Belarus', cities: [
                        { city: 'Minsk' },
                        { city: 'Barysaw' },
                        { city: 'Slutsk' }
                      ]
                  },
                ]
            },
            {
                continent: 'America', countries: [
                  {
                      country: 'Canada', cities: [
                        { city: 'Ottawa' },
                        { city: 'Toronto' },
                        { city: 'Vancouver' }
                      ]
                  },
                  {
                      country: 'United States', cities: [
                        { city: 'Washington' },
                        { city: 'New York' },
                        { city: 'Pittsburgh' }
                      ]
                  },
                  {
                      country: 'Mexico', cities: [
                        { city: 'Mexico City' },
                        { city: 'Acapulco' },
                        { city: 'San Jose' }
                      ]
                  },
                  {
                      country: 'Belize', cities: [
                        { city: 'Belmopan' },
                        { city: 'Dangriga' },
                        { city: 'Belize City' }
                      ]
                  },
                ]
            },
            {
                continent: 'Ocenania', countries: [
                  {
                      country: 'Australia', cities: [
                        { city: 'Canberra' },
                        { city: 'Sydney' },
                        { city: 'Melbourne' }
                      ]
                  },
                  {
                      country: 'New Zealand', cities: [
                        { city: 'Wellington' },
                        { city: 'Christchurch' },
                        { city: 'Auckland' }
                      ]
                  },
                  {
                      country: 'Fiji', cities: [
                        { city: 'Suva' },
                        { city: 'Labasa' },
                        { city: 'Nasinu' }
                      ]
                  },
                  {
                      country: 'Vanuatu', cities: [
                        { city: 'Port Vila' },
                        { city: 'Forari' },
                        { city: 'Etate' }
                      ]
                  },
                ]
            },
        ];
    }
});

// This file locates: "Content/css/Lesson/C1Nav/HeterogeneousData.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    //height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: HeterogeneousData
        public ActionResult HeterogeneousData()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.HeterogeneousData_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.HeterogeneousData_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.HeterogeneousData_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.HeterogeneousData_Text3)
</p>
 
@Html.C1().TreeView().Id("theTree")