special characters show strange symbol

Dear,

I want to display country names in a Autocomplete field. When the name contains special characters (like "ë", an "e" with a diaeresis) it is shown as a diamond shape with a question mark in it, see example (should be "België")



This is my code:



How can I show these special characters?

Thanks,
Koen

1 Reply

SP Sureshkumar P Syncfusion Team April 9, 2020 01:24 PM UTC

Hi Koen, 
 
Greetings from Syncfusion support.  
 
Based on your shared information. We have rendered the autocomplete component with diacritics character data. Please find the sample and code block here.  
 
Kindly refer the code example. 
<ejs-autocomplete id="employees" dataSource="@ViewBag.data" placeholder="e.g. Andrew Fuller" popupHeight="450px" 
                          itemTemplate="@Html.Raw("<div><div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>")"> 
            <e-autocomplete-fields value="Name"></e-autocomplete-fields> 
        </ejs-autocomplete> 
 
[models] 
 
        public string Name { get; set; } 
        public string Eimg { get; set; } 
        public string Designation { get; set; } 
        public string Country { get; set; } 
        public List<ErrorViewModel> EmployeesList() 
        { 
            List<ErrorViewModel> emp = new List<Models.ErrorViewModel>(); 
            emp.Add(new ErrorViewModel { Name = "Águilas", Eimg = "7", Designation = "Team Lead", Country = "England" }); 
            emp.Add(new ErrorViewModel { Name = "Ajedrez", Eimg = "1", Designation = "Developer", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Ala Delta", Eimg = "3", Designation = "HR", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Álbumes de Música", Eimg = "2", Designation = "Product Manager", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Gülümsemek", Eimg = "6", Designation = "Developer", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Teşekkürler", Eimg = "9", Designation = "Team Lead", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Güle güle", Eimg = "4", Designation = "Product Manager", Country = "USA" }); 
            emp.Add(new ErrorViewModel { Name = "Gülhatmi", Eimg = "8", Designation = "Developer ", Country = "England" }); 
            emp.Add(new ErrorViewModel { Name = "Gülünç", Eimg = "10", Designation = "CEO", Country = "England" }); 
            return emp; 
        } 
 
 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon