Ambiguous columns in Kendo TreeView HiearchicalDataSource

Question

I'm using a TreeView and two nested datasources to display relational data. Both tables have a column labeled 'Name' but when I want to indicate the fields for the TreeView to Display, it doesn't understand the nesting and just repeats the 'Name' from the first level. How do I get it to show the respective 'Name' value from each level?

When I indicate the columns to display via "dataTextField: ["Name", "Name", "Id"]" I only get the values from the outermost datasource.

The respective code

in the cshtm file:

<div>
  <h2>Well Designs</h2>  
    <div><ul id="WDtreeview"></ul></div>
</div>

@section scripts
{
    <script src="~/Scripts/App/Views/Maintenance/WellDesigns.js"></script>
}

in the WellDesigns.js file:

    var WellDesigns = {
        type: "odata",
        transport: {
            read: {
                url: function (options) {
                    return kendo.format("http://localhost:57943/odata/WellDesigns", options.Id);
                },
                //type: "GET",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                var paramMap = kendo.data.transports.odata.parameterMap(options);
                delete paramMap.$inlinecount; // <-- remove inlinecount parameter
                delete paramMap.$format; // <-- remove format parameter

                return paramMap;
            }
        },
        schema: {
            data: "value",
            total: function (e) {
                return Number(e["odata.count"]);
            },
            model: {
                id: "Id",
                hasChildren: true,
                children: Sections
            }
        }
    }

    var Sections = {
        type: "odata",
        transport: {
            read: {
                url: function (options) {
                    return kendo.format("http://localhost:57943/odata/WellDesigns({0})/Sections", options.Id);
                },
                //type: "GET",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                var paramMap = kendo.data.transports.odata.parameterMap(options);
                delete paramMap.$inlinecount; // <-- remove inlinecount parameter
                delete paramMap.$format; // <-- remove format parameter

                return paramMap;
            }
        },
        schema: {
            model: {
                id: "Id",
                hasChildren: false
            }
        }
    }

    $("#WDtreeview").kendoTreeView({
        dataSource: WellDesigns,
        dataTextField: ["Name", "Name", "Id"],
        name: "WDTV"
    });

Output of /odata/WellDesigns:

{
  "odata.metadata":"http://localhost:57943/odata/$metadata#WellDesigns","value":[
    {
      "Id":1,"Name":"Eastern Basin: M3S","StringType":null,"Area":"McClintic, ET O'Danial, O'Brien, Turner","Formations":"Wolfcamp A2 and above","Considerations":"comment"
    },{
      "Id":2,"Name":"Western Basin M4S","StringType":"Tall","Area":"McClintic","Formations":"Wolfcamp","Considerations":"Water flow"
    }
  ]
}

output of /WellDesigns(1)/Sections:

{
  "odata.metadata":"http://localhost:57943/odata/$metadata#Sections","value":[
    {
      "Id":2,"Name":"Intermediate 2","HoleTypeId":3,"WellDesignId":1
    },{
      "Id":3,"Name":"Production Alt","HoleTypeId":5,"WellDesignId":1
    },{
      "Id":4,"Name":"Surface Alt 2","HoleTypeId":1,"WellDesignId":1
    },{
      "Id":5,"Name":"Intermediate Tall","HoleTypeId":6,"WellDesignId":1
    },{
      "Id":6,"Name":"Production Long","HoleTypeId":7,"WellDesignId":1
    },{
      "Id":7,"Name":"Surface Hole","HoleTypeId":1,"WellDesignId":1
    },{
      "Id":8,"Name":"Intermediate 1 msc","HoleTypeId":2,"WellDesignId":1
    },{
      "Id":9,"Name":"Production msc","HoleTypeId":4,"WellDesignId":1
    }
  ]
}

Answer 1

Here is the solution I found.

In the inner datasource schema I defined the fields property and then used a different name for the column so it became an alias.

var Sections = {
    type: "odata",
    transport: {
        read: {
            url: function (options) {
                return kendo.format("http://localhost:57943/odata/WellDesigns({0})/Sections", options.Id);
            },
            //type: "GET",
            dataType: "json"
        },
        parameterMap: function (options, operation) {
            var paramMap = kendo.data.transports.odata.parameterMap(options);
            delete paramMap.$inlinecount; // <-- remove inlinecount parameter
            delete paramMap.$format; // <-- remove format parameter

            return paramMap;
        }
    },
    schema: {
        data: "value",
        model: {
            id: "Id",
            //This example shows how to alias a property to a different property in the data returned from the service
            // SectionName2 is the property as seen by the TreeView but it is populated by the property 'SectionName' from the returned data
            fields: { 
                SectionName2: "SectionName"
            },
            //SectionName: "SectionName",
            //SectionName2: function (){ return SectionName;},
            hasChildren: true,
            children: SectionsCasings
        }
    }
}

var tree = $("#WDtreeview").kendoTreeView({
    dataSource: WellDesigns,
    dataTextField: ["Name", "SectionName2", "Casing.Size"],
    name: "WellDesignTV",
    select: onSelect
});

NOTE:

For those with an eagle-eye or just curious, you'll notice that the second column was already changed to 'SectionName'. This is because I found it simpler to rename one of the columns in the child table rather than wait for Telerik support to respond to a support ticket or continue to search the internet, the demos, and documentation.

NOTE 2:

I did hear back from Telerik. They said that the column name would be associated with the appropriate level of data from the datasource and thus having multiple column names was fine. They even provided a sample solution that did just that, so I'm inclined to believe that the issue was something in my code rather than how the TreeView works.