Typescript Issue with Angular UI grid Tree View

[gdesigner31]

Below is a usual angularJS html sample using ui-grid-tree-view, which renders properly.

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid">

when converting the code to typescript, ui-grid-tree-view directive is not rendering, even the pre function in the directive is not being reached.

For typescript code, "gridOptions" is being added as a public var to the controller class. Relevant code sample:

export class MyController{
    constructor(){
        this.gridOptions = {
            columnDefs: [
                { name: 'Name', width: '15%' },
                { name: 'Description', width: '15%' },
                { name: 'IsActive', cellTemplate: '<ul ng-if="row.entity.IsActive == true"><li style="color:green"></li></ul><ul ng-if="row.entity.IsActive== false"><li style="color:red"></li></ul>', width: '10%' }
            ]
        }
    }
}

Created the required dataArray for tree view using a recursion function. Using in HTML:

<div ng-controller="MyController as ctrl"
    <div id="grid1" ui-grid="ctrl.gridOptions" ui-grid-tree-view class="grid"></div>
</div>

Any suggestions are welcome.

[JLLeitschuh]

None of us have started working with typescrip. You may be on your own on this one. If you manage to find a solution please post it here for others.

[inviolablegenesis]

@gdesigner31 did you manage to find a solution for this? i'm having the same problem.

[MikeSark]

@gdesigner31, @inviolablegenesis

I am sure by now, you have resolved the issue, but I thought it worth mentioning that simply setting the data attribute of ui-grid to the variable in controller that holds the data should do the trick.

this.gridOptions = { data = this.dataArray, << dataArray is an array of objects holding your data in the controller. such this.users = [{}, {}, {} ] columDefs:....

this worked for me.

[AbhishekGarg]

It might be pretty late, but here's the solution we found (one of my team members raised the issue (gDesigner31)). Our original setup worked. The problem was due to a mistake on our part. We missed including the dependency for ui.grid.treeView on our app module. Adding the dependency resolved the issue.

Hope this helps someone else stumbling across the issue.

[evelinfong]

How do you add the 'ui.gird.treeView' dependency on your app module? I tried this static $inject = ['ui.grid.treeView' ]; but it is not working.

[AbhishekGarg]

The dependency is added in the square brackets in the angular syntax. Ex: var app = angular.module ('myApp', ['ui.grid.treeView'])

I am not sure what went wrong, but $inject should also work, not sure of the syntax.

[evelinfong]

This method var app = angular.module ('myApp', ['ui.grid.treeView']) works in Javascript but not Typescript though.

[jkuliyev]

I am facing similar issues - was tasked to convert the app.js to Typescript, don't know how to bite into this since everything breaks - from dependency to column definitions. Does anyone know if there is a working online sample that was transitioned to TS so we could examine the code? Thanks so much!

[evelinfong]

I didn't end up using Angular UI grid tree view and choose something else since it is not supported for Typescript. Additionally, I saw this post on Stack Overflow: https://stackoverflow.com/questions/32112911/issue-with-angular-ui-grid-tree-view-when-working-with-typesript Hopefully it helps!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mportuga]

Mark help wanted

[AbhishekGarg]

The basic type definitions are available in the DefinitelyTyped project on GitHub. We built from there, fixing the definitions when we found something missing, or incorrect. And this was done almost 3 years back, so it should definitely work. Once again, we used AngularJS (1.x). Unfortunately, I do not have the source code now.