We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Having issues with the binding of the dropdown list not showing any items

I am trying to convert the standard core dropdown list to the Syncfusion control and not getting any results

This is the original code from core that worked:

Controller:

ViewData["TitleId"] = new SelectList(_context.Set<Title>(), "Id", "TitleName", member.TitleId);

View:

<label asp-for="TitleId" class="control-label"></label>
<select asp-for="TitleId" class="form-control" asp-items="ViewBag.TitleId"></select>
<span asp-validation-for="TitleId" class="text-danger">

I tried converting to the Syncfusion control this way:

                <ejs-dropdownlist id="TitleId" placeholder="Title" ejs-for="TitleId" dataSource="@ViewBag.TitleId" floatLabelType="Auto">
                    <e-dropdownlist-fields text="Title.TitleName" value="Title.Id"></e-dropdownlist-fields>
                </ejs-dropdownlist>

But the dropdown is empty.

The Title model is this:

    public class Title
    {
        public int Id { get; set; }
        public string TitleName { get; set; }
        public int SortOrder { get; set; } 
    }

12 Replies

SN Sevvandhi Nagulan Syncfusion Team December 23, 2019 05:06 AM UTC

Hi Shannan 
 
Greetings from Syncfusion support. 
 
We have checked the reported requirement. We have prepared sample with Syncfusion control DataBinding with the DropDownListFor control. Kindly refer the below code, 
 
[index.cshtml] 
 
<ejs-dropdownlist id="Countries"  ejs-for="Value" dataSource="@ViewBag.data" placeholder="Select a Country" popupHeight="220px"> 
    <e-dropdownlist-fields text="Country.CountryId" value="Code.Id"></e-dropdownlist-fields> 
</ejs-dropdownlist> 
 
[HomeController.cs] 
 
  public IActionResult Index() 
        { 
            ViewBag.data = new Complex().GetData(); 
            model.Value = "AU"; 
            return View(model); 
        } 
        public class Code 
        { 
            public string Id { get; set; } 
        } 
 
        public class Country 
        { 
            public string CountryId { get; set; } 
        } 
        public class modelValue 
        { 
             public string Value { get; set; } 
        } 
        public class Complex 
        { 
            public Country Country { get; set; } 
            public Code Code { get; set; } 
            public List<Complex> GetData() 
            { 
                List<Complex> data = new List<Complex>(); 
                data.Add(new Complex() { Country = new Country() { CountryId = "Australia" }, Code = new Code() { Id = "AU" } }); 
                data.Add(new Complex() { Country = new Country() { CountryId = "Bermuda" }, Code = new Code() { Id = "BM" } }); 
                data.Add(new Complex() { Country = new Country() { CountryId = "Canada" }, Code = new Code() { Id = "CA" } }); 
                data.Add(new Complex() { Country = new Country() { CountryId = "Cameroon" }, Code = new Code() { Id = "CM" } }); 
                data.Add(new Complex() { Country = new Country() { CountryId = "Denmark" }, Code = new Code() { Id = "DK" } }); 
                data.Add(new Complex() { Country = new Country() { CountryId = "France" }, Code = new Code() { Id = "FR" } }); 
                return data; 
            } 
        } 
 
Please find the sample below, 
 
 
 
Regards,  
Sevvandhi N  



SH Shannan December 23, 2019 07:36 AM UTC

That is the same info from the documentation and it does not work.

I was able to get the control to populate by adding this to the controller:

List<Title> titles = new List<Title>();
titles = _context.Titles.ToList();
ViewBag.datasource = titles;

Is your dropdownlist control not able to use the asp.net core SelectList<> type? Only after I passed a List<> to it did it work.


SN Sevvandhi Nagulan Syncfusion Team December 24, 2019 11:13 AM UTC

Hi Shannan 
 
From the code, you shared, we tried to reconstruct your scenario. In that SelectList class returns a list of properties as given in the below MSDN link:    
 
Datasource property in our Dropdownlist cannot directly access the items property of the Selectlist constructor. Hence we need to map the Selectlist properties to the respective dropdownlist’s properties. Kindly refer the below code, 
 
[index.cshtml] 
@{ 
    var select = new SelectList((IEnumerable<WebApplication1.Controllers.HomeController.Dictionaryy>)ViewData["Regions"], "ID", "Title"); 
} 
<ejs-dropdownlist id="Countries" dataSource=select.Items placeholder="Select a Country" popupHeight="220px"> 
    <e-dropdownlist-fields text='Title' value='ID'></e-dropdownlist-fields> 
</ejs-dropdownlist> 
 
Please find the sample below, 
 
 
 
Regards,  
Sevvandhi N  



UN Unknown Syncfusion Team May 7, 2021 10:55 AM UTC

Hey Shannan,

Did the suggested solution work for you?


UN Unknown Syncfusion Team replied to Sevvandhi Nagulan May 7, 2021 11:41 AM UTC

Hi Shannan 
 
From the code, you shared, we tried to reconstruct your scenario. In that SelectList class returns a list of properties as given in the below MSDN link:    
 
Datasource property in our Dropdownlist cannot directly access the items property of the Selectlist constructor. Hence we need to map the Selectlist properties to the respective dropdownlist’s properties. Kindly refer the below code, 
 
[index.cshtml] 
@{ 
    var select = new SelectList((IEnumerable)ViewData["Regions"], "ID", "Title"); 
} 
<ejs-dropdownlist id="Countries" dataSource=select.Items placeholder="Select a Country" popupHeight="220px"> 
    <e-dropdownlist-fields text='Title' value='ID'>e-dropdownlist-fields> 
ejs-dropdownlist> 
 
Please find the sample below, 
 
 
 
Regards,  
Sevvandhi N  


Hello, could you help me figure out why the dropdown shows up empty but there are elements in there? I doubt it's a text color issue...Thanks





BC Berly Christopher Syncfusion Team May 10, 2021 12:03 PM UTC

Hi Hajer K, 
  
Thanks for sharing enough information. 
  
The reported issue is occurred due to missing of mapping field in the DropDownList component. You have bind the data source which containing the field “HospitalNameAddress” and “Hospitald”. So, we need to bind these field to text and value field of the DropDownList to display the value in the popup list. Kindly refer the below code example. 
  
<ejs-dropdownlist id="vegetable" dataSource="@ViewBag.data" placeholder="Select a vegetable" popupHeight="220px"> 
    <e-dropdownlist-fields value="HospitalId" text="HospitalNameAddress"></e-dropdownlist-fields> 
</ejs-dropdownlist> 
 
  
  
Regards, 
Berly B.C 



UN Unknown Syncfusion Team May 10, 2021 01:01 PM UTC

Hello Berly,

Thanks for the response. I did bind it in the controller just like in the example provided by your colleague earlier in this thread:

Controller: (ignore the first line)

Create.cshtml:


 


BC Berly Christopher Syncfusion Team May 11, 2021 04:02 PM UTC

Hi Hajer K, 
  
While checking the reported issue, DropDownList items are displayed properly in the popup in our end. The reported issue will be occurred if the field is missing, or field mapping is mismatch in the DropDownList component. So, we suggest you to ensure that field is correctly mapped in the component by exploring the generated script in the DOM in the browser. 
  
Else, please share any issue reproducing sample or modify the attached sample with reported issue that will help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 



UN Unknown Syncfusion Team May 12, 2021 12:11 PM UTC

Hi Berly,

The script generates the right elements. I attached a screenshot of it in an earlier reply. The id is mapped to Id and the text is NameAddress. 

Update: I figured out the issue. The end tag </ejs-dropdownlist> was not in the right location, the tag didn't wrap around the <e-dropdownlist-fields> part.




ER Eduardo Reyes May 12, 2021 10:59 PM UTC

I have the same Issue, 



BC Berly Christopher Syncfusion Team May 13, 2021 09:03 AM UTC

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



BC Berly Christopher Syncfusion Team May 13, 2021 09:04 AM UTC

Hi Eduardo Reyes, 
  
Based on the shared details, you have “Disabled, Group, Selected, Text, Value” field inside the data source but mapped the field as “Description and ID” for the DropDownList component. 
  
 
  
As we mentioned earlier in the thread, the reported issue will be occurred when the field attribute is mapped mismatch in the component definition. So, we suggest you to assign the field which is available in the data source to get rid of the reported issue. 
  
Kindly refer the below code example. 
<ejs-dropdownlist id="vegetable" dataSource="@ViewBag.data" placeholder="Select a vegetable" popupHeight="220px">  
    <e-dropdownlist-fields value="Value" text="Text"></e-dropdownlist-fields>  
</ejs-dropdownlist>  
 
  
Regards, 
Berly B.C 


Loader.
Live Chat Icon For mobile
Up arrow icon