Added one more information beside Text and Id

[Cornel Amarandei]

Hi,

How can I add a new information in a DropDownList beside Text and Id? I want to add also a Color information for every item in the control.

Thanks,

Cornel.

[Prince Oliver]

Hi Cornel,   

  

Thanks for contacting Syncfusion Support.   

  

To add additional information to dropdownlist other than text and id, you can use the template property in the dropdownlist. Using Template property, you can add any HTML mark-up element in the DropDownList. Have a look at the following code snippet.   

  

<div class="control">   

          @Html.EJ().DropDownList("DropDownList").Width("100%").Datasource((IEnumerable<DDLfields>)ViewBag.datasource).Width("200").Template("<div class='ename'> ${text} </div><div class='cont'> ${color} </div>").WatermarkText("Select a Person")   

</div>   

  

  

Refer to the following UG link for more information: https://help.syncfusion.com/aspnetmvc/dropdownlist/templatesupport#template-field 

  

Refer to the following link for sample: http://www.syncfusion.com/downloads/support/forum/128953/ze/DDLTemplate2024243637 

  

Regards,   

Prince   

[Cornel Amarandei]

Hi Prince,

Thanks for your information.

How can I get the selected text, id and color from this DropDownList?

Regards,

Cornel.

[Prince Oliver]

Hi Cornel, 

Thanks for your update. 

To get the selected id, value and color in the controller side, refer to the following code snippet. 

  [HttpPost] 

        public ActionResult DropdownlistFeatures(string DropDownList1) 

        { 

            emp.Add(new DDLfields { text = "Erik Linden", id = "3",  color = "Red" }); 

            emp.Add(new DDLfields { text = "John Linden", id = "6",  color = "Blue" }); 

            emp.Add(new DDLfields { text = "Louis", id = "7",  color = "Green" }); 

            emp.Add(new DDLfields { text = "Lawrence", id = "8", color = "Yellow" }); 

            ViewBag.datasource = emp; 

            //DropDownList1 is ID of DropDownList used in this example. You can get the selected items value in controller using the ID 

            string DropDownValue = DropDownList1; 

            string selectedColor,selectedtext,selectedid; 

            foreach( var listitem in emp) 

            { 

                if(listitem.text == DropDownValue) { 

                    selectedColor = listitem.color; 

                    selectedid = listitem.id; 

                    selectedtext = listitem.text; 

                } 

            } 

            return View(); 

        } 

Refer to the following UG Documentation for more information on Getting and setting value in dropdownlist: 

https://help.syncfusion.com/aspnetmvc/dropdownlist/getting-started?cs-save-lang=1&cs-lang=csharp#setting-and-getting-value 

Refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/128953/ze/DDLTemplate-311548153 

Regards, 

Prince 

[Cornel Amarandei]

Hi Prince,

Thanks for your information.

But I am interested into getting the selected text, Id and color in the client side, from javascript.

Regards,

Cornel.

[Prince Oliver]

Hi Cornel,    

  

Thanks for your update.    

  

To get the selected id, value and color in the client side by using JavaScript, refer to the following code example.   

  

function onselect(args) {   

            var obj = $('#DropDownList1').data("ejDropDownList");   

            for (i = 0; i < obj.model.dataSource.length; i++) {   

                if (obj.getSelectedValue() == obj.model.dataSource[i].text) {   

                    console.log("Selected Item's Text - " + obj.model.dataSource[i].text);   

                    console.log("selected Item's ID - " + obj.model.dataSource[i].id);   

                    console.log("selected Item's Color - " + obj.model.dataSource[i].color);   

                }   

            }   

        }   

  

We have attached a sample for your convenience, refer to the following link for the sample:   

http://www.syncfusion.com/downloads/support/forum/128953/ze/DDLTemplate1068304671 

 

Regards,   

Prince