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

[Shannan]

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; } 
    }

[Sevvandhi Nagulan]

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, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11084874185 

 

 

Regards,  

Sevvandhi N  

[Shannan]

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.

[Sevvandhi Nagulan]

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:    

https://msdn.microsoft.com/en-us/library/system.web.mvc.selectlist(v=vs.118).aspx  

 

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, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11284504687 

 

 

Regards,  

Sevvandhi N  

[Unknown]

Hey Shannan,

Did the suggested solution work for you?

[Unknown]

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:    

https://msdn.microsoft.com/en-us/library/system.web.mvc.selectlist(v=vs.118).aspx  

 

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, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication11284504687 

 

 

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

[Berly Christopher]

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> 

 

  

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/data-binding/#2-array-of-json-data  

  

Regards, 

Berly B.C 

[Unknown]

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:

 

[Berly Christopher]

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 

[Unknown]

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.

[Eduardo Reyes]

I have the same Issue, 

[Berly Christopher]

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 

[Berly Christopher]

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