Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Valliappan
1355
Angualr 4.0 app - Ignite UI Treeview - SelectionChanged event
posted

Hi,

I am working on a Angular 4.0 app and trying to Ignite UI Angular extensions version. I hooke dup igTreeview and configured rowSelectionChanged event in typescript file.

I wanted to get the selected node (ui.selectedNodes[0].data) but i am getting ts compilation error

I really appreciate your help.

Code snippet:

  bindings: {
        childDataProperty : "IncentiveList",
        textKey : "Name",
        valueKey : "GuidanceID",
imageUrlKey: "ImageUrl"
      },
checkboxMode: "triState",
singleBranchExpand: true,
dataSourceType: "json",
initialExpandDepth: 0,
pathSeparator: ".",
selectionChanged: function(evt, ui) {
findDetailService.setSelectedIncentive(ui.selectedNodes[0].data);
},
Compilation Error:
Property 'selectedNodes' does not exist on type 'SelectionChangedEventUIParam'
Parents
No Data
Reply
  • 2671
    Suggested Answer
    Offline posted

    Hello Valliappan,

    I've tested the use scenario and I can confirm that the interface describing that Tree event does not match (thus the compilation error). I've added an issue for this interface on GitHub repository and you can monitor that for updates: https://github.com/IgniteUI/igniteui-angular2/issues/171

    In the meantime, since that only affects the type checking performed for TypeScript files, it can be worked around rather easily.

    The fastest solution would be to just to override the "ui" parameter type, so the compiler can ignore it:

    this.treeOptions = <IgTree>{

      bindings: this.treeBinding,

      selectionChanged: (ev, ui: any) => {

        console.log(ui.selectedNodes);

      }

    }

    Or you can also bind event handler via the component template markup :

    <ig-tree widgetId='tree1' [dataSource]='treeData' [bindings]="treeBinding" (selectionChanged)="selectionChangedHandler($event)"></ig-tree>

    And the matching function in the component:

    selectionChangedHandler($event) {

        console.log($event.ui.selectedNodes);

    }

    Let me know if these suggestions help out and if there's anything else with this case that I can help with.

    Regards,

    Damyan Petev

    Software Developer

    Infragistics, Inc.

Children
No Data