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)

score 0 · Answer 1 · answered Oct 21 '19 at 23:06

0

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.

answered Oct 21 '19 at 23:06

DontVoteMeDown

21,122
10
69
105

Thank you for your reply. I have understood that it's async. But, it's difficult for me to found a way to construct the TreeList correctly ... first adding the columns, then the data. I will investigate the success callback I'm using Kendo + Angular Js + C#.net .. Tx – Dieter Oct 22 '19 at 06:55
@Dieter yeah, you will have 2 requests. It starts to get more complex. I would suggest you to mix it all in just one request, columns and data. Or to load the columns in your view previously, without ajax. There are many ways. – DontVoteMeDown Oct 22 '19 at 12:15

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

1 Answers1