Passing additional values with the dropdown list

[Nate Greene]

I have a general question about the dropdown list. I have a given DropdownList widget like so:

@Html.EJ().DropDownList("MenuItemsList")

.Datasource((List<MenuItemsDropdownModel>)ViewBag.RecipeDropdown)

.DropDownListFields(df => df.ID("MenuItemID")

.Text("Name")

.Value("MenuItemID"))

.ClientSideEvents(e => e.Select("onMenuItemSelect"))

.EnablePersistence(true)

.EnableFilterSearch(true)

.WatermarkText("Select a Menu Item")

.Width("100%")

The way it is setup is to recieve the data from the model that is passed to it. I understand how the .Text() and .Value() assignments work but I am wondering if there is a way I could hide additional data in the dropdown list that can be obtained when the Select event is activated. I know with a grid I can hide a column but still get the data in javascript when iterating through the object. Is there a similar functionality that I can use here? Because I need to save an the ItemName, ItemID and ItemCost to be used when a user selects one of the options from the dropdown.

Many Thanks,

Nate

[Prince Oliver]

Hi Nate, 

 

Thank you for contacting Syncfusion support.  

 

Based on your shared information and your requirement, we suggest you bind only text field for DropDownList and get other field data through select event for DropDownList. You need to map “Text” field with required field name and get the other field details by iterating through getListData() method of DropDownList which contains complete data with all fields. Kindly refer to the following code snippet. 

 

[View] 

@Html.EJ().DropDownList("MenuItemsList").Datasource((IEnumerable<Data>)ViewData["DropDownSource"]).DropDownListFields(Df => Df.Text("Text")).ClientSideEvents(e => e.Select("onMenuItemSelect")).WatermarkText("Select a Menu Item").EnablePersistence(true).EnableFilterSearch(true) 

    <script> 

        function onMenuItemSelect(args) { 

            for (i = 0; i < this.getListData().length; i++) { 

                if (this.getListData()[i].Text == args.text) { 

                    console.log(this.getListData()[i].Value); 

                    console.log(this.getListData()[i].MenuItemID); 

                } 

            } 

    } 

    </script> 

 

[Controller] 

public ActionResult DropdownlistFeatures() 

        { 

            List<Data> DropDownData = new List<Data>(); 

            DropDownData.Add(new Data { MenuItemID = "item1", Text = "ListItem 1" ,Value  = "1" }); 

            DropDownData.Add(new Data { MenuItemID = "item2", Text = "ListItem 2" , Value = "2" }); 

            DropDownData.Add(new Data { MenuItemID = "item3", Text = "ListItem 3" , Value = "3" }); 

            DropDownData.Add(new Data { MenuItemID = "item4", Text = "ListItem 4" , Value = "4" }); 

            DropDownData.Add(new Data { MenuItemID = "item5", Text = "ListItem 5" , Value = "5" }); 

            ViewData["DropDownSource"] = DropDownData; 

            return View(); 

        } 

 

Note: While mapping Text field without value,  text will be considered as value of DropDownList.  

 

We have attached sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/143254/ze/SyncfusionMvcApplication1-67691720  

 

Kindly check the above solution in your end and if it does not meet your requirement, kindly share additional information on your scenario with code or example. This will help us provide a prompt solution at the earliest.  

  

Regards, 

Prince