Clip Mode

25 Feb 20221 minute to read

The clip mode provides options to display its overflow cell content and it can be defined by the ClipMode property in Column.

There are three types of ClipMode. They are:

  • Clip: Truncates the cell content when it overflows its area.
  • Ellipsis: Displays ellipsis when the cell content overflows its area.
  • EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied.
@Html.EJS().Grid("ClipMode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
   {
       col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add();
       col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
       col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add();
       col.Field("Active").HeaderText("Active").Width("150").Add();
   }).AllowPaging().Render()
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

By default, ClipMode value is Ellipsis.