Kendo UI Custom Dropdownlist - multiple column for datatextfield and single for datavaluefield

Question

I want to have multiple datatextField column as im returning a custom List which returns me list with property Name,Status and PID, but i can't use multiple columns on my DatatextField i-e Name and Status so that i can use them for my template property shown below,

Name and Status column is necessary for my template and PID is necessary for my datavalueField

it shows me error for Status is undefined

<script>
    $(document).ready(function () {
        $("#prog").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "PID",
            optionLabel: "...select programme...",
            headerTemplate: '<div class="dropdown-header">' +
                    '<span class="k-widget k-header">status</span>' +
                    '<span class="k-widget k-header">Name</span>' +
                '</div>',
            valueTemplate: '<span class="selected-value">#: Name#</span>',
            template: '<span class="k-state-default">#:  Status#</span>' +
                      '<span class="k-state-default"><h3>#: Name#</h3></span>',
            dataSource: {
                transport: {
                    read: {
                        dataType: "json",
                        url: "@Url.Action("GetProgrammesInfo", "Programme", new { ECID = ViewBag.ECID as int? })"
                    }
                }
            },
            change: function (e) {
                var value = this.value();
                alert(value);
            }
        });

        var dropdownlist = $("#prog").data("kendoDropDownList");
    });
</script>

Answer 1

I think to reference a property inside the template that isn't the textfield or valuefield, you will need to use data.Status.

If I switch to that, it seems to work. Also if I switch the dataTextField to Status, I get the error on the Name, and if I change the Name to data.Name, it works again.

Somewhat working sample... http://jsbin.com/xemef/1/edit