To trim the long value displayed in the drop downs

[Sharad]

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

[Prince Oliver]

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