Kendo DropDownList Preserve Whitespace in Option - kendo-ui

Question

I am using Kendo UI for JQuery/AngularJS.
I have the following <select> control defined:
<select
kendo-drop-down-list
k-options="myOptions">
</select>
I have a datasource returning JSON with VALUE representing the value for an <option>, and TEXT representing the label for the option.
Unfortunately, the VALUE returns with leading spaces, meant to represent a hierarchy:
[
{VALUE: 1, TEXT: 'Accounting'},
{VALUE: 2, TEXT: ' Accounts Payable'},
{VALUE: 3, TEXT: ' Accounts Receivable'}
]
This should correspond to an group of options like the following:
<option value="1">Accounting</option>
<option value="2"> Accounts Payable</option>
<option value="3"> Accounts Receivable</option>
Below is my definition of options:
$scope.myOptions = {
autoWidth: true,
autoBind: false,
dataTextField: 'TEXT',
dataValueField: 'VALUE',
dataSource: {
transport: {
read: {
url: urlToREST,
dataType: 'json',
type: 'POST',
contentType: "application/json"
},
// needed to send params as JSON
parameterMap: function (data, type) {
const req = {
"QUERY_ID": $scope.queryId
};
return JSON.stringify(req);
}
},
schema: {
type: "json",
data: "resultData"
}
}
};
I need to represent multiple levels of a hierarchy in the options. I felt the best way would be to use Javascript to dynamically create a <pre> section, but it's not working.
Can anyone help me?

Answer 1

I ended up dynamically computing the amount of whitespace required to represent the hierarchy, then adding for each space (the number of spaces is a parameter returned by the remote service call):
function indent(spaceCount) {
return ' '.repeat(spaceCount);
}
$scope.options = {
dataTextField: 'TEXT',
dataValueField: 'VALUE',
template: function(dataItem) {
return kendo.template(indent(dataItem.spaces -1) *4) + '#: DESCRIPTION #')(dataItem);
},
dataSource: {
transport: {
read: {
// read definition
},
// needed to send JSON parameters to the query
parameterMap: function(data, type) {
const req = {
'QUERY_ID': $scope.queryId
};
return JSON.stringify(req);
}
},
schema: {
type: 'json',
data: 'resultData'
}
}
};
The indent function could have been done inline. This could also probably have been refactored into an AngularJS service as well.

Answer 2

I ended up using the template function and specified a table within the template
Which allows me to specify width for each row
#(Html.Kendo().ComboBoxFor(model => model.PersonId)
.DataTextField("FullName")
.DataValueField("Id")
.Value("")
.Filter(FilterType.Contains)
.MinLength(2)
.AutoBind(true)
.Template("<table><tr><td width='200px'>#: data.FullName #</td><td width='100px'> - #: data.EmpId #</td></tr></table>")
.DataSource(s =>