1. Home
  2. Forum
  3. Angular - EJ 2
  4. Unexpected Behaviors when trying to set value on autcomplete in treegrid

Unexpected Behaviors when trying to set value on autcomplete in treegrid

I have a column in a treegrid made up of ids. The ids are guids and I don't want to display them to the user. Instead I want to display the user friendly text that maps to the id.

When the user edits the row I show an autocomplete that has a list of friendly ids that the user can choose from.

I'm having an issue setting the autocomplete value. Instead of setting the user friendly text, it is showing the the value (which would be a guid) inse


Attachment: v1_3086bdc3.zip

9 Replies 1 reply marked as answer
ZA Zachary October 9, 2021 07:23 PM UTC

Video capture attached.


Attachment: Autoc__Google_Chrome_20211009_121816_a1a18200.zip

BC Berly Christopher Syncfusion Team October 11, 2021 11:30 AM UTC

Hi Zachary, 

Greetings from Syncfusion support. 

We have checked the shared sample and you have mapped value and text field for the AutoComplete fields property. Due to this, the reported issue is occurred. By default, the search and filter work based on the Value field alone in the AutoComplete component. Mapping text field for AutoComplete will only update the text to list items in popup but functionalities like sorting and filtering will be performed based on the value field. So, you can bind only the value field based on the component design.    
    
   
You can get the id of the selected item from the component in the change or select event arguments (args.itemData). Based on the value get in the event arguments, you can differentiate and proceed further.   
   

Else, you can use our combobox component which is used to map both text and value field for the component. Please find the demo and documentation from the below link. 



For your convenience, we have modified the sample and attached it below. 

 public accountGroupFields: Object = { groupBy: 'group', value: 'text' }; 
 write: (args: { rowData: Object, column: Column }) => { 
                this.accountAutoComplete = new AutoComplete(); 
                this.accountAutoComplete.dataSource = this.accountAutoCompleteData; 
                this.writeValue = (args.rowData as TreeGridRowData).text; 
                this.accountAutoComplete.value = this.writeValue;              
} 
export class TreeGridRowData { 
    id: string; 
    text: string; 
} 
export let treeGridData: TreeGridRowData[] = [ 
    { 
        id:"5", 
        text:"Id One text", 
    }, 
    { 
        id:"1", 
        text:"Id Two text", 
    }, 
    { 
        id:"3", 
        text:"Id Three text", 
    }     
]; 


Regards, 
Berly B.C 


ZA Zachary October 13, 2021 06:33 PM UTC

Thanks Berly,

I'll give this a try and see how far I get.

1) Do you have any guidance on how to handle duplicate values with different ids? I have some ideas, but I was curious to get your take.

2) I started experimenting with duplicate values and getting the id on the change and select events. I notice that the wrong item is returned in itemdata for these. it looks like it is returning the first match. I worked around this by grabbing the id from the item field. Wanted to bring it to the teams attention as a potential bug.

Selecting the last item on the list is returning the object for the 2nd to last.


export let autoCompleteData : AutoCompleteData[] =[
    {
        text:"Id One text",
        id: "1",
        group: "group"
    },
    {
        text:"Id Two text",
        id: "2",
        group: "group"
    },
    {
        text:"Id Three text",
        id: "3",
        group: "group"
    },
    {
        text:"Id Four text",
        id: "4",
        group: "group"
    },
    {
        text:"Duplicate Text",
        id: "5",
        group: "group"
    },
    {
        text:"Duplicate Text",
        id: "77",
        group: "group2"
    }
];

BC Berly Christopher Syncfusion Team October 14, 2021 02:33 PM UTC

Hi Zachary, 
  
Thanks for sharing information to us.  
  
As we mentioned earlier, the AutoComplete component used to filter the data based on the mapped value filed alone. Due to this, when select the duplicate data args.itemData will returns the first matched value of the entered text. This is an intended behaviour of the component. 
  
So, we suggest you to use our ComboBox component which is used to define both text and value field. So that the reported issue will no longer occurred in the application. 
  
Please find the modified sample and code snippet below. 
import { AutoComplete, ComboBox,FilteringEventArgs, PopupEventArgs } from "@syncfusion/ej2-angular-dropdowns"; 
import { Column } from "@syncfusion/ej2-angular-treegrid"; 
import { Predicate, Query } from "@syncfusion/ej2-data"; 
import { AutoCompleteData } from "./autocompletedata"; 
import { IdToTextMapper } from "./id-to-text-mapper"; 
import { TreeGridRowData } from "./TreeGridRowData"; 
 
export class AccountDropdownLogic { 
 
    public accountIdMapper: IdToTextMapper; 
    public accountEditOptions: Object; 
    public accountAutoComplete: ComboBox; 
    public accountElement: HTMLElement; 
    public accountAutoCompleteData: any = []; 
    public accountGroupFields: Object = { groupBy: 'group', text: 'text', value:'id' }; 
    public writeValue: string; 
    constructor() { 
 
        this.accountEditOptions = { 
            create: () => { 
                this.accountElement = document.createElement('input'); 
                return this.accountElement; 
            }, 
            read: () => { 
                return this.accountAutoComplete.value; 
            }, 
            destroy: () => { 
                this.accountAutoComplete.destroy(); 
            }, 
            write: (args: { rowData: Object, column: Column }) => { 
                this.accountAutoComplete = new ComboBox(); 
                this.accountAutoComplete.dataSource = this.accountAutoCompleteData; 
                this.writeValue = (args.rowData as TreeGridRowData).text; 
                this.accountAutoComplete.value = this.writeValue;                 
                //  this.accountAutoComplete.text=this.accountIdMapper.getText(this.writeValue); 
                this.accountAutoComplete.showClearButton = true; 
                this.accountAutoComplete.popupWidth = "300px"; 
               // this.accountAutoComplete.showPopupButton = true; 
                this.accountAutoComplete.appendTo(this.accountElement); 
                this.accountAutoComplete.fields = this.accountGroupFields; 
                this.accountAutoComplete.cssClass = "autocomplete"; 
 
 
  
  
Screenshot of the duplicate value along with corresponding ID: 
 
Regards, 
Berly B.C 


ZA Zachary October 14, 2021 02:56 PM UTC

Thanks Berly, but I can't use the combobox, because it does not support autocomplete typing.


PM Ponmani Murugaiyan Syncfusion Team October 15, 2021 11:10 AM UTC

Hi Zachary, 

Thanks for the update. 

You can enable the allowFiltering property of ComboBox component to filter the data which shows the matched item in the popup as equivalent to AutoComplete component. 


write: (args: { rowData: Object, column: Column }) => { 
       this.accountAutoComplete = new ComboBox(); 
       this.accountAutoComplete.dataSource = this.accountAutoCompleteData; 
       this.writeValue = (args.rowData as TreeGridRowData).text; 
       this.accountAutoComplete.value = this.writeValue;                 
       //  this.accountAutoComplete.text=this.accountIdMapper.getText(this.writeValue); 
       this.accountAutoComplete.showClearButton = true; 
       this.accountAutoComplete.allowFiltering = true; 
       ... 
} 

Please get back us if you need further assistance. 

Regards, 
Ponmani M 


ZA Zachary October 16, 2021 04:06 PM UTC

Thanks for pointing this out. I did not realize that the Combobox had this type of functionality.

I see that when I set the value field for the combobox it still updates the display text to the ID and not the text.

In the example below where I have duplicate text in two different groups. How can I make sure the right item gets selected when the user pulls down the dropdown?

For example if the value field = 77 and I set the text then the user will see the text under the wrong group selected which will be confusing for them.


export let autoCompleteData : AutoCompleteData[] =[
    {
        text:"Id One text",
        id: "1",
        group: "group"
    },
    {
        text:"Id Two text",
        id: "2",
        group: "group"
    },
    {
        text:"Id Three text",
        id: "3",
        group: "group"
    },
    {
        text:"Id Four text",
        id: "4",
        group: "group"
    },
    {
        text:"Duplicate Text",
        id: "5",
        group: "group"
    },
    {
        text:"Duplicate Text",
        id: "77",
        group: "group2"
    }
];

ZA Zachary October 16, 2021 05:01 PM UTC

I believe I have this working now.

I attached a sample in case anyone else runs into a similar problem.

1) I switched to use the combobox 

2) I assign text in the write event

3) I assign the value in the databound event.

4) I have to save the value on the change event and the write event to return in the read event.


Doing this allows for the right item to be selected in the combobox dropdown.


Thank you for your help on this one. Supporting duplicate combobox values is critical to my applications functionality.


Attachment: duplicates_b613f857.zip

Marked as answer
BC Berly Christopher Syncfusion Team October 18, 2021 09:00 AM UTC

Hi Zachary, 
  
We are glad to know that the issue is resolved at your end. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon