Search results

Clip Mode in Angular Grid component

18 May 2022 / 1 minute to read

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

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.
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { inventoryData } from './datasource';

@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' allowPaging='true'>
    <e-columns>
        <e-column field='Inventor' headerText='Name of the Inventor' clipMode='Clip' width='80'></e-column>
        <e-column field='NumberofPatentFamilies' headerText='Number of Patent Families' clipMode='Ellipsis' width='100'></e-column>
        <e-column field='Country' headerText='Country' width='80'></e-column>
        <e-column field='Number of INPADOC patents' headerText='Number of INPADOC patents' width='100'></e-column>
        <e-column field='Mainfieldsofinvention' headerText='Main fields of invention' clipMode='EllipsisWithTooltip' width='100'></e-column>
    </e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {

public data: object[];
ngOnInit(): void {
    this.data = inventoryData;
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

By default, columns.clipMode value is Ellipsis.