Clip Mode

24 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 of e-grid-column tag helper.

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.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true">
	<e-grid-columns>
		<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="100"></e-grid-column>
		<e-grid-column field="Name" headerText="Name of the inventor" clipMode="Clip" width="80"></e-grid-column>
		<e-grid-column field="patentfamilies" headerText="No of patentfamilies" clipMode="Ellipsis" width="100"></e-grid-column>
		<e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
		<e-grid-column field="mainfields" headerText="Main fields of Invention" clipMode="EllipsisWithTooltip" width="100"></e-grid-column>
	</e-grid-columns>
 </ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

By default, clipMode value is Ellipsis.