How to add Wijmo Combo Box or AutoComplete to FlexGrid

How to add Wijmo Combo Box or AutoComplete to FlexGrid

Posted by: aanjaneyulu on 14 September 2017, 12:06 pm EST

• 

  aanjaneyulu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:06 pm EST

  We are currently using Wijmo 5 for Components, Google Material Design Lite for CSS, AngularJS for Client, NodeJS for Server & SQL Server for Database

  We are using FlexGrid to create orders. We need a Combo box/Autocomplete which need to generate list based on user input which will be retrieved from server. Also, we need a another combo box which should generate list based on first combo box selection. For Example, when user selects a car company(Mercedes) in first combo box & user should be able to select a car model(E250 Model) in that company in the second combo box.

  Thanks in Advance.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Hi,
  
  We are looking into this issue. We will update you soon.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:06 pm EST

  Hi,
  
  For this, you need to add ComboBox/AutoComplete in FlexGrid with id attribute using wjFlexGridCellTemplate. Now, on selectionChanged in FlexGrid, handle selectedIndexChanged event for first Combobox and change itemsSource for second Combobox.

  For your reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/06/FlexGrid_conditonalComboBox.zip

• 

  mayank.topiwala

  • Post Options:
  • Link
    Copy

  Posted 16 July 2019, 11:31 am EST

  Hi Manish,
  
  We are using licensed version of wijmo flex grid for our application and we are having this requirement. So by using above solution: I can’t achieve the full solution because I am binding the data dynamically in my FlexGrid and user has the choice to add as many as number of rows by double click on the cell. (so I have to use cellType as ‘CellEdit’ in this case). So when the user first double-click inside a cell to put it in edit mode, I can’t find id to other combo-box and hence it unable to set the itemsSource property of this control. I am posting my code here please let me know if you have any solution for this. Thanks in advance.

  <wj-flex-grid #flex [itemsSource]="data" [allowAddNew]="true" [allowDelete]="true"
        (keydown)="onFlexKeydown(flex,$event)">
        <wj-flex-grid-filter #filter></wj-flex-grid-filter>
        <wj-flex-grid-column [binding]="'exposureType'" [header]="'Exposure Type'" [width]="'*'">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
            <wj-combo-box id="exposureTypeCombo{{cell.row.index}}" [itemsSource]="exposures"
              [displayMemberPath]="'exposureType'" [(selectedValue)]="cell.item.exposureType"
              [selectedValuePath]="'exposureType'" [(text)]="cell.item.exposureType" [isRequired]="false"
              [isEditable]="false" (selectedIndexChanged)="onSelectedIndexChanged(cell, cell.item.exposureType)">
            </wj-combo-box>
          </ng-template>
        </wj-flex-grid-column>
        <wj-flex-grid-column [binding]="'exposureName'" [header]="'Exposure Name'" [width]="'*'">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
            <wj-combo-box id="exposureNameCombo{{cell.row.index}}" [itemsSource]="exposureNames"
              [displayMemberPath]="'exposureName'" [(selectedValue)]="cell.item.exposureNameID"
              [selectedValuePath]="'exposureNameID'" [(text)]="cell.item.exposureName" [isRequired]="false"
              [isEditable]="false" (selectedIndexChanged)="onSelectedIndexChanged(cell, cell.item.exposureName)">
            </wj-combo-box>
          </ng-template>
        </wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Exposure Value'" [binding]="'exposureValue'" [width]="'*'"></wj-flex-grid-column>
                  </wj-combo-box>
          </ng-template>
        </wj-flex-grid-column> -->
      </wj-flex-grid>