How to make text of dropdown in grid not clip

[Andrew]

Hello,

I have a dropdown inside a grid. How can I make it such that when the text is too long, the text won't be cut?

In this example, I want the dropdown to show "Iced Coffee" instead of "Iced C"

[Ajith Govarthan]

Hi Andrew, 

Thank for contacting Syncfusion support. 

 

Query: I have a dropdown inside a grid. How can I make it such that when the text is too long, the text won't be cut? In this example, I want the dropdown to show "Iced Coffee" instead of "Iced C" 

 

Based on your query you want to show the dropdown list content without showing the ellipse in your Grid application. So, we have prepared sample in that we have override the overflow CSS property to show all the content without hiding them. For your convenience we have attached the sample, please refer them for your reference. 

Screenshot:  

 

Code Example: 

Index.cshtml 

{ 

    ViewData["Title"] = "Home Page"; 

} 

@Html.AntiForgeryToken() 

<ejs-grid id="Grid" allowPaging="true" width="800" dataSource="ViewBag.DataSource" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" ></e-grid-editSettings> 

     

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"  textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string"  editType="dropdownedit" validationRules="@(new { required= true })" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" editType="dropdownedit" width="80"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script> 

 

</script> 

 

<style> 

    .e-dropdownbase .e-list-item { 

        overflow: visible !important; 

    }  

 

</style> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/dropdown_overflow-2052952985.zip 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

 

[Andrew]

Hi Ajith,

Thanks for the reply.

I've downloaded your sample but the dropdown is still constrained by the width of the column. While I can scroll horizontally, this experience is not ideal.

 

I thought there was a flag that could control this. But as your solution was CSS, I just set the width of the dropdown container to auto

Thanks for pointing me towards 

[Sujith Kumar Rajkumar]

Hi Andrew, 

You’re welcome. Based on your update we could understand that you were able to resolve the query for your case and we are glad to hear that. 

Regards, 

Sujith R