How to change the columns collection set of a kendo TreeList dynamically?

Question

Try to change the columns list dynamically via a query...

When I construct the TreeList, I call for columns:

$("#treelist").kendoTreeList({
        columns: AnalyseCenterSKUService.getKPIColumnList($scope)

If I return a simple array with the fields, it's working..

If I call a $http.get (inside my getKPIColumnList(..) function) which add some columns to the existing array of columns, the TreeList is not constructed correctly.

Any suggestion will be really appreciated: :)

EDIT 22-10-2019 09:00

Treelist init

$("#treelist").kendoTreeList({
        columns: AnalyseCenterSKUService.getKPIColumnList($scope), 
        scrollable: true,
        columnMenu : {
            columns : true
        },
        height: "100%", 
        dataBound: function (e) {
            ExpandAll();
        },
        dataSource: {
            schema: {
                model: {
                    id: "id",
                    parentId: "parentId",
                    fields: {
                        id: { type: "number" },
                        parentId: { type: "number", nullable: true },
                        fields: {
                            id: { type: "number" },
                            parentId: { type: "number", nullable: false }
                        }
                    }
                }
            },
            transport: {
                read: {

                    url: "/api/AnalyseCenter/GetWorkOrderTree/0",
                    dataType: "json"
                }
            }
        }

The getKPIColumnList return an static array + some push with dynamic columns (from DB)

angular.module('AnalyseCenterDirectives')
.service ('AnalyseCenterSKUService', function ($http) {

        var toReturn = [ {field: "Name", title: "Hiérachie SKU", width: "30%" }, ..., ..., .... ];

I try in this function to push DB result

    return $http.get("/api/AnalyseCenter/GetWorkOrderHistorianAdditonalColumns?equipmentName=" + equipmentName)
             .then(function (result) {
                 var data = result.data;
                 if (data && data !== 'undefined') {
                     var fromDB = data;


                     angular.forEach(fromDB, function (tag) {
                         var tagName = tag.replace(".","_");
                         toReturn.push({                                 
                              field: tagName, title: tag, width: '10%',
                              attributes: { style: "text-align:right;"}                                                         })
                        })

The stored procedure GetWorkOrderHistorianAdditonalColumns returns a list of string (future column)

Answer 1

That is because ajax is async , that means your tree list is being initialized before the request finishes. A classic question for JavaScript newcomers. I suggest you take a while to read about ajax, like How does AJAX works for instance.

Back to your problem. You need to create your tree list inside the success callback(I can't give you a more complete solution since I don't know what you're doing inside your function or which framework you're using to open that ajax request) with the result data, which is probably your columns. Then it would work as if you're initializing it with arrays.