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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Allow long text items in dropdown to wordwrap

Thread ID:

Created:

Updated:

Platform:

Replies:

147351 Sep 6,2019 05:50 PM UTC Sep 13,2019 03:55 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: ComboBox
Michael J Norman
Asked On September 6, 2019 05:51 PM UTC

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 [Syncfusion]
Replied On 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.  


Michael J Norman
Replied On 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?


Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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.  


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

Worked perfectly, thank you!

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon