Allow long text items in dropdown to wordwrap

[Michael J Norman]

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>

....

[Narayanasamy Panneer Selvam]

  

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> 

 

sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1823327437 

 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/how-to/tooltip/ 

 

 

Regards,  

Narayanasamy P.  

[Michael J Norman]

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?

[Narayanasamy Panneer Selvam]

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, 

 

Demo sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-682007679 

 

 

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.  

[Michael J Norman]

Worked perfectly, thank you!

[Narayanasamy Panneer Selvam]

Hi Michael,


You are welcome.


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


Regards,
Narayanasamy P.