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

To trim the long value displayed in the drop downs

The field (associated with dropdown) has limit of 200 characters (refer to the attached file).
We want to trim this value while displaying in dropdown and want to implement a tool tip on hover over which will display whole text. Please suggest the solution.

Attachment: Dropdownissue_72379f74.rar

1 Reply

PO Prince Oliver Syncfusion Team November 27, 2018 07:06 AM UTC

Hi Sharad, 
 
Thank you for contacting Syncfusion support. 
 
To trim the values in the DropDownList and show the values on tooltip, you can render the tooltip control for the DropDownList and use its BeforeRender event to set the value as the tooltip content. Kindly refer to the following code snippet. 
 
@Html.EJS().Tooltip("Tooltip").ContentTemplate(@<div> 
    @Html.EJS().DropDownList("dropdowns").Width("300px").Placeholder("Select a value").Value((string)ViewBag.value).DataSource((object)ViewBag.data).Fields(new DropDownListFieldSettings 
   { Text = "Name", Value = "Eimg" }).Render() 
</div>).BeforeRender("onBeforeRender").Render() 
 
<script> 
    function onBeforeRender(e) { 
        let value = document.getElementById('dropdowns').ej2_instances[0].text; 
        this.content = value; 
        this.dataBind(); 
    } 
 
We have attached a sample for your reference, please find the sample at the following link: http://www.syncfusion.com/downloads/support/forum/141138/ze/dropdownlist2098451702 
 
Please let us know if you require any further assistance on this. 
 
Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon