Autocomplete overwrite DataMap getDisplayValues

Posted by: renatas.daunys on 15 March 2024, 4:23 am EST

  • Posted 15 March 2024, 4:23 am EST

    I am trying to override the default dropdown values and it works fine but when I am trying to set autoComplete component for collumn editor field it seems it overwrite dataMap and getDisplayValues not working anymore:

    editor = new AutoComplete(document.createElement(‘div’), {

    itemsSource: col.dataMap.collectionView,

    displayMemberPath: col.dataMap.displayMemberPath,

    selectedValuePath: col.dataMap.selectedValuePath

    });

        <wj-flex-grid  #grid [itemsSource]="data">
        </wj-flex-grid>
    
        data = [
            { name: ' United Kingdom (has space prefix)' },
            { name: 'United States of America (has space suffix) ' },
            { name: ' Japan (has spaces either side) ' },
            { name: 'United Republic of Somewhere' }
          ];
        
          @ViewChild('grid', { static: true }) grid!: FlexGrid;
        
          ngOnInit(): void {
            this.grid.columns.clear();
        
            const dataMap = new DataMap(this.data, 'name', 'name');
        
            // Override the default dropdown values with custom values
            dataMap.getDisplayValues = (currentRow?: any) => {
              return ['test', 'test2'];
            };
        
            const column = new Column({
              name: 'name',
              header: 'Name',
              binding: 'name',
              editor: null,
              dataMap: dataMap,
              dataMapEditor: DataMapEditor.DropDownList,
              dataType: DataType.String
            });
        
            this.grid.columns.push(column);
        
            this.addAutoCompleteColumns();
          }
        
          private addAutoCompleteColumns(): void {
            (this.grid.columns ?? []).forEach((col: Column) => {
              if (col.dataMap) {
                col.editor = new AutoComplete(document.createElement('div'), {
                  itemsSource: col.dataMap.collectionView,
                  displayMemberPath: col.dataMap.displayMemberPath,
                  selectedValuePath: col.dataMap.selectedValuePath
                });
              }
            });
          }
  • Posted 18 March 2024, 9:37 pm EST

    Hello

    I apologize, but I am unable to replicate the behavior you want exactly. A sample from your side with details about the requirements would be helpful.

    According to my observations, there are some issues in the shared code snippet that are creating difficulty in finding the required behavior. I can see the problem in your AutoComplete, but this is happening because of not properly using the data map. As per your code, you seem to have different values in the column & its dataMap dropdown without any mapping between them. I have some suggestions and a sample that may help you.

    Please use the proper mapping between items in the column and values shown in dataMap. Refer to the demos provided for Wijmo FlexGrid DataMap. Or if you want to allow cell data values other than those present in dataMap, then set the isEditable property of dataMap to true. Also, you need to correct the displayMemberPath of AutoComplete in your code.

    I’ve made a few modifications to your code, please refer to this sample: https://jscodemine.mescius.io/sample/Y6QTQdhD9UaatsxzVdidUQ/

    Please modify the sample accordingly and acknowledge me about the required functionality. I hope it may give you an idea to achieve your requirements, otherwise feel free to ask for any further assistance.

    Regards

Need extra support?

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

Learn More

Forum Channels