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

Allow long text items in dropdown to wordwrap

I would like to have the ability to allow items in the dropdown list to word wrap, or somehow be able to show the complete text for that item even though the overall width is set by "col-md-4".  How can I achieve this?  I have tried to play around with the itemTemplate property, but this doesn't appear to work, or perhaps I'm not using it correctly.  At a minimum if I could allow the item to show an alt text on hover that could be workable as well.

  Currently just using standard bootstrap I have it laid out as shown below--

<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger">div>
<div class="form-group">
<label asp-for="DnisId" class="control-label">label>
<ejs-combobox id="dnisid" dataSource="@ViewBag.DnisId" ejs-for="DnisId" placeholder="Select a Dialed Number">
<e-combobox-fields value="Value" text="Text">e-combobox-fields>
ejs-combobox>
div>
<div class="form-group">
<label asp-for="MessageId" class="control-label">label>
<ejs-combobox id="messageid" dataSource="@ViewBag.MessageId" ejs-for="MessageId" placeholder="Select a Message"
itemTemplate="@Html.Raw(" style=\"overflow-wrap: normal; \" > ${Text} div> ")">
<e-combobox-fields value="Value" text="Text">e-combobox-fields>
ejs-combobox>
div>
....


5 Replies

NP Narayanasamy Panneer Selvam Syncfusion Team September 9, 2019 12:57 PM UTC

  
Hi Michael,  
 
Greetings from Syncfusion support. 
 
We have validated your query and you can achieve the reported scenario using tooltip.  
code snippet:  
    <script> 
        var tooltip = new ej.popups.Tooltip({ 
            // default content of tooltip 
            content: 'Loading...', 
            // set target element to tooltip 
            target: '.e-list-item', 
            // set position of tooltip 
            position: 'top center', 
            // bind beforeRender event 
            beforeRender: onBeforeRender 
        }); 
        tooltip.appendTo('body'); 
 
        function onBeforeRender(args) { 
            // get the target element 
            var listElement = document.getElementById('messageid'); 
            var result = listElement.ej2_instances[0].dataSource; 
            var i; 
            for (i = 0; i < result.length; i++) { 
                if (result[i].Name === args.target.textContent) { 
                    this.content = result[i].Name; 
                    this.dataBind(); 
                    break; 
                } 
            } 
        } 
    </script> 
 
 
 
 
Regards,  
Narayanasamy P.  



MJ Michael J Norman September 9, 2019 02:39 PM UTC

How can I target the tooltip to only one dropdown on the page?  For instance if I have several dropdowns on the page, the provided code runs for each mouseover event for any list item from any dropdown list.  This causes complications because once the tooltip is set, when you mouseover a different list item that is not from the control being targeted, the tooltip retains the last set value.

Also is this only available by purchasing the Javascript components as well as Dotnet Core?  Would I have this functionality if only purchasing the Dotnet Core controls?



NP Narayanasamy Panneer Selvam Syncfusion Team September 10, 2019 10:08 AM UTC

Hi Michael, 
 
Thanks for your update. 
 
We have validated your queries please find the validation details in below, 
 
Query1: How can I target the tooltip to only one dropdown on the page? 
Yes, you can apply tooltip for specific dropdown either by specify unique selector to the target API of Tooltip. In the below example we have used cssClass API to specify unique class, you can assign any other ID to the tooltip target. 
Code example: 
<ejs-combobox id="messageid" dataSource="@ViewBag.data" ejs-for="Value" cssClass="e-custom-class" placeholder="Select a Message"> 
<e-combobox-fields text="Name" value="Code"></e-combobox-fields> 
</ejs-combobox> 
 
<script> 
var tooltip = new ej.popups.Tooltip({ 
    // default content of tooltip 
    content: 'Loading...', 
    // set target element to tooltip 
    target: '.e-custom-class .e-list-item', 
    // set position of tooltip 
    position: 'top center', 
    // bind beforeRender event 
    beforeRender: onBeforeRender 
}); 
tooltip.appendTo('body'); 
function onBeforeRender(args) { 
    // get the target element 
    var listElement = document.getElementById('messageid'); 
    var result = listElement.ej2_instances[0].dataSource; 
    var i; 
    for (i = 0; i < result.length; i++) { 
        if (result[i].Name === args.target.textContent) { 
            this.content = result[i].Name; 
            this.dataBind(); 
            break; 
        } 
    } 
} 
</script> 
 
 
For your convenience we have prepared a sample. please find it in the below link, 
 
 
 
Query2: Would I have this functionality if only purchasing the Dotnet Core controls? 
Yeah, you can use the above functionality only even you have purchased Dotnet Core controls. 
 
Please let us know if you need any further assistance on this? 
 
Regards,  
Narayanasamy P.  



MJ Michael J Norman September 11, 2019 03:23 PM UTC

Worked perfectly, thank you!


NP Narayanasamy Panneer Selvam Syncfusion Team September 13, 2019 03:55 AM UTC

Hi Michael,


You are welcome.


We are glad to hear that the reported issue has resolved at your end. 
😊


Regards,
Narayanasamy P.
 


Loader.
Live Chat Icon For mobile
Up arrow icon