Kendo DropDownList Preserve Whitespace in Option

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 =>