Does FlexGrid supports Dropdown Columns in Angular 4?

Posted by: binhgreensoft on 30 November 2017, 1:36 pm EST

    • Post Options:
    • Link

    Posted 30 November 2017, 1:36 pm EST

    Hi,

    I have code:

    component.html

    
    <wj-flex-grid #testrid 
        [itemsSource]="testData" 
        [selectionMode]="'Row'" 
        [headersVisibility]="'Column'" 
        [allowResizing]="'ColumnsAllCells'"
        [keyActionTab]="'CycleOut'" 
        [showAlternatingRows]="true">
    
        <wj-flex-grid-column [header]="'Name'" 
            [binding]="'name'" 
            [isRequired]="false" 
            [isReadOnly]="false">
        </wj-flex-grid-column>
    
        <wj-flex-grid-column [header]="'test combo'" 
            [binding]="'testColumn'" 
            [isRequired]="false" 
            [isReadOnly]="false" 
            [dataMap]="getTestColumnData()">
        </wj-flex-grid-column>
    </wj-flex-grid>
    
    

    component.ts

      export class TestComponent {    
        public testData = [{"name": "Test name 1", "testColumn": "Test1"}, 
            {"name": "Test name 2", "testColumn": "Test2"},
            {"name": "Test name 3", "testColumn": null}];
        public getTestColumnData() {
            return ["test1", "test2", "test3", null];
        }
      }
    
    

    Result is dropdown column displayed OK but when I click to that column then the dropdown popup displayed and closed immediately. I cannot select any value in dropdown.

    I use Angular 4.

    Plz help,

    Thanks

  • Posted 3 December 2017, 7:23 pm EST

    Hi,

    Do not bind dataMap with a function. Bind with a model on your component.

    <wj-flex-grid-column [header]="'test combo'" 
        [binding]="'testColumn'" 
        [isRequired]="false" 
        [isReadOnly]="false" 
        [dataMap]="dataMap">
    </wj-flex-grid-column>
    
      public dataMap;
      public testData = [{"name": "Test name 1", "testColumn": "Test1"}, 
      {"name": "Test name 2", "testColumn": "Test2"},
      {"name": "Test name 3", "testColumn": null}];
    public getTestColumnData() {
      return ["test1", "test2", "test3", null];
    }
      constructor(private _DataService:  DataService) {
        this.dataMap = this.getTestColumnData();
      }
    

    ~nilay

  • Posted 5 December 2017, 1:49 am EST

    Thank you,

    I replaced it by using template and wj-combo-box.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels