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.
Unfortunately, activation email could not send to your email. Please try again.

Added one more information beside Text and Id

Thread ID:

Created:

Updated:

Platform:

Replies:

128953 Feb 17,2017 08:20 AM Feb 22,2017 01:49 AM ASP.NET MVC 5
loading
Tags: DropDownList
Cornel Amarandei
Asked On February 17, 2017 08:20 AM

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 [Syncfusion]
Replied On February 20, 2017 01:28 AM

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 
  
  
Regards,   
Prince   


Cornel Amarandei
Replied On February 20, 2017 05:20 AM

Hi Prince,

Thanks for your information.

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

Regards,
Cornel.

Prince Oliver [Syncfusion]
Replied On February 21, 2017 04:04 AM

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: 


Regards, 
Prince 


Cornel Amarandei
Replied On February 21, 2017 04:19 AM

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 [Syncfusion]
Replied On February 22, 2017 01:49 AM

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:   
 
Regards,   
Prince   
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;