Only 1st column "Name" is showing up, other columns ignored

[pprotim]

Hi, I am new to angular js. I was exactly looking similar to tree-grid-directive. Thank you for the tree-grid directive. But I am facing a strange issue. When I mode the raw data code for the example in treeGridTest.js file is moved under a function (submitForm) then I do not get all the columns back, instead it is only showing 1st column. I have modified the treeGridTest.js and treeGrid.html to treeGrid.jsp ( just to work with jsp, and added a submit button). Please see the result in output.png Changes for treeGridTest.js is as below:

app.controller('treeGridController', function ($scope, $timeout) { var tree; $scope.tree_data = [];---->added this line $scope.submitForm = function() {--- added this line

        var rawTreeData = [
                           {
                               "DemographicId": 1,
                               "ParentId": null,
                               "Name": "United States of America",
                               "Description": "United States of America",
                               "Area": 9826675,
                               "Population": 318212000,
                               "TimeZone": "UTC -5 to -10"
                           },

.... ..... ...... rest of the code remains same here }//closure of function submitForm }//closure of controller treeGridController..

Changes in treeGrid.jsp (which was originally treeGrid.html fiile)

bare minimum directive: <tree-grid tree-data="tree_data"></tree-grid>

============added button from a form starts============= <form name="myForm"> <button type="button" class="btn btn-primary" data-ng-click="submitForm(myForm)">Submit</button> " =============added button from a form ends===============

Could you please guide me where I am doing the mistake or what changes I need to do the correction?

Thanks Partha.

[magiccrafter]

Try adding the col_defs property in your Controller with the columns you want to show:

$scope.col_defs = [
    { field: "Area", displayName: "Area" }
];

Then your directive should be used as:

<tree-grid tree-data="tree_data" col-defs="col_defs"></tree-grid>

This should give you the basic idea.

[pedro-mass]

what @magiccrafter said fixed the issue for me as well. It seems manually defining the column names before dynamically loading it's data is what's needed.

Which is shame if we wanted dynamic columns.

[TrueDub]

Closing as solution present.