Hi Daniel,
Thanks for the contacting Syncfusion support.
Query: I have a grid with a foreign column but some options (items) from the dropdownlist are so long. I'm searching a way to wrap that text so all the text of the option cab be visible.
Based on your query you want to show the whole content without ellipse for foreignkey column. So, we have prepared sample and in that sample we have used the foreignkey column and changed the popupWidth of the dropdown component to show whole content.
Similarly, you can use the PopupWidth property to customize the width of the popup based on the provided item length. For your convenience we have attached the sample so please refer the sample for your reference.
Code Example:
|
Index.cshtml
<div class="control-section">
@Html.EJS().Grid("DefaultPaging").DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("170").Add();
col.Field("Id").HeaderText("Customer Name").Edit(new { @params = new { popupWidth = "300px" } }).DataSource((IEnumerable<object>)ViewBag.Species).ForeignKeyField("Id").ForeignKeyValue("name").Width("170").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCountry").EditType("dropdownedit").HeaderText("Ship Country").Width("150").Add();
}).Height("400").AllowPaging().Toolbar(new List<string>
() { "Add", "Edit", "Delete", "Update", "Cancel" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true); }).Render()
</div>
|
UG-links:
Please get back to us if you need further assistance.
Regards,
Ajith G.
