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. Image for the cookie policy date

Added one more information beside Text and Id

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.

5 Replies

PO Prince Oliver Syncfusion Team February 20, 2017 06:28 AM UTC

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   



CA Cornel Amarandei February 20, 2017 10:20 AM UTC

Hi Prince,

Thanks for your information.

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

Regards,
Cornel.


PO Prince Oliver Syncfusion Team February 21, 2017 09:04 AM UTC

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 



CA Cornel Amarandei February 21, 2017 09:19 AM UTC

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.


PO Prince Oliver Syncfusion Team February 22, 2017 06:49 AM UTC

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   
  


Loader.
Up arrow icon