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
30
Embedding igx-treegrid in igx-combo
posted

Hi, 

Is there any way we can embed igx-treegrid within igx-combo because I want to display a tree like structure in my combo box and I was hoping that I can find an example on how to use tree grid in ng-Template section within igx-combo. 

I would really appreciate a working link of some sample example.

Thanks 

Sean

  • 21795
    Offline posted

    Hello Sean,

    The main aim of IgxCombo is to combine an input with IgxDropDown. As you know IgxDropDown is a component which displays a scrollable list of items. Looking at your question you need a drop down which should display a tree structure. If this is what you need you should not use IgxCombo, neither IgxDropDown as you do not need a drop down with scrollable list of trees. What you can use is IgxToggle directive. If you are using a button to open and close the drop down your markup should look something like this:

    <button igxButton="raised" igxRipple [igxToggleAction]="toggle">Open tree grid</button>
    <div igxToggle #toggle="toggle">
     <igx-tree-grid #grid1 [data]="data" childDataKey="childDataKey" primaryKey="ID" [width]="'900px'" [height]="'500px'">
      <!-- Add your columns here -->
     </igx-tree-grid>
    </div>

    Please let me know if this is what you need or if you have any additional questions on this matter.