EJ2 DropDownList - Model DataSource - Data Missing

[WIll Galloway]

Hello,

I get a populated dropdown list with this code:

@Html.DropDownListFor(c => c.PayrollImportOptions.SelectedCompanyId, new SelectList(Model.PayrollImportOptions.Companies, dataValueField: "Key", dataTextField: "Value"))

When I try EJ2 DropDownList using the code below I don't get any data just the place holder:

@Html.EJS().DropDownList("company").Placeholder("Select a Company").DataSource((IEnumerable<object>)Model.PayrollImportOptions.Companies).Fields(f => f.Value("Key").Text("Value")).Render()

Any help would be great.

Thanks,

Will

[Keerthana Rajendran]

Hi Will,   

   

Thank you for contacting Syncfusion Support.   

   

We have prepared a sample by binding list data from model to EJ2 DropDownList based on your requirement. Please refer to the below given code.   

   

CSHTML:   

   

@model List<Uploader.Controllers.PayrollImportOptions>   

<div class="container">   

    @Html.EJS().DropDownList("company").DataSource(Model).Fields(newSyncfusion.EJ2.DropDowns.DropDownListFieldSettings {Text="Key", Value = "Value"}).Placeholder("Select a Company").Value("4").Width("300").Render()   

</div>   

   

Controller:   

   

  public class HomeController : Controller   

    {   

           

        public ActionResult Index()   

        {   

              

            return View(PayrollImportOptions.GetList());   

   

        }   

   

    }   

   

    public class PayrollImportOptions   

    {   

           

        public string Key { get; set; }   

        public string Value { get; set; }   

   

        public static List<PayrollImportOptions> GetList()   

        {   

            List<PayrollImportOptions> list = new List<PayrollImportOptions>();   

            list.Add(new PayrollImportOptions { Key = "Company 1", Value = "1" });   

            list.Add(new PayrollImportOptions { Key = "Company 2", Value = "2" });   

            list.Add(new PayrollImportOptions { Key = "Company 3", Value = "3" });   

            list.Add(new PayrollImportOptions { Key = "Company 4", Value = "4" });   

            list.Add(new PayrollImportOptions { Key = "Company 5", Value = "5" });   

            return list;   

        }   

    }   

      

   

We have attached a sample for your reference which can be downloaded from the below link.   

   

http://www.syncfusion.com/downloads/support/forum/137101/ze/DropDownList-534898794   

   

Regards,                                                                        

Keerthana.   

 

[WIll Galloway]

Thanks for this, you do a nice job of posting with examples which is very useful!

I am, however, still having an issue getting data.  

I should have added this to the initial post, but this is in a partial view.  This means that I don't use the shared layout.  I just add @Html.EJS().ScriptManager() to the partial view as well as adding @using Syncfusion.EJ2 to the top of the partial view.  Am I doing that correctly?

My other point would be that my model of PayrollImportOptions contains companies which is a List of the key/value class.

So my .cshtml is: @model Uploader.Controllers.PayrollImportOptions

and my datasource would be .DataSource(Model.Companies).

Still no data though.

Thanks,

Will

[Keerthana Rajendran]

Hi Will,   

   

Thanks for the update.  

  

We have modified our previous sample by rendering DropDownList in PartialView page without referring Layout page. We have modified our controller and view code based on your requirement. Please refer to the below given code snippet.   

   

PartialView   

  

@model Uploader.Controllers.PayrollImportOptions   

<div class="container">   

    @Html.EJS().DropDownList("company").DataSource(Model.Companies).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "Key", Value = "Value" }).Placeholder("Select a Company").Value(Model.SelectedValue).Width("300").Render()   

</div>   

   @Html.EJS().ScriptManager();   

   

Controller:   

   

public class HomeController : Controller   

    {   

           

        public ActionResult Index()   

        {   

              

            return View();   

   

        }   

   

        public ActionResult PartialView()   

        {   

   

            PayrollImportOptions model = new PayrollImportOptions();   

            List<Company> companies = new List<Company>();   

            companies.Add(new Company{ Key = "Company 1", Value = "1"  });   

            companies.Add(new Company { Key = "Company 2", Value = "2" });   

            companies.Add(new Company { Key = "Company 3", Value = "3" });   

            companies.Add(new Company { Key = "Company 4", Value = "4" });   

            companies.Add(new Company { Key = "Company 5", Value = "5" });   

            model.Companies = companies;   

            model.SelectedValue = "4";   

            return View(model);   

        }   

   

           

      

    }   

   

    public class PayrollImportOptions   

    {   

           

        public string SelectedValue { get; set; }   

           

        public List<Company> Companies { get; set; }   

          

    }   

   

    public class Company   

    {   

        public string Value { get; set; }   

   

        public string Key { get; set; }   

   

    }   

   

   

   

Sample can be downloaded from the below link.  

   

http://www.syncfusion.com/downloads/support/forum/137101/ze/Model-1203426785   

   

   

Regards,                                                                        

Keerthana.