FlexGrid autoComplete + FlexGridFilter - Howto ? DataMaps, CellTemplate,

FlexGrid autoComplete + FlexGridFilter - Howto ? DataMaps, CellTemplate,

Posted by: chifret on 14 September 2017, 12:12 pm EST

• 

  chifret

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:12 pm EST

  Hi guys,

  I promise I don’t try to stack the more features in the same use case (I could seems I do), but I’ve a nice case for you

  In a grid, I need an autocomplete input item.
  
  As the DataMap doesn’t seems to allow that just by itself, I went for a celltemplate.
  
  That was a bit weird to set up, but smooth enough. (see simplified example below, if that helps).
  
  Basically, I made a cellEdit cellTemplate with an autocomplete, and a cell cellTemplate, with the ID and a Pipe.

  … until I tried to use the FlexGridFilter ! Without DataMap, it displayed the ids.
  
  Halas, I had to strip the DataMap away (and making a Pipe instead) because it made its list appears and both were in conflict.

  So my question is :

  • Is it possible to use a regular DataMap as an autocomplete ?
  • Is it possible to use it regularly in a cell template (without a pipe that can’t be handled by the FlexGridFilter) ?
  • Is it possible to disable the default interaction behavior of the DataMap ?
  • Is it possible to specify use some kind of DataMap with the filtring ?
  • Last remark, I noticed that I can’t make the scrollDown trigger out of the DataMap list without the mouse. It would be really interesting.

  Thanks again for your help.

  <wj-flex-grid-column [header]="'Supplier'" [binding]="'SupplierId'" [dataMap]="dtmSuppliers">
              <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
                  {{item.SupplierId | supplierPipe : cvSuppliers | async}}
                  <div class="wj-elem-dropdown"><span class="wj-glyph-down" (click)="forceDropDown(cell)"></span>
                  </div>
              </ng-template>
              <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
                  <wj-auto-complete #suppliersCombo
                                    [(selectedValue)]="cell.value"
                                    [itemsSource]="cvSuppliers"
                                    [displayMemberPath]="'supplierName'"
                                    [selectedValuePath]="'supplierId'">
                  </wj-auto-complete>
              </ng-template>
          </wj-flex-grid-column>
  
      forceDropDown(cell: any) {
          this.flexGrid.startEditing(false, cell.row.index, cell.col.index, true);
          setTimeout(() => { this.suppliersCombo.isDroppedDown = true; }, 250);
      }

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,

  Thanks for your detailed use case. We are looking into it. We will get back to you on this soon.

  Thanks,
  
  Abhishek

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hello Chifret,
  
  >>>>> Is it possible to use a regular DataMap as an autocomplete ?

  If we are correct, you would like to perform AutoComplete functionality with existing DataMap. If yes, we cannot with existing DataMap.

  >>>>> Is it possible to use it regularly in a cell template (without a pipe that can’t be handled by the FlexGridFilter) ?

  You would like to use AutoComplete in place of DataMap using wjFlexGridCellTemplate. But this will cause the issue with FlexGrid Filter, filter will show the cell value(ID).

  This problema has a solution which is mentiond further.

  The AutoComplete can be used at Cell level. But in the investigation, we found that it requires further investiagtion from the developer team. Hence, this issue has been escalated to the concerned team for further investiagtion with tracking id 278225.

  >>>>> Is it possible to disable the default interaction behavior of the DataMap ?

  As per understanding, you would like to change default behavior of existing DataMap. Could you please confirm your requirement and mention desired changes?

  >>>>> Is it possible to specify use some kind of DataMap with the filtring ?

  Yes, you can use DataMap in FlexGridFilter too. By assigning desired dataMap to valueFilter’s dataMap property. Please refer to the following code snippet for the same.

  filterChanging(s:wjGridFilter.FlexGridFilter,e:wjGrid.CellRangeEventArgs){
          if(e.col==0){
              s.getColumnFilter(e.col).valueFilter.dataMap= new wjGrid.DataMap(this.country, 'id', 'country');
          }
      }

  >>>>> Last remark, I noticed that I can’t make the scrollDown trigger out of the DataMap list without the mouse. It would be really interesting.

  we are sorry, we are able to replicate the issue at our end, We are able to scrollDown in DataMap usign Mouse wheel and keyboard arrow keys.

  Thanks,
  
  Manish Kumar Gupta

• 

  chifret

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Your solution does the job perfectly, thank you !
  
  I never noticed the valueFilter until now.

  >>>>>> Last remark, I noticed that I can’t make the scrollDown trigger out of the DataMap list without the mouse. It would be really interesting.
  
  >>>we are sorry, we are able to replicate the issue at our end, We are able to scrollDown in DataMap usign Mouse wheel and keyboard arrow keys.
  
  If you open it with the mouse, then it works.
  
  But if you only use the keyboard to enter the cell, it seems you can’t make the dropdown appears (ie by using tab, enter, spacebar, …). Yet I can’t tell on which key it should react

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,
  
  We are glad to know that our solution works for you and sorry , we do not have any solution for the last query for opening DataMap dropDown using the keyboard. We have forwarded this issue to the concerned team for further investigation with tracking id 278472. We will let you know as soon as we get any solution for the same.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:12 pm EST

  Hi,
  
  You can open dropDown using F4 or Alt+down keys. If still, you would like to open dropDown using different keys, you can accomplish this by handling keyDown event with some non-public method. Please refer to the attached code snippet for the same.

  // show/hide list when user presses the Space bar
  grid.hostElement.addEventListener('keydown', function (e) {
      if (e.keyCode == 32) {
          e.preventDefault();
          grid._edtHdl._toggleListBox();
      }
  }, true)

  Thanks,
  
  Manish Kumar Gupta

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2018, 9:24 am EST

  Hi,
  
  Sorry for the late reply.

  "toggleDropDownList " method has been added to the FlexGrid control.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 January 2018, 7:11 am EST

  Hi ,
  
  We are sorry for the late reply.
  
  Regarding #278225,

  You may use ComboBox as DataMap using wjFlexGridCellTemplate with providing source as an array no CollectionView.

  ~Manish