Syncfusion Essential JS ejGrid

5 Mar 202124 minutes to read

The grid can be easily configured to the DOM element using the ‘ej-grid’ html tag. You can create a grid with a highly customizable look and feel.

Example

HTML

<ej-grid id="grid" [dataSource]="gridData">

</ej-grid>

export class AppComponent {
    
    public  gridData;

        constructor()
        {
          this.gridData = (window as any).gridData; 
        }
 }

Requires

module:jQuery
module:jsrender.min.js
module:ej.core.js
module:ej.data.js
module:ej.touch.js
module:ej.print.js
module:ej.globalize.js
module:ej.draggable.js
module:ej.grid.js
module:ej.pager.js
module:ej.scroller.js
module:ej.waitingpopup.js
module:ej.radiobutton.js
module:ej.dropdownlist.js
module:ej.dialog.js
module:ej.button.js
module:ej.autocomplete.js
module:ej.checkbox.js
module:ej.datepicker.js
module:ej.timepicker.js
module:ej.datetimepicker.js
module:ej.editor.js
module:ej.tooltip.js
module:ej.toolbar.js
module:ej.menu.js
module:ej.excelfilter.js

Members

allowCellMerging `boolean`

Gets or sets a value that indicates whether to customizing cell based on our needs.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowCellMerging="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowGrouping `boolean`

Gets or sets a value that indicates whether to enable dynamic grouping behavior. Grouping can be done by drag on drop desired columns to grid’s GroupDropArea. This can be further customized through “groupSettings” property.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowKeyboardNavigation `boolean`

Gets or sets a value that indicates whether to enable keyboard support for performing grid actions. selectionType – Gets or sets a value that indicates whether to enable single row or multiple rows selection behavior in grid. Multiple selection can be done through by holding CTRL and clicking the grid rows

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowKeyboardNavigation="false">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowFiltering `boolean`

Gets or sets a value that indicates whether to enable dynamic filtering behavior on grid. Filtering can be used to limit the records displayed using required criteria and this can be further customized through “filterSettings” property

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowSorting `boolean`

Gets or sets a value that indicates whether to enable the dynamic sorting behavior on grid data. Sorting can be done through clicking on particular column header.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowMultiSorting `boolean`

Gets or sets a value that indicates whether to enable multi columns sorting behavior in grid. Sort multiple columns by holding CTRL and click on the corresponding column header.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" allowMultiSorting="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowPaging `boolean`

This specifies the grid to show the paginated data. Also enables pager control at the bottom of grid for dynamic navigation through data source. Paging can be further customized through “pageSettings” property.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowReordering `boolean`

Gets or sets a value that indicates whether to enable the columns reordering behavior in the grid. Reordering can be done through by drag and drop the particular column from one index to another index within the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowReordering="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowResizeToFit `boolean`

Gets or sets a value that indicates whether the column is non resizable. Column width is set automatically based on the content or header text which is large.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowResizeToFit="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowResizing `boolean`

Gets or sets a value that indicates whether to enable dynamic resizable of columns. Resize the width of the columns by simply click and move the particular column header line

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowResizing="true" allowScrolling="true" [scrollSettings]="scrollSettings">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={height:300,width:200};

allowRowDragAndDrop `boolean`

Gets or sets a value that indicates whether to enable the rows reordering in Grid and drag & drop rows between multiple Grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowRowDragAndDrop="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowScrolling `boolean`

Gets or sets a value that indicates whether to enable the scrollbar in the grid and view the records by scroll through the grid manually

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={height:200,width:200};

allowSearching `boolean`

Gets or sets a value that indicates whether to enable dynamic searching behavior in grid. Currently search box can be enabled through “toolbarSettings”

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={showToolbar:true,toolbarItems:["search"]};

allowSelection `boolean`

Gets or sets a value that indicates whether user can select rows on grid. On enabling feature, selected row will be highlighted.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSelection="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowTextWrap `boolean`

Gets or sets a value that indicates whether the Content will wrap to the next line if the content exceeds the boundary of the Column Cells.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowTextWrap="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

allowMultipleExporting `boolean`

Gets or sets a value that indicates whether to enable the multiple exporting behavior on grid data.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [toolbarSettings]="toolbarSettings" allowMultipleExporting="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings = { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport] }

commonWidth `number`

Gets or sets a value that indicates to define common width for all the columns in the grid.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [commonWidth]=200>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

childGrid `object`

This specifies the grid to add the grid control inside the grid row of the parent with expand/collapse options

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [childGrid]="attributes">
</ej-grid>

//The datasource "window.gridData" and "window.employeeView" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.employeeView;
this.employee = window.gridData;
this.attributes={dataSource:this.employee,queryString: "EmployeeID"};

columnLayout `enum`

Used to enable or disable static width settings for column. If the columnLayout is set as fixed, then column width will be static.

Default Value:

ej.Grid.ColumnLayout.Auto

Name	Description
Auto	Column layout is auto(based on width).
Fixed	Column layout is fixed(based on width).

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [columnLayout]="fixed">
    <e-columns>
        <e-column field= "OrderID" headerText= "Order ID" width= "80"></e-column>
        <e-column field= "CustomerID" headerText= "Customer ID" width= "90"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.fixed = ej.Grid.ColumnLayout.Fixed;

columns `array`

Gets or sets an object that indicates to render the grid with specified columns

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
public value=$("#Grid").ejGrid("option", "columns");

columns.allowEditing `boolean`

Gets or sets a value that indicates whether to enable editing behavior for particular column.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID" [allowEditing]="false"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};

columns.allowFiltering `boolean`

Gets or sets a value that indicates whether to enable dynamic filtering behavior for particular column.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [allowFiltering]="false"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.allowGrouping `boolean`

Gets or sets a value that indicates whether to enable dynamic grouping behavior for particular column.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [allowGrouping]="false"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.allowSorting `boolean`

Gets or sets a value that indicates whether to enable dynamic sorting behavior for particular column.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [allowSorting]="false"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.allowResizing `boolean`

Gets or sets a value that indicates whether to enable dynamic resizable for particular column.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowResizing="true">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [allowResizing]="false"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.clipMode `enum`

Sets the clip mode for Grid cell as ellipsis or clipped content(both header and content)

Default Value:

ej.Grid.ClipMode.Clip

Name	Description
Ellipsis	Shows ellipsis for the overflown cell.
Clip	Truncate the text in the cell
EllipsisWithTooltip	Shows ellipsis and tooltip for the overflown cell.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80" [clipMode]="ellipsis"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.ellipsis= ej.Grid.ClipMode.Ellipsis;
this.right=ej.TextAlign.Right;

columns.commands `array`

Gets or sets an object that indicates to define a command column in the grid.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID"></e-column>
        <e-column  headerText= "Manage Records" [commands]="buttons"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.buttons=[    { type: "edit", buttonOptions: { text: "Edit" } },
                  { type: "delete", buttonOptions: { text: "Delete" } },
                  { type: "save", buttonOptions: { text: "Save" } },
                  { type: "cancel", buttonOptions: { text: "Cancel" } }
             ];

columns.commands.buttonOptions `object`

Gets or sets an object that indicates to define all the button options which are available in ejButton.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID"></e-column>
        <e-column headerText= "Manage Records" [commands]="buttons"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.buttons=[    { type: "edit", buttonOptions: { text: "Edit" } },
                  { type: "delete", buttonOptions: { text: "Delete" } },
                  { type: "save", buttonOptions: { text: "Save" } },
                  { type: "cancel", buttonOptions: { text: "Cancel" } }
             ];

columns.commands.type `enum`

Gets or sets a value that indicates to add the command column button.

Default Value:

Name	Description
Edit	Unbound type is edit.
Save	Unbound type is save.
Delete	Unbound type is delete.
Cancel	Unbound type is cancel.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings">
    <e-columns>
        <e-column field= "OrderID"  [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID"></e-column>
        <e-column headerText= "Manage Records" [commands]="buttons"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.buttons=[    { type: "edit", buttonOptions: { text: "Edit" } },
                  { type: "delete", buttonOptions: { text: "Delete" } },
                  { type: "save", buttonOptions: { text: "Save" } },
                  { type: "cancel", buttonOptions: { text: "Cancel" } }
             ];

columns.cssClass `string`

Gets or sets a value that indicates to provide custom CSS for an individual column.

Default Value:

Example

HTML

<style class="temp">
.temp{
color:green;
}
</style>
<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" cssClass="temp"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.customAttributes `object`

Gets or sets a value that indicates the attribute values to the td element of a particular column

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [customAttributes]="customAttributes"></e-column>
        <e-column field= "Freight"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.customAttributes={"style":"color:red"};

columns.dataSource `object`

Gets or sets a value that indicates to bind the external datasource to the particular column when column editType as dropdownedit and also it is used to bind the datasource to the foreign key column while editing the grid. //Where data is array of JSON objects of text and value for the drop-down and array of JSON objects for foreign key column.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" [visible]="false"></e-column>
        <e-column field="EmployeeID" foreignKeyField= "EmployeeID" foreignKeyValue= "FirstName" [dataSource]= "employeedata" headerText= "FirstName" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" and "window.employeeView" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.employee = window.employeeView;

columns.defaultValue `string|number|boolean|date`

Gets or sets a value that indicates to display the specified default value while adding a new record to the grid

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID" defaultValue="ABC"></e-column>
        <e-column field= "Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowAdding:true};
this.toolbarSettings={ showToolbar: true,toolbarItems:["add"]};

columns.disableHtmlEncode `boolean`

Gets or sets a value that indicates to render the grid content and header with an HTML elements

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field= "OrderID" headerText="<div&amp;gtOrder ID</div>" [disableHtmlEncode]="true"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.displayAsCheckbox `boolean`

Gets or sets a value that indicates to display a column value as checkbox or string

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "Verified" [displayAsCheckbox]= "false"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.editParams `object`

Gets or sets a value that indicates to customize ejNumericTextbox of an editable column. See editingType

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "Freight" [editType]= "editType" [editParams]="editParams" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.toolbarSettings={ showToolbar: true,toolbarItems:["edit"]};
this.editType=ej.Grid.EditingType.Numeric;
this.editParams={decimalPlaces:2};

columns.editTemplate `object`

Gets or sets a template that displays a custom editor used to edit column values.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" >
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "Freight"></e-column>
        <e-column field= "EmployeeID" [editTemplate]="editTemplate"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};
this.editTemplate={ create: function () { return "<input>"; }, read: function (args) { return args.ejMaskEdit("get_StrippedValue"); }, write: function (args) { args.element.ejMaskEdit({ width: "100%" ,maskFormat: "9",value: args.rowdata !== undefined ? args.rowdata["EmployeeID"]: "" }); } };

columns.editType `enum`

Gets or sets a value that indicates to render the element(based on edit type) for editing the grid record. See editingType

Default Value:

ej.Grid.EditingType.String

Name	Description
String	Specifies editing type as string edit.
Boolean	Specifies editing type as boolean edit.
Numeric	Specifies editing type as numeric edit.
Dropdown	Specifies editing type as dropdown edit.
DatePicker	Specifies editing type as datepicker.
DateTimePicker	Specifies editing type as datetime picker.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" >
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "Freight" [editType]= "editType" [editParams]="editParams" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.editType=ej.Grid.EditingType.Numeric;
this.editParams={decimalPlaces:2};

columns.enableGroupByFormat `boolean`

Gets or sets a value that indicates to group the column based on its column format.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" allowPaging="true" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" ></e-column>
        <e-column field="CustomerID" headerText="CustomerID"></e-column>
        <e-column field="Freight" headerText="Freight" format= "{0:C2}" [enableGroupByFormat]= "true"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" format= "{0:MM/dd/yyyy}" [enableGroupByFormat]= "true"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.field `string`

Gets or sets a value that indicates to display the columns in the grid mapping with column name of the dataSource.

Default Value:

””

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" ></e-column>        
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.filterBarTemplate `object`

Gets or sets a template that customize the filter control from default .

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" >
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "Freight"></e-column>
        <e-column field= "EmployeeID" [filterBarTemplate]="filterBarTemplate"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterBarTemplate={ create: function (args) {return "<input>"},write: function (args) {var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("CustomerID"));args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, focusOut: ej.proxy(args.column.filterBarTemplate.read, this, args) });},read: function (args) {this.filterColumn(args.column.field, "equal", args.element.val(), "and", true)}};

columns.filterType `enum`

Gets or sets a value that indicates to render the excel or menu filter dialog to the grid columns. See filterType

Default Value:

null

Name	Description
Menu	Specifies the filter type as menu.
Excel	Specifies the filter type as excel.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]= "filter"   >
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "Freight"></e-column>
        <e-column field= "EmployeeID" [filterType]="filterType"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filter = { filterType: "menu"};
this.filterType={filterType: ej.Grid.FilterType.Excel };

columns.foreignKeyField `string`

Gets or sets a value that indicates to define foreign key field name of the grid datasource.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field= "OrderID" ></e-column>
        <e-column field= "CustomerID" [visible]="false"></e-column>
        <e-column field="EmployeeID" foreignKeyField= "EmployeeID" foreignKeyValue= "FirstName" [dataSource]= "employeedata" headerText= "FirstName" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" and "window.employeeView" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.employee = window.employeeView;

columns.foreignKeyValue `string`

Gets or sets a value that indicates to bind the field which is in foreign column datasource based on the foreignKeyField

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field= "OrderID" ></e-column>
        <e-column field= "CustomerID" [visible]="false"></e-column>
        <e-column field="EmployeeID" foreignKeyField= "EmployeeID" foreignKeyValue= "FirstName" [dataSource]= "employeedata" headerText= "FirstName" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" and "window.employeeView" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.employee = window.employeeView;

columns.format `string`

Gets or sets a value that indicates the format for the text applied on the column

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="Freight" width="75" format="{0:C2}" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;

columns.headerTemplateID `string`

Gets or sets a value that indicates to add the template within the header element of the particular column.

Default Value:

null

Example

HTML

<div id="customerTemplate">
<span class="e-userlogin e-icon headericon"></span>
 CUS ID
</div>
<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field= "OrderID"></e-column>
        <e-column field= "CustomerID" headerTemplateID= "#customerTemplate"></e-column>
        <e-column field= "Freight"  ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.headerText `string`

Gets or sets a value that indicates to display the title of that particular column.

Default Value:

””

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
       <e-column field="OrderID"  headerText="OrderID" width="75" [textAlign]="right"></e-column>
       <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;

columns.headerTextAlign `enum`

This defines the text alignment of a particular column header cell value.

Default Value:

null

Name	Description
Center	Header text is centered.
Justify	Header text is justified.
Left	Header text is aligned to the left.
Right	Header text is aligned to the right.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
    <e-columns>
       <e-column field="OrderID"  headerText="OrderID" width="75" ></e-column>
       <e-column field="CustomerID" headerText="CustomerID" width="80" [headerTextAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;

columns.isFrozen `boolean`

You can use this property to freeze selected columns in grid at the time of scrolling.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings">
    <e-columns>
        <e-column field="OrderID" ></e-column>
        <e-column field="CustomerID" [isFrozen]="true"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={ width : 300,height:300};

columns.isIdentity `boolean`

Gets or sets a value that indicates the column has an identity in the database.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  [editSettings]="editSettings">
    <e-columns>
        <e-column field="OrderID" [isIdentity]="true"></e-column>
        <e-column field="CustomerID" [isPrimaryKey]="true"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};

columns.isPrimaryKey `boolean`

Gets or sets a value that indicates the column is act as a primary key(read-only) of the grid. The editing is performed based on the primary key column

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};

columns.priority `number`

Gets or sets a value that indicates the order of Column that are to be hidden or visible when Grid element is in responsive mode and could not occupy all columns.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" isResponsive= "true" [minWidth]= 400>
    <e-columns>
        <e-column field="OrderID"></e-column>
        <e-column field="CustomerID" [priority]= 2></e-column>
        <e-column field="EmployeeID" [priority]= 1></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.showInColumnChooser `boolean`

Used to hide the particular column in column chooser by giving value as false.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" showColumnChooser="true">
    <e-columns>
        <e-column field="OrderID" ></e-column>
        <e-column field="CustomerID" [showInColumnChooser]="false"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.template `boolean|string`

Gets or sets a value that indicates whether to enables column template for a particular column.

Default Value:

false

Example

HTML

<script id="columnTemplate" type="text/x-jsrender">
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</script>
<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID" ></e-column>
        <e-column field="CustomerID" [template]="columnTemplate"></e-column>
        <e-column field="EmployeeID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.columnTemplate="#columnTemplate";

columns.textAlign `enum`

Gets or sets a value that indicates to align the text within the column.

Default Value:

ej.TextAlign.Left

Name	Description
Center	Text is centered.
Justify	Text is justified.
Left	Text is aligned to the left.
Right	Text is aligned to the right.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID"></e-column>
        <e-column field="CustomerID" [textAlign]="right"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;

columns.tooltip `string`

Sets the template for Tooltip in Grid Columns(both header and content)

Default Value:

null

Example

HTML

<script type="text/template" id="colTip">
  {{:value}}
</script>
<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID" ></e-column>
        <e-column field="CustomerID" tooltip="#colTip"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.type `string`

Gets or sets a value that indicates to specify the data type of the specified columns.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID" ></e-column>
        <e-column field="CustomerID" type="string"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.validationRules `object`

Gets or sets a value that indicates to define constraints for saving data to the database.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" >
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" [validationRules]="rules"></e-column>
        <e-column field="CustomerID"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};
this.rules={required: true, number: true };

columns.visible `boolean`

Gets or sets a value that indicates whether this column is visible in the grid.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID" [visible]="false"></e-column>
        <e-column field="CustomerID"></e-column>
        <e-column field="EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

columns.width `number`

Gets or sets a value that indicates to define the width for a particular column in the grid.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" >
    <e-columns>
        <e-column field="OrderID" width="75"></e-column>
        <e-column field="CustomerID" width="80"></e-column>
        <e-column field="ShipCity" width="110"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

contextMenuSettings `object`

Gets or sets an object that indicates whether to customize the context menu behavior of the grid.

contextMenuSettings.contextMenuItems `array`

Gets or sets a value that indicates whether to add the default context menu actions as a context menu items If enableContextMenu is true it will show all the items related to the target, if you want selected items from contextmenu you have to mention in the contextMenuItems

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" allowGrouping="true" allowSorting="true" allowPaging="true" [contextMenuSettings]="settings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.settings={enableContextMenu: true,  contextMenuItems:["Add Record","Edit Record","Delete Record"] };

contextMenuSettings.customContextMenuItems `array`

Gets or sets a value that indicates whether to add custom contextMenu items within the toolbar to perform any action in the grid

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [contextMenuSettings]="settings">
    <e-columns>
        <e-column field="OrderID"></e-column>
        <e-column field="CustomerID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.settings={enableContextMenu: true, customContextMenuItems:["Hidden Columns","Visible Columns"] };

contextMenuSettings.enableContextMenu `boolean`

Gets or sets a value that indicates whether to enable the context menu action in the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" allowGrouping="true" allowSorting="true" allowPaging="true" [contextMenuSettings]="settings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.settings={enableContextMenu: true };

contextMenuSettings.disableDefaultItems `boolean`

Gets or sets a value that indicates whether to disable the default context menu items in the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" allowGrouping="true" allowSorting="true" allowPaging="true" [contextMenuSettings]="settings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true};
this.settings={enableContextMenu: true, customContextMenuItems:["Hidden Columns,Visible Columns"], disableDefaultItems: true };

contextMenuSettings.subContextMenu `array`

Used to get or set the subMenu to the corresponding custom context menu item.

contextMenuSettings.subContextMenu.contextMenuItem `string`

Used to get or set the corresponding custom context menu item to which the submenu to be appended.

Default Value:

null

contextMenuSettings.subContextMenu.subMenu `array`

Used to get or set the sub menu items to the custom context menu item.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [contextMenuSettings]="settings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.settings={enableContextMenu: true, customContextMenuItems: ["Hide Column"],subContextMenu: [{ contextMenuItem: "Hide Column", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }]};

contextMenuSettings.subContextMenu.template `string`

Used to get or set the sub menu items to the custom context menu item using JsRender template.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [contextMenuSettings]="settings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.settings={enableContextMenu: true, customContextMenuItems: ["Hide Column"],subContextMenu: [{ contextMenuItem: "Hide Column", template: "<ul><li><a>OrderID</a></li></ul>" }]};

cssClass `string`

Gets or sets a value that indicates to render the grid with custom theme.

Default Value:

””

Example

HTML

<style type="text/css">
   .gradient-green {
       font-family: cursive;
   }
   .gradient-green .e-alt_row {
       background: none repeat scroll 0 0 #71A409;
   }
</style>
<ej-grid id="Grid" [dataSource]="gridData" cssClass= "gradient-green" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

dataSource `object`

Gets or sets the data to render the grid with records

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">   
</ej-grid>

this.gridData = [{
            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
            OrderDate: new Date(8364186e5), Freight: 32.38
        },
        {
            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
            OrderDate: new Date(836505e6), Freight: 11.61
        },
        {
            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,
            OrderDate: new Date(8367642e5), Freight: 65.83
        },
        {
            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,
            OrderDate: new Date(8367642e5), Freight: 41.34
        },
        {
            OrderID: 10260, CustomerID: 'SUPRD', EmployeeID: 4,
            OrderDate: new Date(8368506e5), Freight: 51.3
        }];

detailsTemplate `string`

This specifies the grid to add the details row for the corresponding master row

Default Value:

null

Example

HTML

<script id="templateData" type="text/x-jsrender">
<table>
<tr>
<td>
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</td>
</tr>
</table>
</script>
<ej-grid id="Grid" [dataSource]="gridData" [detailsTemplate]="templateData">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.templateData="#templateData";

editSettings `object`

Gets or sets an object that indicates whether to customize the editing behavior of the grid.

editSettings.allowAdding `boolean`

Gets or sets a value that indicates whether to enable insert action in the editing mode.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowAdding:true};
this.toolbarSettings={ showToolbar: true,toolbarItems:["add"]};

editSettings.allowDeleting `boolean`

Gets or sets a value that indicates whether to enable the delete action in the editing mode.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowDeleting:true};
this.toolbarSettings={ showToolbar: true,toolbarItems:["delete"]};

editSettings.allowEditing `boolean`

Gets or sets a value that indicates whether to enable the edit action in the editing mode.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true};
this.toolbarSettings={  showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.allowEditOnDblClick `boolean`

Gets or sets a value that indicates whether to enable the editing action while double click on the record

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,allowEditOnDblClick: false};
this.toolbarSettings={  showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.dialogEditorTemplateID `string`

This specifies the id of the template. This template can be used to display the data that you require to be edited using the Dialog Box

Default Value:

null

Example

HTML

<script id="template" type="text/template">
        <table>
            <tr>
                <td>OrderID</td>
                <td>
                    <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
                </td>
            </tr>
            <tr>
                <td>CustomerID</td>
                <td>
                    <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
                </td>
            </tr>
            <tr>
                <td>EmployeeID</td>
                <td>
                    <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
                </td>
            </tr>
        </table>
</script>             
<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,editMode: ej.Grid.EditMode.DialogTemplate, dialogEditorTemplateID: "#template" };
this.toolbarSettings={  showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.editMode `enum`

Gets or sets a value that indicates whether to define the mode of editing

Default Value:

ej.Grid.EditMode.Normal

Add a comment to this line

Name	Description
Normal	Edit mode is normal.
Dialog	Edit mode is dialog.
DialogTemplate	Edit mode is dialog template.
Batch	Edit mode is batch.
InlineForm	Edit mode is inline form.
InlineTemplateForm	Edit mode is inline template form.
ExternalForm	Edit mode is external form.
ExternalFormTemplate	Edit mode is external form template.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,editMode:ej.Grid.EditMode.Dialog};
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.externalFormTemplateID `string`

This specifies the id of the template. This template can be used to display the data that you require to be edited using the External edit form

Default Value:

null

Example

HTML

<script id="template" type="text/template">
   <table>
       <tr>
           <td>OrderID</td>
           <td>
               <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
       </tr>
       <tr>
           <td>CustomerID</td>
           <td>
              <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
       </tr>
       <tr>
           <td>EmployeeID</td>
           <td>
               <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
       </tr>
   </table>
</script>
<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,editMode: ej.Grid.EditMode.ExternalFormTemplate, externalFormTemplateID: "#template"};
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.formPosition `enum`

This specifies to set the position of an External edit form either in the top-right or bottom-left of the grid

Default Value:

ej.Grid.FormPosition.BottomLeft

Name	Description
BottomLeft	Form position is bottom left.
TopRight	Form position is top right.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true,editMode: ej.Grid.EditMode.ExternalForm, formPosition: ej.Grid.FormPosition.BottomLeft};
this.toolbarSettings={  showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.inlineFormTemplateID `string`

This specifies the id of the template. This template can be used to display the data that you require to be edited using the Inline edit form

Default Value:

null

Example

HTML

<script id="template" type="text/template">
   <table>
       <tr>
           <td>OrderID</td>
           <td>
               <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
       </tr>
       <tr>
           <td>CustomerID</td>
           <td>
              <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
       </tr>
       <tr>
           <td>EmployeeID</td>
           <td>
               <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
       </tr>
   </table>
</script>
<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field= "OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field= "CustomerID" [allowEditing]="false"></e-column>
        <e-column field= "EmployeeID"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true, editMode: ej.Grid.EditMode.InlineFormTemplate", inlineFormTemplateID: "#template" };
this.toolbarSettings={  showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.rowPosition `enum`

This specifies to set the position of an adding new row either in the top or bottom of the grid

Default Value:

ej.Grid.RowPosition.Top

Name	Description
Top	Specifies position of add new row as top.
Bottom	Specifies position of add new row as bottom.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true, allowAdding:true, rowPosition:ej.Grid.RowPosition.Bottom" };
this.toolbarSettings={ showToolbar: true,toolbarItems:["add"]};

editSettings.showConfirmDialog `boolean`

Gets or sets a value that indicates whether the confirm dialog has to be shown while saving or discarding the batch changes

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing:true, editMode: ej.Grid.EditMode.Batch, showConfirmDialog:false };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","update","cancel"]};

editSettings.showDeleteConfirmDialog `boolean`

Gets or sets a value that indicates whether the confirm dialog has to be shown while deleting record

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowDeleting: true, showDeleteConfirmDialog:true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","delete","cancel"]};

editSettings.titleColumn `string`

Gets or sets a value that indicates whether the title for edit form is different from the primary key column.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowAdding: true,editMode: ej.Grid.EditMode.Dialog, titleColumn: "CustomerID" };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","add","delete","update","cancel"]};

editSettings.showAddNewRow `boolean`

Gets or sets a value that indicates whether to display the add new form by default in the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowAdding: true, showAddNewRow: true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","add","delete","update","cancel"]};

enableAltRow `boolean`

Gets or sets a value that indicates whether to enable the alternative rows differentiation in the grid records based on corresponding theme.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" enableAltRow="false">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableAutoSaveOnSelectionChange `boolean`

Gets or sets a value that indicates whether to enable the save action in the grid through row selection

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings" enableAutoSaveOnSelectionChange="false">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing: true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","update","cancel"]};

enableHeaderHover `boolean`

Gets or sets a value that indicates whether to enable mouse over effect on the corresponding column header cell of the grid

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" enableHeaderHover="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enablePersistence `boolean`

Gets or sets a value that indicates whether to persist the grid model state in page using applicable medium i.e., HTML5 localStorage or cookies

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping= "true" enablePresistence="true">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableResponsiveRow `boolean`

Gets or sets a value that indicates whether the grid rows has to be rendered as detail view in mobile mode

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" isResponsive="true" enableResponsiveRow= "true" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableRowHover `boolean`

Gets or sets a value that indicates whether to enable mouse over effect on corresponding grid row.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" enableRowHover= "false" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableRTL `boolean`

Align content in the grid control from right to left by setting the property as true.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" enableRTL= "true" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableTouch `boolean`

To Disable the mouse swipe property as false.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" enableTouch= "false" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

enableToolbarItems `boolean`

It sets a value that indicates whether to enable toolbar items, when allowEditing, allowAdding and allowDeleting property set as false in the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]= "edit" [toolbarSettings]= "tool">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
public edit = { allowEditing: true, allowAdding: true, allowDeleting: true }
public tool =  { showToolbar: true, toolbarItems: ["add","edit","delete","update","cancel"] }

exportToExcelAction `string`

Act as mapper for the excel exporting URL.

Default Value:

ExportToExcel

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]= "edit" [exportToExcelAction]= "exportExcel" [toolbarSettings]= "tool">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
public tool =  { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport] };
public exportExcel =  "http://js.syncfusion.com/ExportingServices/api/JSGridExport/ExcelExport";

exportToPdfAction `string`

Act as mapper for the PDF exporting URL.

Default Value:

ExportToPdf

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]= "edit" [exportToPdfAction]= "exportPdf" [toolbarSettings]= "tool">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
public tool =  { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] }
public exportPdf =  "http://js.syncfusion.com/ExportingServices/api/JSGridExport/PdfExport";

exportToWordAction `string`

Act as mapper for the Word exporting URL.

Default Value:

ExportToWord

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]= "edit" [exportToWordAction]= "exportWord" [toolbarSettings]= "tool">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
public tool =  { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.WordExport] }
public exportWord = "http://js.syncfusion.com/ExportingServices/api/JSGridExport/WordExport";

filterSettings `object`

Gets or sets an object that indicates whether to customize the filtering behavior of the grid

filterSettings.enableCaseSensitivity `boolean`

Gets or sets a value that indicates to perform the filter operation with case sensitive in excel styled filter menu mode

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;;
this.filterSettings={ enableCaseSensitivity:true, filterType:ej.Grid.FilterType.Excel};

filterSettings.enableInterDeterminateState `boolean`

Gets or sets a value that indicates to define the interDeterminateState of checkbox in excel filter dialog.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;;
this.filterSettings={ enableInterDeterminateState:false, filterType:ej.Grid.FilterType.Excel};

filterSettings.filterBarMode `enum`

This specifies the grid to starts the filter action while typing in the filterBar or after pressing the enter key. based on the filterBarMode.

Default Value:

ej.Grid.FilterBarMode.Immediate

Name	Description
Immediate	Initiate filter operation on typing the filter query.
OnEnter	Initiate filter operation after Enter key is pressed.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ filterBarMode: ej.Grid.FilterBarMode.OnEnter};

filterSettings.filteredColumns `array`

Gets or sets a value that indicates whether to define the filtered columns details programmatically at initial load

Default Value:

[]

filterSettings.filteredColumns.field `string`

filterSettings.filteredColumns.matchCase `boolean`

Gets or sets a value that indicates whether to define the matchCase of given value to be filter.

Gets or sets a value that indicates whether to define the field name of the column to be filter.

filterSettings.filteredColumns.operator `enum`

Gets or sets a value that indicates whether to define the filter condition to filtered column.

Default Value:

Name	Description
startsWith	Specifies the filter operator as startswith.
endsWith	Specifies the filter operator as endswith.
contains	Specifies the filter operator as contains.
equal	Specifies the filter operator as equal.
notEqual	Specifies the filter operator as 'not equal'.
greaterThan	Specifies the filter operator as greaterthan.
greaterThanOrEqual	Specifies the filter operator as 'greaterthan or equal'.
lessThan	Specifies the filter operator as lessthan.
lessThanOrEqual	Specifies the filter operator as 'Lessthan or equal'.

filterSettings.filteredColumns.predicate `string`

Gets or sets a value that indicates whether to define the predicate as and/or.

filterSettings.filteredColumns.value `string|number`

Gets or sets a value that indicates whether to define the value to be filtered in a column.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ filterType: ej.Grid.FilterType.Menu, filteredColumns: [{ field: "CustomerID", operator: "startswith", value: "vi", predicate: "and" }]};

filterSettings.filterType `enum`

This specifies the grid to show the filterBar or filterMenu to the grid records. See filterType

Default Value:

ej.Grid.FilterType.FilterBar

Name	Description
Menu	Specifies the filter type as menu.
Excel	Specifies the filter type as excel.
FilterBar	Specifies the filter type as filter bar.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ filterType: ej.Grid.FilterType.Menu};

filterSettings.immediateModeDelay `number`

This specifies the grid to delay the filter action while typing in the filterBar.

Default Value:

1500

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ filterBarMode: ej.Grid.FilterBarMode.Immediate, immediateModeDelay:2000 };

filterSettings.maxFilterChoices `number`

Gets or sets a value that indicates the maximum number of filter choices that can be showed in the excel styled filter menu.

Default Value:

1000

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ maxFilterChoices:200, filterType:ej.Grid.FilterType.Excel};

filterSettings.showfilterbarstatus `boolean`

This specifies the grid to show the filter text within the grid pager itself.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ showFilterBarStatus: true};

filterSettings.showPredicate `boolean`

Gets or sets a value that indicates whether to enable the predicate options in the filtering menu

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowFiltering="true" [filterSettings]="filterSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.filterSettings={ showPredicate:true, filterType:ej.Grid.FilterType.Menu};

groupSettings `object`

Gets or sets an object that indicates whether to customize the grouping behavior of the grid.

groupSettings.captionFormat `string`

Gets or sets a value that customize the group caption format.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={ captionFormat: "{{:field}} - {{:key}} : {{:count}} {{if count == 1 }} item {{else}} items {{/if}}"};

groupSettings.enableDropAreaAutoSizing `boolean`

Gets or sets a value that indicates whether to enable animation button option in the group drop area of the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={enableDropAreaAutoSizing: true };

groupSettings.groupedColumns `array`

Gets or sets a value that indicates whether to add grouped columns programmatically at initial load

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" width="75"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={groupedColumns:["OrderID"] };

groupSettings.showDropArea `boolean`

Gets or sets a value that indicates whether to show the group drop area just above the column header. It can be used to avoid ungrouping the already grouped column using groupSettings.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75" ></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={showDropArea:false,groupedColumns:["OrderID"] };

groupSettings.showGroupedColumn `boolean`

Gets or sets a value that indicates whether to hide the grouped columns from the grid

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" width="75"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={groupedColumns:["OrderID"],showGroupedColumn:false };

groupSettings.showToggleButton `boolean`

Gets or sets a value that indicates whether to show the group button image(toggle button)in the column header and also in the grouped column in the group drop area . It can be used to group/ungroup the columns by clicking on the toggle button.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75"></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={groupedColumns:["OrderID"],showToggleButton:true };

groupSettings.showUngroupButton `boolean`

Gets or sets a value that indicates whether to enable the close button in the grouped column which is in the group drop area to ungroup the grouped column

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" >
    <e-columns>
        <e-column field="OrderID"  headerText="OrderID" width="75" ></e-column>
        <e-column field="CustomerID" headerText="CustomerID" width="80"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" width="75" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.groupSettings={groupedColumns:["OrderID"],showGroupedColumn:false,showToggleButton:true,showUngroupButton:true };

gridLines `enum`

Gets or sets a value that indicates to enable the visibility of the grid lines.

Default Value:

ej.Grid.GridLines.Both

Name	Description
Both	Displays both the horizontal and vertical grid lines.
Horizontal	Displays the horizontal grid lines only.
Vertical	Displays the vertical grid lines only.
None	No grid lines are displayed.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  [gridLines]="none" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.none = ej.Grid.GridLines.None;

isResponsive `boolean`

Gets or sets a value that indicates whether the grid design has be to made responsive.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" isResponsive="true" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

keySettings `object`

This specifies to change the key in keyboard interaction to grid control

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [keySettings]="keySettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.keySettings={saveRequest: "83",moveCellRight: "13"};

locale `string`

Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region.

Default Value:

“en-US”

Example

HTML

<script>
ej.Pager.locale["es-ES"] = {
   pagerInfo: "{0} de {1} p&aacute;ginas ({2} art&iacute;culos)"
};
</script>           
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" locale="es-ES">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

minWidth `number`

Gets or sets a value that indicates whether to set the minimum width of the responsive grid while isResponsive property is true and enableResponsiveRow property is set as false.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [minWidth]=990 isResponsive="true" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

pageSettings `object`

Gets or sets an object that indicates whether to modify the pager default configuration.

pageSettings.currentPage `number`

Gets or sets a value that indicates whether to define which page to display currently in the grid

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ currentPage: 1 };

pageSettings.enableQueryString `boolean`

Gets or sets a value that indicates whether to pass the current page information as a query string along with the URL while navigating to other page.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ enableQueryString: true };

pageSettings.enableTemplates `boolean`

Gets or sets a value that indicates whether to enables pager template for the grid.

Default Value:

false

Example

HTML

<script id="pagerTemplate" type="text/x-jsrender">
        <input type="text" id="txtPageNumber" value="" style="width: 45px; border: none; cursor: text" />
        <input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" onclick="gotoPage(this)" />
</script>
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={enableTemplates:true,template:"#pagerTemplate"};

pageSettings.pageCount `number`

Gets or sets a value that indicates whether to define the number of pages displayed in the pager for navigation

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ pageCount: 1};

pageSettings.pageSize `number`

Gets or sets a value that indicates whether to define the number of records displayed per page

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ pageSize: 1};

pageSettings.pageSizeList `array`

Gets or sets different page size values to the Dropdown in Grid Pager, by which number of records in a page can be changed dynamically.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ pageSizeList: [7,3,9]};

pageSettings.showDefaults `boolean`

Gets or sets a value that indicates whether to enables default pager for the grid.

Default Value:

false

Example

HTML

<script id="pagerTemplate" type="text/x-jsrender">
        <input type="text" id="txtPageNumber" value="" style="width: 45px; border: none; cursor: text" />
        <input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" onclick="gotoPage(this)" />
</script>
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={ showDefaults:true,enableTemplates:true,templateID:"#pagerTemplate" };

pageSettings.template `string`

Gets or sets a value that indicates to add the template as a pager template for grid.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
</ej-grid>
<script id="pagerTemplate" type="text/x-jsrender">
<input type="text" id="txtPageNumber"  value="" style="width: 45px; border: none; cursor: text" />
<input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" />
</script>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.pageSettings={enableTemplates:true,template:"#pagerTemplate"};

pageSettings.totalPages `number`

Get the value of total number of pages in the grid. The totalPages value is calculated based on page size and total records of grid

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true">
</ej-grid>
<div id="print"></div>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
$("#print").text("TotalPages: " + $("#Grid").ejGrid("option", "pageSettings.totalPages"));

pageSettings.totalRecordsCount `number`

Get the value of total number of records which is bound to the grid. The totalRecordsCount value is calculated based on dataSource bound to the grid.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true">
</ej-grid>
<div id="print"></div>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
$("#print").text("TotalRecordsCount: " + $("#Grid").ejGrid("option", "pageSettings.totalRecordsCount"));

pageSettings.printMode `enum`

Gets or sets a value that indicates whether to define the number of pages to print

Default Value:

ej.Grid.PrintMode.AllPages

Name	Description
AllPages	Prints all pages.
CurrentPage	Prints current page.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [toolbarSettings]="toolbarSettings" [pageSettings]="pageSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={ showToolbar: true,toolbarItems: ["printGrid"]};
this.pageSettings={printMode:ej.Grid.PrintMode.CurrentPage"};

query `object`

Query the dataSource from the table for Grid.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [query]="queryOrder">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.queryOrder=ej.Query().select(["OrderID", "CustomerID"]);

resizeSettings `object`

Gets or sets an object that indicates whether to modify the resizing behavior.

resizeSettings.resizeMode `enum`

Gets or sets a value that indicates whether to define the mode of resizing.

Default Value:

ej.Grid.ResizeMode.Normal

Name	Description
Normal	New column size will be adjusted by all other Columns
NextColumn	New column Size will be adjusted using next column.
Control	New column Size will be adjusted using entire control

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" allowResizing="true" [resizeSettings]="resizeSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.resizeSettings={resizeMode: ej.Grid.ResizeMode.Control};

rowTemplate `string`

Gets or sets a value that indicates to render the grid with template rows. The template row must be a table row. That table row must have the JavaScript render binding format () then the grid data source binds the data to the corresponding table row of the template.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [rowTemplate]="templateData" >
    <e-columns>
        <e-column headerText="Employeephoto"></e-column>
        <e-column field="EmployeeID" headerText="EmployeeID" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>
<script id="templateData" type="text/x-jsrender">
<tr>
<td>
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</td>
<td>
{{:EmployeeID}}
</td>
</tr>
</script>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.templateData="#templateData";
this.right=ej.TextAlign.Right;

rowDropSettings `object`

Gets or sets an object that indicates whether to customize the drag and drop behavior of the grid rows

rowDropSettings.dropTargetID `object`

This specifies the grid to drop the grid rows only at particular target element.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowRowDragAndDrop="true" [rowDropSettings]="rowDropSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.rowDropSettings={dropTargetID: "#DestGrid"};

rowDropSettings.dragMapper `string`

This helps in mapping server-side action when rows are dragged from Grid.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowRowDragAndDrop="true" [rowDropSettings]="rowDropSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.rowDropSettings={dropTargetID: "#DestGrid",dragMapper: "Home/DragHandler" };

rowDropSettings.dropMapper `string`

This helps in mapping server-side action when rows are dropped in Grid.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowRowDragAndDrop="true" [rowDropSettings]="rowDropSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.rowDropSettings={dropTargetID: "#DestGrid",dropMapper: "Home/DragHandler" };

rowDropSettings-dragBehavior `enum`

Gets or sets a value that indicates whether move or copy a record from one grid to another or within the grid

Default Value:

ej.Grid.DragBehavior.Move

Name	Description
Move	Allows to move a record from one grid to another or within the grid.
Copy	Allows to copy a record from one grid to another or within the grid.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [allowRowDragAndDrop]="true" [rowDropSettings]="rowDropSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.rowDropSettings={dropTargetID: "#DestGrid",dropMapper: "Home/DragHandler",dragBehavior:ej.Grid.DragBehavior.Copy };

searchSettings `object`

Gets or sets an object that indicates whether to customize the searching behavior of the grid

searchSettings.fields `object`

This specify the grid to search for the value in particular columns that is mentioned in the field.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings" [searchSettings]="searchSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={ showToolbar: true,toolbarItems: ["search"]};
this.searchSettings={fields:["OrderID","CustomerID","EmployeeID"], key:"VICTE"};

searchSettings.key `string`

This specifies the grid to search the particular data that is mentioned in the key.

Default Value:

””

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings" [searchSettings]="searchSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={ showToolbar: true,toolbarItems: ["search"]};
this.searchSettings={ key:"VICTE"};

searchSettings.operator `string`

It specifies the grid to search the records based on operator.

List of enum type operators

ej.FilterOperators.contain
ej.FilterOperators.equal
ej.FilterOperators.notEqual
ej.FilterOperators.startsWith
ej.FilterOperators.endsWith

Default Value:

contains

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings" [searchSettings]="searchSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={ showToolbar: true,toolbarItems: ["search"]};
this.searchSettings={operator:"contains", key:"VICTE"};

searchSettings.ignoreCase `boolean`

It enables or disables case-sensitivity while searching the search key in grid.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings" [searchSettings]="searchSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={ showToolbar: true,toolbarItems: ["search"]};
this.searchSettings={ignoreCase:true, key:"VICTE"};

selectedRecords `array`

Gets a value that indicates whether the grid model to hold multiple selected records . selectedRecords can be used to displayed hold the single or multiple selected records using “selectedRecords” property

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData">
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
// display single or multiple selected records
$("#Grid").ejGrid("model.selectedRecords")

selectedRowIndex `number`

Gets or sets a value that indicates to select the row while initializing the grid

Default Value:

-1

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [selectedRowIndex]=1>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

selectedRowIndices `array`

Gets or sets a value that indicates the selected rows in grid

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [selectionType]="multiple" [selectedRowIndices]=[1,4,7]>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.multiple=ej.Grid.SelectionType.Multiple;

selectionSettings `object`

This property is used to configure the selection behavior of the grid.

selectionSettings.cellSelectionMode `enum`

Gets or sets a value that indicates the cell selection actions based on the cell selection mode.

Default Value:

ej.Grid.CellSelectionMode.Flow

Name	Description
Flow	It selects cells continuously from the start cell to end cell.
Box	It selects range of cells as a block from start cell to the end cell.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSelection="true" [selectionSettings]="selectionSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.selectionSettings={selectionMode: ["cell"], cellSelectionMode: ej.Grid.CellSelectionMode.Box };

selectionSettings.enableToggle `boolean`

Gets or sets a value that indicates whether to enable the toggle selection behavior for row, cell and column.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSelection="true" [selectionSettings]="selectionSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.selectionSettings={enableToggle: true };

selectionSettings.allowDragSelection `boolean`

Gets or sets a value that indicates whether to select multiple rows or cells by performing dragging in Grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [allowSelection]="true" [selectionType]="multiple" [selectionSettings]="selectionSettings" >
</ej-grid>

//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).gridData;
this.selectionSettings={selectionMode: ["cell"], allowDragSelection: true, cellSelectionMode: ej.Grid.CellSelectionMode.Flow };

selectionSettings.selectionMode `array`

Gets or sets a value that indicates whether to add the default selection actions as a selection mode.See selectionMode

Default Value:

[“row”]

Name	Description
Row	Selection is row basis.
Cell	Selection is cell basis.
Column	Selection is column basis.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSelection="true" [selectionSettings]="selectionSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.selectionSettings={selectionMode: ["row","cell","column"] };

selectionType `enum`

The row selection behavior of grid. Accepting types are “single” and “multiple”.

Default Value:

ej.Grid.SelectionType.Single

Name	Description
Single	Specifies the selection type as single.
Multiple	Specifies the selection type as multiple.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [selectionType]="multiple" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.multiple = ej.Grid.SelectionType.Multiple;

scrollSettings `object`

Gets or sets an object that indicates whether to customize the scrolling behavior of the grid.

scrollSettings.allowVirtualScrolling `boolean`

This specify the grid to to view data that you require without buffering the entire load of a huge database

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:300,height:100,allowVirtualScrolling:true};

scrollSettings.autoHide `boolean`

It accepts the boolean value and shows or hides the scrollbar while focus in or focus out of the Grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={autoHide: true};

scrollSettings.buttonSize `number`

Specifies the height and width of button in the scrollbar.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={ buttonSize:20 };

scrollSettings.enableTouchScroll `boolean`

This specify the grid to enable/disable touch control for scrolling.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={enableTouchScroll:true};

scrollSettings.frozenColumns `number`

This specify the grid to freeze particular columns at the time of scrolling.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:500,height:50,frozenColumns:2 };

scrollSettings.frozenRows `number`

This specify the grid to freeze particular rows at the time of scrolling.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:500,height:150,frozenRows:2 };

scrollSettings.height `string|number`

This specify the grid to show the vertical scroll bar, to scroll and view the grid contents.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={height:50};

scrollSettings.virtualScrollMode `enum`

This is used to define the mode of virtual scrolling in grid. See virtualScrollMode

Default Value:

ej.Grid.VirtualScrollMode.Normal

Name	Description
Normal	virtual scroll mode is normal.
Continuous	virtual scroll mode is continuous.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:500 , height: 550 , allowVirtualScrolling:true, virtualScrollMode:ej.Grid.VirtualScrollMode.Normal};

scrollSettings.enableVirtualization `boolean`

This is used to enable the enhanced virtual scrolling in Grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:500 , height: 550 , enableVirtualization:true};

scrollSettings.width `string|number`

This specify the grid to show the horizontal scroll bar, to scroll and view the grid contents

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={width:500};

scrollSettings.scrollOneStepBy `number`

This specify the scroll down pixel of mouse wheel, to scroll mouse wheel and view the grid contents.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.scrollSettings={scrollOneStepBy:100};

showColumnChooser `boolean`

Gets or sets a value that indicates whether to enable column chooser on grid. On enabling feature able to show/hide grid columns

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" showColumnChooser="true" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;

showStackedHeader `boolean`

Gets or sets a value that indicates stacked header should be shown on grid layout when the property “stackedHeaderRows” is set.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}];

showSummary `boolean`

Gets or sets a value that indicates summary rows should be shown on grid layout when the property “summaryRows” is set

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  showSummary="true"  [summaryRows]="summaryRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType:ej.Grid.SummaryType.Count, displayColumn: "Freight", dataMember: "Freight" }]}];

sortSettings `object`

Gets or sets a value that indicates whether to customize the sorting behavior of the grid.

sortSettings.sortedColumns `array`

Gets or sets a value that indicates whether to define the direction and field to sort the column.

sortSettings.sortedColumns.direction `string`

Gets or sets a value that indicates whether to define the direction to sort the column.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"[sortSettings]="sortSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="EmployeeID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.sortSettings={ sortedColumns: [{field:"EmployeeID", direction:"descending"}]};

sortSettings.sortedColumns.field `string`

Gets or sets a value that indicates whether to define the field name of the column to be sort

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"[sortSettings]="sortSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="EmployeeID" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.sortSettings={ sortedColumns: [{field:"EmployeeID"}]};

stackedHeaderRows `array`

Gets or sets an object that indicates to managing the collection of stacked header rows for the grid.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}];

stackedHeaderRows.stackedHeaderColumns `array`

Gets or sets a value that indicates whether to add stacked header columns into the stacked header rows

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}];

stackedHeaderRows.stackedHeaderColumns.column `object`

Gets or sets a value that indicates the header text for the particular stacked header column.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}];

stackedHeaderRows.stackedHeaderColumns.cssClass `string`

Gets or sets a value that indicates class to the corresponding stackedHeaderColumn.

Default Value:

null

Example

HTML

<style class="temp">
.temp{
color:green;
}
</style>
<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght",cssClass:"temp"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}]

stackedHeaderRows.stackedHeaderColumns.headerText `string`

Gets or sets a value that indicates the header text for the particular stacked header column.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true"  [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght"},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate"}]}]

stackedHeaderRows.stackedHeaderColumns.textAlign `string`

Gets or sets a value that indicates the text alignment of the corresponding headerText.

Default Value:

ej.TextAlign.Left

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true" [textAlign]="right" [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"OrderID,Frieght",textAlign:ej.TextAlign.Right},{headerText:"CustomerID,OrderDate",column:"CustomerID,OrderDate",textAlign:ej.TextAlign.Left}]}];

stackedHeaderRows.stackedHeaderColumns.tooltip `string`

Sets the template for tooltip for the Grid stackedHeaderColumns.

Default Value:

null

Example

HTML

<script type="text/template" id="colTip">
  {{:value}}
</script>
<ej-grid id="Grid" [dataSource]="gridData" allowSorting="true" showStackedHeader="true" [textAlign]="right" [stackedHeaderRows]="stackedHeaderRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" format="{0:MM/dd/yyyy}" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.stackedHeaderRows=[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",tooltip:"#colTip",column:"CustomerID", textAlign: 
         ej.TextAlign.Right},{headerText:"Freight",tooltip:"#colTip",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",tooltip:"#colTip",column:"ShipCity"}
           ]}];

summaryRows `array`

Gets or sets an object that indicates to managing the collection of summary rows for the grid.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.showCaptionSummary `boolean`

Gets or sets a value that indicates whether to show the summary value within the group caption area for the corresponding summary column while grouping the column

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" showCaptionSummary="true">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];
this.groupSettings={groupedColumns:["OrderID"] };

summaryRows.showGroupSummary `boolean`

Gets or sets a value that indicates whether to show the group summary value for the corresponding summary column while grouping a column

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowGrouping="true" [groupSettings]="groupSettings" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" showGroupSummary="true">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];
this.groupSettings={groupedColumns:["OrderID"] };

summaryRows.showTotalSummary `boolean`

Gets or sets a value that indicates whether to show the total summary value the for the corresponding summary column. The summary row is added after the grid content.

Default Value:

true

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" showTotalSummary="true">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.summaryColumns `array`

Gets or sets a value that indicates whether to add summary columns into the summary rows.

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.summaryColumns.customSummaryValue `string`

Gets or sets a value that indicates the text displayed in the summary column as a value

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows">
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

this.gridData = [{
            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1,
            OrderDate: new Date(8364186e5), Freight: 32.38
        },
        {
            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 2,
            OrderDate: new Date(836505e6), Freight: 11.61
        },
        {
            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 3,
            OrderDate: new Date(8367642e5), Freight: 65.83
        },
        {
            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 4,
            OrderDate: new Date(8367642e5), Freight: 41.34
        },
        {
            OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 5,
            OrderDate: new Date(8368506e5), Freight: 51.3
        }];
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Custom, displayColumn: "Freight", dataMember: "Freight" ,customSummaryValue : this.currency.bind(this)}]}];
currency(){ 
        this.gridObj = $("#Grid").ejGrid("instance")
        this.rs=ej.sum(this.gridObj.model.dataSource(), "Freight")
        return (this.rs);
    }

summaryRows.summaryColumns.dataMember `string`

This specifies summary column used to perform the summary calculation

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.summaryColumns.displayColumn `string`

Gets or sets a value that indicates to define the target column at which to display the summary.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.summaryColumns.format `string`

Gets or sets a value that indicates the format for the text applied on the column

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight"  format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" ,format: "{0:C2}"}]}];

summaryRows.summaryColumns.prefix `string`

Gets or sets a value that indicates the text displayed before the summary column value

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" ,prefix : "Currency:"}]}];

summaryRows.summaryColumns.suffix `string`

Gets or sets a value that indicates the text displayed after the summary column value

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight"  format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" , suffix: "/-"}]}];

summaryRows.summaryColumns.summaryType `enum`

Gets or sets a value that indicates the type of calculations to be performed for the corresponding summary column

Default Value:

[]

Name	Description
Average	Summary type is average.
Minimum	Summary type is minimum.
Maximum	Summary type is maximum.
Count	Summary type is count.
Sum	Summary type is sum.
Custom	Summary type is custom.
TrueCount	Summary type is true count.
FalseCount	Summary type is false count.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }]}];

summaryRows.summaryColumns.template `string`

Gets or sets a value that indicates to add the template for the summary value of dataMember given.

Default Value:

null

Example

HTML

<script id="templateData" type="text/x-jsrender">
     Freight has Average of {{:summaryValue}} in  dollars
</script>
<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight",template: "#templateData",format: "{0:C2}"}]}];

summaryRows.title `string`

This specifies the grid to show the title for the summary rows.

Default Value:

””

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight"}]}];

summaryRows.titleColumn `string`

This specifies the grid to show the title of summary row in the specified column.

Default Value:

null

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" showSummary="true"  [summaryRows]="summaryRows" >
    <e-columns>
        <e-column field="OrderID"  headerText="Order ID"  width="80" [textAlign]="right"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="80" [textAlign]="right"></e-column>
        <e-column field="OrderDate" headerText="OrderDate" width="80" [textAlign]="right"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="80" [textAlign]="right"></e-column>
        <e-column field="Freight" format="{0:C2}" width="80" [textAlign]="right"></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.right=ej.TextAlign.Right;
this.summaryRows=[{title: "Sum",titleColumn: "EmployeeID",summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight"}]}];

textWrapSettings `object`

Gets or sets an object that indicates whether to auto wrap the grid header or content or both

textWrapSettings.wrapMode `enum`

This specifies the grid to apply the auto wrap for grid content or header or both.

Default Value:

ej.Grid.WrapMode.Both

Name	Description
Both	Auto wrap is applied for both content and header.
Content	Auto wrap is applied only for content.
Header	Auto wrap is applied only for header.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" allowTextWrap="true" [textWrapSettings]="textWrapSettings" >
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.textWrapSettings={wrapMode: ej.Grid.WrapMode.Both};

toolbarSettings `object`

Gets or sets an object that indicates whether to enable the toolbar in the grid and add toolbar items

toolbarSettings.customToolbarItems `array`

Gets or sets a value that indicates whether to add custom toolbar items within the toolbar to perform any action in the grid

Default Value:

[]

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  [toolbarSettings]="toolbarSettings" >
</ej-grid>
<style type="text/css" class="cssStyles">
        .expand:before {
            content: "\e627";
        }
</style>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={showToolbar:true,customToolbarItems:["expand"]};

toolbarSettings.customToolbarItems-templateID `string`

Gets or sets a value that indicates whether to add custom toolbar item as a template element.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  [toolbarSettings]="toolbarSettings" >
</ej-grid>
<script id="Refresh" type="text/x-jsrender">
    <a  class="e-toolbaricons e-icon refresh" />
</script>
<style type="text/css" class="cssStyles">
        .refresh:before {
            content: "\e677";
        }
</style>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={showToolbar:true,customToolbarItems:[{templateID: "#Refresh"}]};

toolbarSettings.customToolbarItems-tooltip `string`

Gets or sets a value that indicates whether to add custom toolbar item with a custom tooltip.

Default Value:

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData"  [toolbarSettings]="toolbarSettings" >
</ej-grid>
<script id="Refresh" type="text/x-jsrender">
    <a  class="e-toolbaricons e-icon refresh" />
</script>
<style type="text/css" class="cssStyles">
        .refresh:before {
            content: "\e677";
        }
</style>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.toolbarSettings={showToolbar:true,customToolbarItems:[{templateID: "#Refresh", tooltip: "Refresh Grid"}]};

toolbarSettings.showToolbar `boolean`

Gets or sets a value that indicates whether to enable toolbar in the grid.

Default Value:

false

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowEditing: true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","update","cancel"]};

toolbarSettings.toolbarItems `array`

Gets or sets a value that indicates whether to add the default editing actions as a toolbar items

Default Value:

[]

Name	Description
Add	Toolbar item is add.
Edit	Toolbar item is edit.
Delete	Toolbar item is delete.
Update	Toolbar item is update.
Cancel	Toolbar item is cancel.
Search	Toolbar item is search.
PdfExport	Toolbar item is pdfExport.
PrintGrid	Toolbar item is printGrid.
WordExport	Toolbar item is wordExport.

Example

HTML

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true"></e-column>
        <e-column field="CustomerID" ></e-column>
        <e-column field="Freight" ></e-column>
    </e-columns>
</ej-grid>

//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = window.gridData;
this.editSettings={allowDeleting: true, allowEditing: true, allowAdding: true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["edit","add","update","delete","cancel"]};

Methods

addIgnoreOnExport(propertyNames)

Adds a grid model property which is to be ignored upon exporting.

Name	Type	Description
propertyNames	Array	Pass the array of parameters which need to be ignored on exporting

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){

    this.Grid.widget.addIgnoreOnExport("filterSettings");    // Sends a request to ignore the filterSettings property upon exporting
}

@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.

}

addIgnoreOnToolbarServerClick(propertyNames)

Adds a grid model property which is to be ignored upon OnServerToolbarClick.

Name	Type	Description
propertyNames	Array	Pass the array of parameters which need to be ignored on OnServerToolbarClick

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){

    this.Grid.widget.addIgnoreOnToolbarServerClick("filterSettings");    // Sends a request to ignore the filterSettings property upon exporting
}

@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.

}

addRecord()

Add a new record in grid control when allowAdding is set as true.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){

    this.Grid.widget.addRecord();    // Sends an add new record request to the grid
}

@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.

}

addRecord(data,[serverChange])

Add a new record in grid control when allowAdding is set as true.

Name	Type	Description
data	Array	Pass the array of added Records
serverChange	Array	optional If we pass serverChange as true, send post to server side for server action.

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.addRecord({"OrderID":12333});     // Sends an add new record request to the grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.

}

batchCancel()

Cancel the modified changes in grid control when edit mode is “batch”.

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.batchCancel();     // Cancel added, edited, and deleted changes made in grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

batchSave()

Save the modified changes to data source in grid control when edit mode is “batch”.

Returns:

void

Example

export class AppComponent {

 ngAfterViewInit(){

    this.Grid.widget.batchSave();      // Save added, edited, and deleted changes to source of data

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

cancelEdit()

Send a cancel request in grid.

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.cancelEdit();     // Sends a cancel request to the grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
  
}

calculatePageSizeByParentHeight(containerHeight)

Returns the total page size need to be displayed in grid based on the given container height. This method will also work when the property allowTextWrap as true only when wrap mode is header.

Name	Type	Description
containerHeight	number	When passing the container height as integer or percentage, it will returns the page size that need to be displayed for grid.

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.calculatePageSizeByParentHeight(400);  
   
}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance. 

}

clearCellSelection()

It is used to clear all the cell selection.

Returns:

boolean

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.clearCellSelection();    // clears all of the cell selection

}

@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.

}

clearCellSelection(rowIndex,columnIndex)

It is used to clear specified cell selection based on the rowIndex and columnIndex provided.

Name	Type	Description
rowIndex	number	It is used to pass the row index of the cell
columnIndex	number	It is used to pass the column index of the cell.

Returns:

boolean

Example

export class AppComponent {
  
ngAfterViewInit(){

    this.Grid.widget.clearCellSelection(1,2);     // clears specified the cell selection

  }

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

clearColumnSelection([index])

It is used to clear all the row selection or at specific row selection based on the index provided.

Name	Type	Description
index	number	optional If index of the column is specified then it will remove the selection from the particular column else it will clears all of the column selection

Returns:

boolean

Example

export class AppComponent {

  ngAfterViewInit(){

    this.Grid.widget.clearColumnSelection(2);    // Removes the selection based on the column index
    this.Grid.widget.clearColumnSelection();    // clears all of the column selection

   }

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

clearFiltering(field)

It is used to clear all the filtering done.

Name	Type	Description
field	string	If field of the column is specified then it will clear the particular filtering column

Returns:

void

Example

export class AppComponent {
 
 ngAfterViewInit(){
 
    this.Grid.widget.clearFiltering();    // clears all the filtering
    this.Grid.widget.clearFiltering("EmployeeID");   //clears the filtering based on the fieldName passed

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

clearSearching()

Clear the searching from the grid

Returns:

void

Example

export class AppComponent {

 ngAfterViewInit(){

    this.Grid.widget.clearSearching();    // Clears the searching from the grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

clearSelection([index])

Clear all the row selection or at specific row selection based on the index provided

Name	Type	Description
index	number	optional If index of the row is specified then it will remove the selection from the particular row else it will clears all of the row selection

Returns:

boolean

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.clearSelection(2);    // Removes the selection based on the row index
    this.Grid.widget.clearSelection();     // clears all of the row selection
 
}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

clearSorting()

Clear the sorting from columns in the grid

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.clearSorting();    // Clears the sorting from columns in the grid
  
}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

collapseAll()

Collapse all the group caption rows in grid

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.collapseAll();    // Collapse all the group caption rows

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

collapseGroupDropArea()

Collapse the group drop area in grid

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.collapseGroupDropArea();    // Collapse the group drop area of the grid
}
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

columns(columnDetails, [action])

Add or remove columns in grid column collections

Name	Type	Description
columnDetails	array/string	Pass array of columns or string of field name to add/remove the column in grid
action	string	optional Pass add/remove action to be performed. By default "add" action will perform

Returns:

void

Example

export class AppComponent {

 ngAfterViewInit(){

    this.Grid.widget.columns("OrderID", "remove");    // remove grid column
    this.Grid.widget.columns("OrderID", "add");      // Add new column into grid or modified already existing column in the grid.

   }

   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

   }

dataSource(datasource,[templateRefresh])

Refresh the grid with new data source

Name	Type	Description
datasource	object	Pass new data source to the grid
templateRefresh	boolean	optional When templateRefresh is set true, both header and contents get refreshed

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){
    
    this.Grid.widget.dataSource(data);    // Refreshes the grid data source
}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

deleteRecord(fieldName, data)

Delete a record in grid control when allowDeleting is set as true

Name	Type	Description
fieldName	string	Pass the primary key field Name of the column
data	array	Pass the JSON data of record need to be delete.

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });       // Sends a delete record request to the grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

deleteRow($tr)

Delete the row based on the given tr element in grid.

Name	Type	Description
$tr	jQuery	Pass the tr element in grid content to get its row index

Returns:

element

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.deleteRow($(".gridcontent tr").first());       // Sends a delete record request to the grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

destroy()

Destroy the grid widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Returns:

void

Example

export class AppComponent {

ngAfterViewInit(){

    this.Grid.widget.destroy();     // destroy the Grid

}

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

editCell(index, fieldName)

Edit a particular cell based on the row index and field name provided in “batch” edit mode.

Name	Type	Description
index	number	Pass row index to edit particular cell
fieldName	string	Pass the field name of the column to perform batch edit

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.editCell(2, "EmployeeID");   // Edit particular cell based on row index and column field name
}
@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.
}

editFormValidate()

It returns a value and if the input field values of edit form is not based on the validation rules then it will show the validation message.

Returns:

boolean

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.editFormValidate();   // Edit particular cell based on row index and column field name
}
@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.
}

endEdit()

Send a save request in grid.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.endEdit();    // Sends a save request to the grid
}
@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.
}

expandAll()

Expand all the group caption rows in grid.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.expandAll();    // Expand all the group caption rows
}
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

expandCollapse($target)

Expand or collapse the row based on the row state in grid

Name	Type	Description
$target	jQuery	Pass the target object to expand/collapse the row based on its row state

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.expandCollapse($("tr td.e-recordplusexpand > div").first());    // Expands or collapses the row based on the row state
}
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

expandGroupDropArea()

Expand the group drop area in grid.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.expandGroupDropArea();     // Expands the group drop area of the grid
}
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

export(action, [serverEvent], [multipleExport], [gridIds])

Export the grid content to excel, word or PDF document.

Name	Type	Description
action	string	Pass the controller action name corresponding to exporting
serverEvent	string	optionalASP server event name corresponding to exporting
multipleExport	boolean	optionalPass the multiple exporting value as true/false
gridIds	array	optionalPass the array of the gridIds to be filtered

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.export("/api/GridExport/ExcelExport");  // Sends an exporting request
}
@ViewChild('grid') Grid: EJComponents<any, any>;  // Create grid instance.
}

export(action, [serverEvent], [multipleExport])

Export the grid content to excel, word or PDF document.

Name	Type	Description
action	string	Pass the controller action name corresponding to exporting
serverEvent	string	optionalASP server event name corresponding to exporting
multipleExport	boolean	optionalPass the multiple exporting value as true/false

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.export("/api/GridExport/ExcelExport");    // Sends an exporting request
}
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

filterColumn(fieldName, filterOperator, filterValue, predicate, [matchcase],[actualFilterValue])

Send a filtering request to filter one column in grid.

Name	Type	Description
fieldName	array	Pass the field name of the column
filterOperator	string	string/integer/dateTime operator
filterValue	string	Pass the value to be filtered in a column
predicate	string	Pass the predicate as and/or
matchcase	boolean	optional Pass the match case value as true/false
actualFilterValue	object	optionalactualFilterValue denote the filter object of current filtered columns. Pass the value to filtered in a column

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.filterColumn("OrderID","equal","10248","and", true);    // Sends a filtering request to the grid
}
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

filterColumn(filterCollection)

Send a filtering request to filter single or multiple column in grid.

Name	Type	Description
filterQueries	array	Pass array of filterColumn query for performing filter operation

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.filterColumn([{field:"OrderID",operator:"lessthan",value:"10266",predicate:"and", matchcase:true},{field:"EmployeeID",operator:"equal",value:2,predicate:"and", matchcase:true}]);      // Sends a filtering request to the grid 
   }
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

getBatchChanges()

Get the batch changes of edit, delete and add operations of grid.

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getBatchChanges();    // Gets the edit, delete, and add changes of a grid
}
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getBrowserDetails()

Get the browser details

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getBrowserDetails();    // Gets the browser details of the application being run
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getColumnByField(fieldName)

Get the column details based on the given field in grid

Name	Type	Description
fieldName	string	Pass the field name of the column to get the corresponding column object

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getColumnByField("OrderID");   // Gets the column details based on the given field name
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getColumnByHeaderText(headerText)

Get the column details based on the given header text in grid.

Name	Type	Description
headerText	string	Pass the header text of the column to get the corresponding column object

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getColumnByHeaderText("Order ID");    // Gets the column details based on the given headerText
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getColumnByIndex(columnIndex)

Get the column details based on the given column index in grid

Name	Type	Description
columnIndex	number	Pass the index of the column to get the corresponding column object

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getColumnByIndex(1);   // Gets the column details based on the given column index
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getColumnFieldNames()

Get the list of field names from column collection in grid.

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getColumnFieldNames();   // Gets the column field names based on the given index
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getColumnIndexByField(fieldName)

Get the column index of the given field in grid.

Name	Type	Description
fieldName	string	Pass the field name of the column to get the corresponding column index

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getColumnIndexByField("OrderID");   // Gets the column index based on the given field name
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getContent()

Get the content div element of grid.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getContent();    // Gets content of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getContentTable()

Get the content table element of grid

Returns:

Array<HTMLTableElement>

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getContentTable();    // Gets content table of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getCurrentEditCellData()

Get the data of currently edited cell value in “batch” edit mode

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getCurrentEditCellData();    // Get data of currently edited cell value
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getCurrentIndex()

Get the current page index in grid pager.

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getCurrentIndex(); // Gets the current page index in grid
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getCurrentViewData()

Get the current page data source of grid.

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getCurrentViewData();       // Gets current view data of grid control 
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getDataByIndex(rowIndex)

Get the data of given row index in grid.

NOTE

It will work only for batch edit mode.

Returns:

object

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getDataByIndex(0);        // Gets current view data of grid control 
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

HTML

<script>
// Gets data of corresponding row index in grid control
$("#Grid").ejGrid("getDataByIndex",0);        
</script>

getFieldNameByHeaderText(headerText)

Get the column field name from the given header text in grid.

Name	Type	Description
headerText	string	Pass header text of the column to get its corresponding field name

Returns:

string

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getFieldNameByHeaderText("Order ID");   // Gets the column field name from the given headerText
}  

@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.

}

getFilterBar()

Get the filter bar of grid

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getFilterBar();   // Gets filter bar of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getFilteredRecords()

Get the records filtered or searched in Grid

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getFilteredRecords();   // Gets the filtered or searched records in Grid
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getFooterContent()

Get the footer content of grid.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getFooterContent();   // Gets grid footer content of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getFooterTable()

Get the footer table element of grid.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getFooterTable();    // Gets grid footer table of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getHeaderContent()

Get the header content div element of grid.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getHeaderContent();    // Gets grid header content of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getHeaderTable()

Get the header table element of grid

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getHeaderTable();     // Gets header table of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getHeaderTextByFieldName(field)

Get the column header text from the given field name in grid.

Name	Type	Description
field	string	Pass field name of the column to get its corresponding header text

Returns:

string

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getHeaderTextByFieldName();   // Gets the column header text from the given field name
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getHiddenColumnNames()

Get the names of all the hidden column collections in grid.

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getHiddenColumnNames();   // Gets names of all the hidden column collections
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getIndexByRow($tr)

Get the row index based on the given tr element in grid.

Name	Type	Description
$tr	jQuery	Pass the tr element in grid content to get its row index

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getIndexByRow($(".e-gridcontent tr").first());        // Gets the row index based on the given row
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getPager()

Get the pager of grid.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getPager();    // Gets grid pager of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getPrimaryKeyFieldNames()

Get the names of primary key columns in Grid

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getPrimaryKeyFieldNames();    // Gets the names of primary key columns
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getRowByIndex(from, to)

Get the rows(tr element) from the given from and to row index in grid

Name	Type	Description
from	number	Pass the from index from which the rows to be returned
to	number	Pass the to index to which the rows to be returned

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getRowByIndex(3,6);   // Gets the rows from the specified row index 
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

getRowHeight()

Get the row height of grid.

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getRowHeight();    // Gets the row height of the grid
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getRows()

Get the rows(tr element)of grid which is displayed in the current page.

Returns:

Element

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getRows();   // Gets grid rows of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getScrollObject()

Get the scroller object of grid.

Returns:

ej.Scroller

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getScrollObject();    // Gets scroll object of grid control
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getSelectedRecords()

Get the selected records details in grid.

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getSelectedRecords();   // Gets the selected row list
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getSelectedRows()

Get the selected row element details in grid.

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getSelectedRows();   // Gets the selected row list
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

HTML

<script>
// Gets the selected row element list
$("#Grid").ejGrid("getSelectedRows");        
</script>

getsortColumnByField(field)

It accepts the string value and returns the field and sorted direction of the column in grid.

Name	Type	Description
field	string	Pass the field of the column to get the sorted direction of the corresponding column in Grid.

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getsortColumnByField("OrderID");   // Gets the selected row list
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getSummaryValues(summaryCol, summaryData)

Get the calculated summary values of JSON data passed to it

Name	Type	Description
summaryCol	object	Pass Summary Column details
summaryData	object	Pass JSON Array for which its field values to be calculated

Returns:

number

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getSummaryValues();    // Get the calculated summary values of JSON data passed to it
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

getVisibleColumnNames()

Get the names of all the visible column collections in grid

Returns:

array

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.getVisibleColumnNames();    // Gets the names of all the visible column collections
}  
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

gotoPage(pageIndex)

Send a paging request to specified page in grid

Name	Type	Description
pageIndex	number	Pass the page index to perform paging at specified page index

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.gotoPage(5);     // Sends a paging request to the grid with specified page index
} 
@ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
}

groupColumn(fieldName)

Send a column grouping request in grid.

Name	Type	Description
fieldName	string	Pass the field Name of the column to be grouped in grid control

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.groupColumn("OrderID");   // Sends a group column request to the grid
} 
@ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
}

hideColumns(headerText)

Hide columns from the grid based on the header text

Name	Type	Description
headerText	array/string	you can pass either array of header text of various columns or a header text of a column to hide

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.hideColumns("EmployeeID");  // Hides column based on the given header text of the column
    this.Grid.widget.hideColumns(["Order ID", "Customer ID"]);    // Hide columns based on the array of header text of the columns given
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

hideColumns(columnIndex)

Hide columns from the grid based on the columnIndex.

Name	Type	Description
columnIndex	array/number	you can pass either array of columnIndex of various columns or a columnIndex of a column to hide

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.hideColumns(0);  // Hides column based on the given column Index of the column
    this.Grid.widget.hideColumns([0,1]);    // Hide columns based on the array of column Indexes of the columns given
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

print()

Print the grid control

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.print();    // It prints the grid.
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

refreshBatchEditChanges()

It is used to refresh and reset the changes made in “batch” edit mode

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshBatchEditChanges();   // It is used to refresh and reset the changes made in batch edit mode
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

refreshHeader()

Refresh the grid header.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshHeader();   // Refreshes the grid Header.
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance. 
   }

refreshContent([templateRefresh])

Refresh the grid contents. The template refreshment is based on the argument passed along with this method

Name	Type	Description
templateRefresh	boolean	optional When templateRefresh is set true, template and grid contents both are refreshed in grid else only grid content is refreshed

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshContent();   // Refreshes the grid contents only
    this.Grid.widget.refreshContent(true);   // Refreshes the template and grid contents
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance. 
   }

refreshData([additionalParameters])

Refresh the grid contents with updated server Data, using XMLHttpRequest. Url Path should be provided in Grid datasource otherwise it refreshes with local data without XMLHttpRequest.

NOTE

It is applicable only for Grid with remoteSaveAdaptor.

Name	Type	Description
additionalParameters	object	optionalData to the server

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshData();   // Refreshes the grid contents with data from server
    this.Grid.widget.refreshData("additionalParameter");   // Refreshes the grid contents with data from server by passing parameter to server
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance. 
   }

refreshTemplate()

Refresh the template of the grid

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshTemplate();   // Refreshes the template of the grid control
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

refreshToolbar()

Refresh the toolbar items in grid.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.refreshToolbar();   // Refreshes the toolbar items state

   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

removeSortedColumns(fieldName)

Remove a column or collection of columns from a sorted column collections in grid.

Name	Type	Description
fieldName	array/string	Pass array of field names of the columns to remove a collection of sorted columns or pass a string of field name to remove a column from sorted column collections

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.removeSortedColumns("OrderID");    // Removes a column from sorted column collections
    this.Grid.widget.removeSortedColumns(["CustomerID","ShipCity"]);   // Removes specified collection of columns from sorted column collections
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

render()

Creates a grid control

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.render();   // It renders the grid.
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

reorderColumns(fromFieldName, toFieldName)

Re-order the column in grid

Name	Type	Description
fromFieldName	string	Pass the from field name of the column needs to be changed
toFieldName	string	Pass the to field name of the column needs to be changed

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.reorderColumns("OrderID","CustomerID");   // Reorders the column based on the given index
 
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

reorderRows(indexes, toIndex)

Re-order the row in grid

Name	Type	Description
indexes	Array	Pass the indexes of the rows needs to reorder.
toIndex	Number	Pass the index of a row where to be reordered.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.reorderRows([0,1],3);    // Reorders the column based on the given index
 
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

resetModelCollections()

Reset the model collections like pageSettings, groupSettings, filterSettings, sortSettings and summaryRows.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.resetModelCollections();    // Reset model collections
     
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

resizeColumns(column,width)

Resize the columns by giving column name and width for the corresponding one.

Name	Type	Description
column	string	Pass the column name that needs to be changed
width	string	Pass the width to resize the particular columns

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.resizeColumns("OrderID",width);   // ResizeColumns
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

rowHeightRefresh()

Resolves row height issue when unbound column is used with FrozenColumn

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.rowHeightRefresh();   // Resolves row height issue
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

saveCell()

Save the particular edited cell in grid.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.saveCell();   // Save the edited cell
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

saveCell(preventSaveEvent)

We can prevent the client side cellSave event triggering by passing the preventSaveEvent argument as true.

Name	Type	Description
preventSaveEvent	boolean	optionalIf we pass preventSaveEvent as true, it prevents the client side cellSave event triggering

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.saveCell(true);   // Prevent save the edited cell
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setDimension(height, width)

Set dimension for grid with corresponding to grid parent.

Name	Type	Description
height	number	Pass the height of the grid container
width	number	Pass the width of the grid container

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setDimension(300,400);   // Set grid dimension
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setWidthToColumns()

Send a request to grid to refresh the width set to columns

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setWidthToColumns();   // Sends a request to the grid to refresh columns width
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

search(searchString)

Send a search request to grid with specified string passed in it

Name	Type	Description
searchString	string	Pass the string to search in Grid records

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.search("FRANCE");   // Sends a search request to the grid
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;     // Create grid instance.
   }

selectCells(rowCellIndexes)

Select cells in grid.

Name	Type	Description
rowCellIndexes	object	It is used to set the starting index of row and indexes of cells for that corresponding row for selecting cells.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectCells([[1, [4, 3, 2]]]);  // Selects cells based on the given index
    
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;     // Create grid instance.
   }

selectColumns(fromIndex)

Select columns in grid.

Name	Type	Description
fromIndex	number	It is used to set the starting index of column for selecting columns.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectColumns(3);    // Selects columns based on the given index
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

selectColumns(columnIndex,[toIndex])

Select the specified columns in grid based on Index provided.

Name	Type	Description
columnIndex	number	It is used to set the starting index of column for selecting columns.
toIndex	number	optionalIt is used to set the ending index of column for selecting columns.

Returns:

boolean

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectColumns(1,4);   // Selects columns based on the given index
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

selectRows(fromIndex, toIndex)

Select rows in grid.

Name	Type	Description
fromIndex	number	It is used to set the starting index of row for selecting rows.
toIndex	number	It is used to set the ending index of row for selecting rows.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectRows(1,4);   // Selects rows based on the given index
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

selectRows(from,to,[target])

Select specified rows in grid based on Index provided.

Name	Type	Description
from	array/number	It is used to set the starting index of row for selecting rows.
to	number	optionalIt is used to set the ending index of row for selecting rows.
target	object	optionalTarget element which is clicked.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectRows(1,4);   // Selects rows based on the given index
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

selectRows(rowIndexes)

Select rows in grid.

Name	Type	Description
rowIndexes	array	Pass array of rowIndexes for selecting rows

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.selectRows([1,3,5,7]);    // Selects rows based on the given index
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setCellText()

Used to update a particular cell value.

NOTE

It will work only for Local Data.This method applicable for all editMode’s except batch edit mode.

setCellText(rowIndex, cellIndex, value)

Used to update a particular cell value based on specified rowIndex and cellIndex values.

Name	Type	Description
rowIndex	string/number	It is used to set the index of row.
cellIndex	string/number	It is used to set the index of cell.
value	string/number	It is used to set the value for the cell based on specified row and cell Index.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setCellText(0,1,"GREYER");   // update a particular cell value
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setCellText(primaryKeyValue, field, value)

Used to update a particular cell value based on specified primary key value and field name

Name	Type	Description
primaryKeyValue	string	It is used to set the primary key value for selecting the corresponding row cell.
field	string	It is used to set the field name for selecting the corresponding column cell.
value	object	It is used to set the value for the cell based on specified primaryKeyValue and field name.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setCellText(10248,"EmployeeID","GREYER");   // update a particular cell value
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setCellValue(index, fieldName, cellValue)

Used to update a particular cell value based on specified row Index and the fieldName.

NOTE

It will working only for batch edit mode.

Name	Type	Description
Index	number	It is used to set the index for selecting the row.
fieldName	string	It is used to set the field name for selecting column.
value	object	It is used to set the value for the selected cell.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setCellValue(1,"EmployeeID","GREYER");   //Used to update a particular cell value
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setDefaultData(defaultData)

It sets the default data to the column in grid during adding record in batch edit mode.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){

    var defaultData = {OrderID:"10000"};
       //Set the default date to the column in grid.
    
    this.Grid.widget.setDefaultData(defaultData);   //Used to update a particular cell value
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

setPhoneModeMaxWidth(value)

The grid rows has to be rendered as detail view in mobile mode based on given value.

NOTE

Need to set same value for max-width in ejgrid.responsive.css file

Name	Type	Description
Index	number	It is used to render grid rows as details view in mobile mode.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setPhoneModeMaxWidth(500);    //Used to render grid rows as details view in mobile mode
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;     // Create grid instance.
   }

setValidation()

Set validation to edit form in the grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It is used to set validation to columns.
gridObj.setValidation(); 
</script>

HTML

<script>
// It is used to set validation to columns.
$("#Grid").ejGrid("setValidation");
</script>

setValidationToField(fieldName, rules)

Set validation to a field during editing.

Name	Type	Description
fieldName	string	Specify the field name of the column to set validation rules
rules	object	Specify the validation rules for the field

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.setValidation();    // It is used to set validation to a field during editing
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

showColumns(headerText)

Show columns in the grid based on the header text

Name	Type	Description
headerText	array/string	you can pass either array of header text of various columns or a header text of a column to show

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.showColumns("Order ID");   // Shows column based on the given header text of the column
    this.Grid.widget.showColumns(["Order ID", "Customer ID"]);   // Shows columns based on the array of header text of the columns given
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;     // Create grid instance.
   }

showColumns(columnIndex)

Show columns in the grid based on the columnIndex.

Name	Type	Description
columnIndex	array/number	you can pass either array of columnIndex of various columns or a column Index of a column to show

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.showColumns(0);   // Shows column based on the given column Index of the column
    this.Grid.widget.showColumns([0,1]);   // Shows columns based on the array of column Indexes of the columns given
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;     // Create grid instance.
   }

sortColumn(columnName, [sortingDirection])

Send a sorting request in grid.

Name	Type	Description
columnName	string	Pass the field name of the column as columnName for which sorting have to be performed
sortingDirection	string	optional Pass the sort direction ascending/descending by which the column have to be sort. By default it is sorting in an ascending order

Returns:

void

Example

export class AppComponent {
ngAfterViewInit(){
    
    this.Grid.widget.sortColumn("OrderID","ascending");    // Sends a sorting request to the grid with specified columnName and sortDirection
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

startEdit($tr)

Send an edit record request in grid

Name	Type	Description
$tr	jQuery	Pass the tr- selected row element to be edited in grid

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.startEdit($(".gridcontent tr").first());    // Sends an edit record request to the grid
   
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

ungroupColumn(fieldName)

Un-group a column from grouped columns collection in grid

Name	Type	Description
fieldName	string	Pass the field Name of the column to be ungrouped from grouped column collection

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.ungroupColumn("Order ID");   // Sends an ungroup column request to the grid
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

updateRecord(fieldName, data)

Update a edited record in grid control when allowEditing is set as true.

Name	Type	Description
fieldName	string	Pass the primary key field Name of the column
data	array	Pass the edited JSON data of record need to be update.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 });    // Sends a update record request to the grid
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;   // Create grid instance.
   }

windowonresize()

It adapts grid to its parent element or to the browsers window.

Returns:

void

Example

export class AppComponent {
    
ngAfterViewInit(){
    
    this.Grid.widget.windowonresize();     // Used for resizing the grid window
   }
   @ViewChild('grid') Grid: EJComponents<any, any>;    // Create grid instance.
   }

Events

actionBegin

Triggered for every grid action before its starts.

Name

Type

Description

argument

Object

Event parameters when grid is initialized:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid paging action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentPage	number	Returns the current selected page number.
previousPage	number	Returns the previous selected page number.
endIndex	number	Returns the end row index of that current page.
model	object	Returns the grid model.
requestType	string	Returns request type.
startIndex	number	Returns the start row index of that current page.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid sorting action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current grouped column field name.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.
columnSortDirection	string	Returns the column sort direction.

argument

Object

Event parameters when grid grouping action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current grouped column field name.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid record editing action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
row	object	Returns current edited row.
model	object	Returns the grid model.
originalEventType	string	Returns the current action event type.
primaryKey	string	Returns primary key.
primaryKeyValue	string	Returns primary key value.
requestType	string	Returns request type.
rowIndex	number	Returns the edited row index.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid record save action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
selectedRow	number	Returns the selected row index.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid record cancel action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid record delete action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
requestType	string	Returns request type.
tr	object	Returns selected row for delete.
type	string	Returns the name of the event.

argument

Object

Event parameters when add new record action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid filtering action starts:

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentFilteringColumn	object	Returns current filtering column field name.
currentFilterObject	object	Returns current filtering object.
filterCollection	object	Returns filter details.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterbeforeopen"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns current column field name.
columnType	string	Returns type of the column like number, string and so on.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterbeforeopen".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterchoicerequest"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
dataSource	object	Returns the dataSource.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
query	object	Returns the query manager.
requestType	string	Returns request type as "filterchoicerequest".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterchoicesearch"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
dataSource	object	Returns the dataSource.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
query	object	Returns the query manager.
requestType	string	Returns request type as "filterchoicesearch".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterbeforeopen"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns current column field name.
columnType	string	Returns type of the column like number, string and so on.
filtermodel	object	Returns the excel filter model.
isCustomFilter	boolean	Returns the custom filter option value.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterbeforeopen".
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (actionBegin)="onActionBegin($event)">

onActionBegin(e: any){ 
             //Do Something.
  }

actionComplete

Triggered for every grid action success event.

Name

Type

Description

argument

Object

Arguments in actionComplete when grid is initialized.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.

argument

Object

Arguments in actionComplete after grid paging action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentPage	number	Returns the current selected page number.
previousPage	number	Returns the previous selected page number.
endIndex	number	Returns the end row index of that current page.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
startIndex	number	Returns the start row index of the current page.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid sorting action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current sorted column field name.
columnSortDirection	string	Returns the column sort direction.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid grouping action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current grouped column field name.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid record editing action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
row	object	Returns current edited row.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
primaryKey	string	Returns primary key.
primaryKeyValue	string	Returns primary key value.
requestType	string	Returns request type.
rowIndex	number	Returns the edited row index.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid record save action is completed.

Name	Type	Description
cancel	object	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
selectedRow	number	Returns the selectedRow index.
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid record cancel action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid record delete action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
tr	object	Returns selected row for delete.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after add new record action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns empty record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

object

Arguments in actionComplete after grid filtering action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentFilteringColumn	string	Returns current filtering column field name.
currentFilterObject	object	Returns current filtering object.
filterCollection	object	Returns filter details.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterchoicerequest"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
dataSource	object	Returns the dataSource.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterchoicerequest".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterafteropen"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns current column field name.
columnType	string	Returns type of the column like number, string and so on.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterafteropen".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterchoicesearch"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
dataSource	object	Returns the dataSource.
filtermodel	object	Returns the excel filter model.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterchoicesearch".
type	string	Returns the name of the event.

argument

Object

Event parameters when grid request type as "filterafteropen"

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns current column field name.
columnType	string	Returns type of the column like number, string and so on.
filtermodel	object	Returns the excel filter model.
isCustomFilter	boolean	Returns the custom filter option value.
model	object	Returns the grid model.
requestType	string	Returns request type as "filterafteropen".
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (actionComplete)="onActionComplete($event)">

onActionComplete(e: any){ 
             //Do Something.
  }

actionFailure

Triggered for every grid action server failure event.

Name

Type

Description

argument

Object

Arguments in actionFailure when grid is initialized.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
requestType	string	Returns request type.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

Object

Arguments in actionFailure after grid paging action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentPage	number	Returns the current selected page number.
previousPage	number	Returns the previous selected page number.
endIndex	number	Returns the end row index of that current page.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
startIndex	number	Returns the start row index of the current page.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid sorting action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current sorted column field name.
columnSortDirection	string	Returns the column sort direction.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid grouping action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
columnName	string	Returns the current grouped column field name.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid record editing action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
row	object	Returns current edited row.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
primaryKey	string	Returns primary key.
primaryKeyValue	string	Returns primary key value.
requestType	string	Returns request type.
rowIndex	number	Returns the edited row index.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid record save action is completed.

Name	Type	Description
cancel	object	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
selectedRow	number	Returns the selectedRow index.
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid record delete action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns the record object (JSON).
rowData	object	Returns the record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
tr	object	Returns selected row for delete.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after add new record action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns empty record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

argument

object

Arguments in actionFailure after grid filtering action is completed.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentFilteringColumn	string	Returns current filtering column field name.
currentFilterObject	object	Returns current filtering object.
filterCollection	object	Returns filter details.
model	object	Returns the grid model.
originalEventType	string	Returns current action event type.
requestType	string	Returns request type.
target	object	Returns grid element.
type	string	Returns the name of the event.
error	object	Returns the error return by server.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (actionFailure)="onActionFailure($event)">

onActionFailure(e: any){ 
             //Do Something.
  }

batchAdd

Triggered when record batch add.

Name

Type

Description

argument

Object

Arguments when batchAdd event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
defaultData	object	Returns deleted data.
type	string	Returns the name of the event.
columnObject	object	Returns the column object.
columnIndex	number	Returns the column index.
row	object	Returns the row element.
primaryKey	object	Returns the primaryKey.
cell	object	Returns the cell object.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (batchAdd)="onBatchAdd($event)">

onBatchAdd(e: any){ 
                 //Do Something.
  }

batchDelete

Triggered when record batch delete.

Name

Type

Description

argument

Object

Arguments when batchDelete event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
rowData	object	Returns deleted data.
type	string	Returns the name of the event.
primaryKey	object	Returns the primary key.
rowIndex	number	Returns the row Index.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (batchDelete)="onBatchDelete($event)">

onBatchDelete(e: any){ 
             //Do Something.
  }

beforeBatchAdd

Triggered before the batch add.

Name

Type

Description

argument

Object

Arguments when beforeBatchAdd event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.
defaultData	object	Returns the default data object.
primaryKey	object	Returns the primaryKey.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beforeBatchAdd)="OnBeforeBatchAdd($event)">

onBeforeBatchAdd(e: any){ 
             //Do Something.
  }

beforeBatchDelete

Triggered before the batch delete.

Name

Type

Description

argument

Object

Arguments when beforeBatchDelete event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
primaryKey	object	Returns the primaryKey.
rowIndex	number	Returns the row index.
rowData	object	Returns the row data.
row	object	Returns the row element.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beforeBatchDelete)="OnBeforeBatchDelete($event)">

onBeforeBatchDelete(e: any){ 
             //Do Something.
  }

beforeBatchSave

Triggered before the batch save.

Name

Type

Description

argument

Object

Arguments when beforeBatchSave event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
batchChanges	object	Returns the changed record object.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beforeBatchSave)="onBeforeBatchSave($event)">

onBeforeBatchSave(e: any){ 
             //Do Something.
  }

beforePrint

Triggered before the print.

Name

Type

Description

argument

Object

Arguments when beforePrint event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
element	object	Returns the Grid element.
selectedRows	object	Returns the selected records.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beforePrint)="onbeforePrint($event)">

onbeforePrint(e: any){ 
             //Do Something.
  }

beforeRowDrop

Triggered before row drop in the grid

Name

Type

Description

argument

Object

Arguments when beforeRowDrop event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
target	object	Returns the targeted row.
targetIndex	object	Returns the targeted row index.
draggedRecords	object	Returns the dragged record details
dropDetails	object	Returns the drop details

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beforeRowDrop)="onbeforeRowDrop($event)">

onbeforeRowDrop(e: any){ 
             //Do Something.
  }

beginEdit

Triggered before the record is going to be edited.

Name

Type

Description

argument

Object

Arguments when beginEdit event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
row	object	Returns the current edited row.
model	object	Returns the grid model.
primaryKey	object	Returns the primary key.
primaryKeyValue	object	Returns the primary key value.
rowIndex	number	Returns the edited row index.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (beginEdit)="onBeginEdit($event)">

onBeginEdit(e: any){ 
             //Do Something.
  }

cellEdit

Triggered when record cell edit.

Name

Type

Description

argument

Object

Arguments when cellEdit event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
validationRules	object	Returns the validation rules.
columnName	string	Returns the column name.
value	string	Returns the cell value.
rowData	object	Returns the row data object.
previousValue	string	Returns the previous value of the cell.
columnObject	object	Returns the column object.
cell	object	Returns the cell object.
isForeignKey	boolean	Returns isForeignKey option value.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellEdit)="onCellEdit($event)">

onCellEdit(e: any){ 
             //Do Something.
  }

cellSave

Triggered when record cell save.

Name

Type

Description

argument

Object

Arguments when cellSave event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
columnName	string	Returns the column name.
value	string	Returns the cell value.
rowData	object	Returns the row data object.
previousValue	string	Returns the previous value of the cell.
columnObject	object	Returns the column object.
cell	object	Returns the cell object.
isForeignKey	boolean	Returns isForeignKey option value.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellSave)="onCellSave($event)">

onCellSave(e: any){ 
             //Do Something.
  }

cellSelected

Triggered after the cell is selected.

Name

Type

Description

argument

Object

Arguments when cellSelecting event is triggered.

Name	Type	Description
cellIndex	number	Returns the selected cell index value.
previousRowCellIndex	number	Returns the previous selected cell index value.
currentCell	object	Returns the selected cell element.
previousRowCell	object	Returns the previous selected cell element.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
selectedRowCellIndex	array	Returns the selected row cell index values.
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellSelected)="onCellSelected($event)">

onCellSelected(e: any){ 
             //Do Something.
  }

cellSelecting

Triggered before the cell is going to be selected.

Name

Type

Description

argument

Object

Arguments when cellSelecting event is triggered.

Name	Type	Description
cellIndex	number	Returns the selected cell index value.
previousRowCellIndex	number	Returns the previous selected cell index value.
currentCell	object	Returns the selected cell element.
previousRowCell	object	Returns the previous selected cell element.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
previousRowCellIndex	array	Returns the previously selected row cell index values
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while selecting cell
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while selecting cell
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellSelecting)="onCellSelecting($event)">

onCellSelecting(e: any){ 
             //Do Something.
  }

cellDeselected

Triggered after the cell is deselected.

Name

Type

Description

argument

Object

Arguments when cellDeselected event is triggered.

Name	Type	Description
cellIndex	number	Returns the deselected cell index value.
currentCell	object	Returns the deselected cell element.
selectedData	object	Returns current record object (JSON).
data	object	Returns current record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellDeselected)="onCellDeselected($event)">

onCellDeselected(e: any){ 
             //Do Something.
  }

cellDeselecting

Triggered before the cell is going to be deselected.

Name

Type

Description

argument

Object

Arguments when cellDeselecting event is triggered.

Name	Type	Description
cellIndex	number	Returns the deselecting cell index value.
currentCell	object	Returns the deselecting cell element.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while deselecting cell
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while deselecting cell
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (cellDeselecting)="onCellDeselecting($event)">

onCellDeselecting(e: any){ 
             //Do Something.
  }

columnDrag

Triggered when the column is being dragged.

Name

Type

Description

argument

Object

Arguments when columnDrag event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	object	Returns draggable element type.
column	object	Returns the draggable column object.
model	object	Returns the grid model.
target	object	Returns target elements based on mouse move position.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnDrag)="onColumnDrag($event)">

onColumnDrag(e: any){ 
             //Do Something.
  }

columnDragStart

Triggered when column dragging begins.

Name

Type

Description

argument

Object

Arguments when columnDragStart event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	object	Returns draggable element type.
column	object	Returns the draggable column object.
model	object	Returns the grid model.
target	object	Returns drag start element.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnDragStart)="onColumnDragStart($event)">

onColumnDragStart(e: any){ 
             //Do Something.
  }

columnDrop

Triggered when the column is dropped.

Name

Type

Description

argument

Object

Arguments when columnDrop event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	string	Returns draggable element type.
column	object	Returns the draggable column object.
model	object	Returns the grid model.
target	object	Returns dropped dragged element.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnDrop)="onColumnDrop($event)">

onColumnDrop(e: any){ 
             //Do Something.
  }

rowDrag

Triggered when the row is being dragged.

Name

Type

Description

argument

Object

Arguments when rowDrag event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	object	Returns draggable element type.
target	object	Returns the draggable row object.
model	object	Returns the grid model.
currentTarget	object	Returns target elements based on mouse move position.
type	string	Returns the name of the event.
data	object	Returns JSON data of dragged rows.
draggedRecords	object	Returns JSON data of dragged rows.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowDrag)="onRowDrag($event)">

onRowDrag(e: any){ 
             //Do Something.
  }

rowDragStart

Triggered when row dragging begins.

Name

Type

Description

argument

Object

Arguments when rowDragStart event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	object	Returns draggable element type.
target	object	Returns the draggable row object.
model	object	Returns the grid model.
currentTarget	object	Returns drag start element cell.
type	string	Returns the name of the event.
data	object	Returns the JSON data of dragged rows.
draggedRecords	object	Returns the JSON data of dragged rows.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowDragStart)="onRowDragStart($event)">

onRowDragStart(e: any){ 
             //Do Something.
  }

rowDrop

Triggered when the row is dropped.

Name

Type

Description

argument

Object

Arguments when rowDrop event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
draggableType	string	Returns draggable element type.
rows	object	Returns the draggable row object.
model	object	Returns the grid model.
target	object	Returns the current mouse position cell element.
type	string	Returns the name of the event.
data	object	Returns the JSON data of dragged rows.
droppedRecords	object	Returns the JSON data of dragged rows.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowDrop)="onRowDrop($event)">

onRowDrop(e: any){ 
             //Do Something.
  }

columnSelected

Triggered after the column is selected.

Name

Type

Description

argument

Object

Arguments when columnSelected event is triggered.

Name	Type	Description
columnIndex	number	Returns the selected cell index value.
previousColumnIndex	number	Returns the previous selected column index value.
headerCell	object	Returns the selected header cell element.
prevColumnHeaderCell	object	Returns the previous selected header cell element.
column	object	Returns corresponding column object (JSON).
selectedColumnsIndex	array	Returns the selected columns values.
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnSelected)="onColumnSelected($event)">

onColumnSelected(e: any){ 
             //Do Something.
  }

columnSelecting

Triggered before the column is going to be selected.

Name

Type

Description

argument

Object

Arguments when columnSelecting event is triggered.

Name	Type	Description
columnIndex	number	Returns the selected column index value.
previousColumnIndex	number	Returns the previous selected column index value.
headerCell	object	Returns the selected header cell element.
prevColumnHeaderCell	object	Returns the previous selected header cell element.
column	object	Returns corresponding column object (JSON).
previousColumnIndex	array	Returns the previously selected column index values
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while selecting cell
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while selecting cell
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnSelecting)="onColumnSelecting($event)">

onColumnSelecting(e: any){ 
             //Do Something.
  }

columnDeselected

Triggered after the column is deselected.

Name

Type

Description

argument

Object

Arguments when columnDeselected event is triggered.

Name	Type	Description
columnIndex	number	Returns the Deselected column index value.
headerCell	object	Returns the Deselected column header element.
column	object	Returns corresponding column object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnDeselected)="onColumnDeselected($event)">

onColumnDeselected(e: any){ 
             //Do Something.
  }

columnDeselecting

Triggered before the column is going to be deselected.

Name

Type

Description

argument

Object

Arguments when columnDeselecting event is triggered.

Name	Type	Description
columnIndex	number	Returns the deselecting column index value.
headerCell	object	Returns the deselecting column header element.
column	object	Returns corresponding column object (JSON).
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while deselecting column
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while deselecting column
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (columnDeselecting)="onColumnDeselecting($event)">

onColumnDeselecting(e: any){ 
             //Do Something.
  }

contextClick

Triggered when context menu item is clicked

Name

Type

Description

argument

Object

Arguments when contextClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of contextmenu item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (contextClick)="onContextClick($event)">

onContextClick(e: any){ 
             //Do Something.
  }

contextOpen

Triggered before the context menu is opened.

Name

Type

Description

argument

Object

Arguments when contextOpen event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of contextmenu item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (contextOpen)="onContextOpen($event)">

onContextOpen(e: any){ 
             //Do Something.
  }

create

Triggered when the grid is rendered completely.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (create)="onCreate($event)">

onCreate(e: any){ 
             //Do Something.
  }

dataBound

Triggered when the grid is bound with data during initial rendering.

Name

Type

Description

argument

Object

Arguments when dataBound event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (dataBound)="onDataBound($event)">

onDataBound(e: any){ 
             //Do Something.
  }

destroy

Triggered when grid going to destroy.

Name

Type

Description

argument

Object

Arguments when destroy event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (destroy)="onDestroy($event)">

onDestroy(e: any){ 
             //Do Something.
  }

detailsCollapse

Triggered when detail template row is clicked to collapse.

Name

Type

Description

argument

Object

Arguments when detailsCollapse event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsRow	object	Returns detail row element.
masterData	object	Returns master row of detail row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
masterRow	object	Returns master row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (detailsCollapse)="onDetailsCollapse($event)">

onDetailsCollapse(e: any){ 
             //Do Something.
  }

detailsDataBound

Triggered detail template row is initialized.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsElement	object	Returns details row element.
data	object	Returns the details row data.
rowData	object	Returns the details row data.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (detailsDataBound)="onDetailsDataBound($event)">

onDetailsDataBound(e: any){ 
             //Do Something.
  }

detailsExpand

Triggered when detail template row is clicked to expand.

Name

Type

Description

argument

Object

Arguments when detailsExpand event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsRow	object	Returns detail row element.
masterData	object	Returns master row of detail row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
masterRow	object	Returns master row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (detailsExpand)="onDetailsExpand($event)">

onDetailsExpand(e: any){ 
             //Do Something.
  }

endAdd

Triggered after the record is added.

Name

Type

Description

argument

Object

Arguments when endAdd event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns added data.
rowData	object	Returns added data.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (endAdd)="onEndAdd($event)">

onEndAdd(e: any){ 
             //Do Something.
  }

endDelete

Triggered after the record is deleted.

Name

Type

Description

argument

Object

Arguments when endDelete event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns deleted data.
rowData	object	Returns deleted data.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (endDelete)="onEndDelete($event)">

onEndDelete(e: any){ 
             //Do Something.
  }

endEdit

Triggered after the record is edited.

Name

Type

Description

argument

Object

Arguments when endEdit event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns modified data.
rowData	object	Returns modified data.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (endEdit)="onEndEdit($event)">

onEndEdit(e: any){ 
             //Do Something.
  }

load

Triggered initial load.

Name

Type

Description

argument

Object

Arguments when load event is triggered.

Name	Type	Description
model	object	Returns the grid model.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (load)="onLoad($event)">

onLoad(e: any){ 
             //Do Something.
  }

mergeCellInfo

Triggered every time a request is made to access particular cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cell	object	Returns grid cell.
cancel	boolean	Returns the cancel option value.
data	object	Returns current row record object (JSON).
rowData	object	Returns current row record object (JSON).
text	string	Returns the text value in the cell.
column	object	Returns the column object.
rowMerge	void	Method to merge Grid rows.
colMerge	void	Method to merge Grid columns.
merge	void	Method to merge Grid rows and columns.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (mergeCellInfo)="onMergeCellInfo($event)">

onMergeCellInfo(e: any){ 
             //Do Something.
  }

mergeHeaderCellInfo

Triggered every time a request is made to access particular header cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
columnHeaders	object	Returns the column object.
headerCellMerge	void	Method to merge the Grid columns headers.
model	object	Returns the grid model.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (mergeHeaderCellInfo)="onMergeHeaderCellInfo($event)">

onMergeHeaderCellInfo(e: any){ 
             //Do Something.
  }

queryCellInfo

Triggered every time a request is made to access particular cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cell	object	Returns grid cell.
cancel	boolean	Returns the cancel option value.
rowData	object	Returns current row record object (JSON).
data	object	Returns current row record object (JSON).
text	string	Returns the text value in the cell.
column	object	Returns the column object.
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (queryCellInfo)="onQueryCellInfo($event)">

onQueryCellInfo(e: any){ 
             //Do Something.
  }

recordClick

Triggered when record is clicked.

Name

Type

Description

argument

Object

Arguments when recordClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
rowData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the jQuery object of the current selected row.
cell	object	Returns the current selected cell.
model	object	Returns the grid model.
cellIndex	number	Returns the cell index value.
cellValue	string	Returns the corresponding cell value.
columnName	string	Returns the Header text of the column corresponding to the selected cell.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (recordClick)="onRecordClick($event)">

onRecordClick(e: any){ 
             //Do Something.
  }

recordDoubleClick

Triggered when record is double clicked.

Name

Type

Description

argument

Object

Arguments when recordDoubleClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
rowData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the jQuery object of the current selected row.
cell	object	Returns the current selected cell.
model	object	Returns the grid model.
cellIndex	number	Returns the selected cell index value.
cellValue	string	Returns the corresponding cell value.
columnName	string	Returns the Header text of the column corresponding to the selected cell.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (recordDoubleClick)="onRecordDoubleClick($event)">

onRecordDoubleClick(e: any){ 
             //Do Something.
  }

resized

Triggered after column resized.

Name

Type

Description

argument

Object

Arguments when resized event is triggered.

Name	Type	Description
model	object	Returns the grid model.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.
newWidth	number	Returns the new width value.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (resized)="onResized($event)">

onResized(e: any){ 
             //Do Something.
  }

resizeEnd

Triggered when column resize end.

Name

Type

Description

argument

Object

Arguments when resizeEnd event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.
newWidth	number	Returns the new width value.
extra	number	Returns the extra width value.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (resizeEnd)="onResizeEnd($event)">

onResizeEnd(e: any){ 
             //Do Something.
  }

resizeStart

Triggered when column resize start.

Name

Type

Description

argument

Object

Arguments when resizeStart event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (resizeStart)="onResizeStart($event)">

onResizeStart(e: any){ 
             //Do Something.
  }

rightClick

Triggered when right clicked on grid element.

Name

Type

Description

argument

Object

Arguments when rightClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the current selected row.
data	object	Returns the selected row data object.
rowData	object	Returns the selected row data object.
cellIndex	number	Returns the cell index of the selected cell.
cellValue	string	Returns the cell value.
cell	object	Returns the cell object.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rightClick)="onRightClick($event)">

onRightClick(e: any){ 
             //Do Something.
  }

rowDataBound

Triggered every time a request is made to access row information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
row	object	Returns grid row.
cancel	boolean	Returns the cancel option value.
rowData	object	Returns current row record object (JSON).
data	object	Returns current row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rawDataBound)="onRawDataBound($event)">

onRawDataBound(e: any){ 
             //Do Something.
  }

rowSelected

Triggered after the row is selected.

Name

Type

Description

argument

Object

Arguments when rowSelected event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the current selected row.
prevRow	object	Returns the previous selected row element.
prevRowIndex	number	Returns the previous selected row index.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowSelected)="onRowSelected($event)">

onRowSelected(e: any){ 
             //Do Something.
  }

rowSelecting

Triggered before the row is going to be selected.

Name

Type

Description

argument

Object

Arguments when rowSelecting event is triggered.

Name	Type	Description
rowIndex	number	Returns the selected row index value.
row	object	Returns the selected row element.
prevRow	object	Returns the previous selected row element.
prevRowIndex	number	Returns the previous selected row index.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowSelecting)="onRowSelecting($event)">

onRowSelecting(e: any){ 
             //Do Something.
  }

rowDeselected

Triggered after the row is deselected.

Name

Type

Description

argument

Object

Arguments when rowDeselected event is triggered.

Name	Type	Description
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the deselected row.
row	object	Returns the current deselected row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowDeselected)="onRowDeselected($event)">

onRowDeselected(e: any){ 
             //Do Something.
  }

rowDeselecting

Triggered before the row is going to be deselected.

Name

Type

Description

argument

Object

Arguments when rowDeselecting event is triggered.

Name	Type	Description
rowIndex	number	Returns the deselecting row index value.
row	object	Returns the deselecting row element.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while deselecting row
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while deselecting row
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowDeselecting)="onRowDeselecting($event)">

onRowDeselecting(e: any){ 
             //Do Something.
  }

rowHover

Triggered while hover the grid row.

Name

Type

Description

argument

Object

Arguments when rowHover event is triggered.

Name	Type	Description
row	object	Returns the hovered row.
rowIndex	object	Returns the hovered row index.
rowData	object	Returns the hovered record details
cell	object	Returns the hovered row cell

####Example

HTML

<ej-grid #grid  [dataSource]="gridData" (rowHover)="onRowHover($event)">

onRowHover(e: any){ 
             //Do Something.
  }

templateRefresh

Triggered when refresh the template column elements in the Grid.

Name

Type

Description

argument

Object

Arguments when templateRefresh event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
cell	object	Returns the cell object.
column	object	Returns the column object.
rowData	object	Returns the current row data.
data	object	Returns the current row data.
model	object	Returns the grid model.
rowIndex	number	Returns the current row index.
type	string	Returns the name of the event.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (templateRefresh)="onTemplateRefresh($event)">

onTemplateRefresh(e: any){ 
             //Do Something.
  }

toolbarClick

Triggered when toolbar item is clicked in grid.

Name

Type

Description

argument

Object

Arguments when toolbarClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of toolbar item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.
gridModel	object	Returns the grid model.
toolbarData	object	Returns the toolbar object of the selected toolbar element.
itemId	string	Returns the Id of the current toolbar element.
itemIndex	number	Returns the index of the current toolbar element.
itemName	string	Returns the name of the current toolbar element.

Example

HTML

<ej-grid #grid  [dataSource]="gridData" (toolbarClick)="onToolBarClick($event)">

onToolBarClick(e: any){ 
             //Do Something.
  }

Syncfusion Essential JS ejGrid

Example

Requires

Members

allowCellMerging boolean

Default Value:

Example

allowGrouping boolean

Default Value:

Example

allowKeyboardNavigation boolean

Default Value:

Example

allowFiltering boolean

Default Value:

Example

allowSorting boolean

Default Value:

Example

allowMultiSorting boolean

Default Value:

Example

allowPaging boolean

Default Value:

Example

allowReordering boolean

Default Value:

Example

allowResizeToFit boolean

Default Value:

Example

allowResizing boolean

Default Value:

Example

allowRowDragAndDrop boolean

Default Value:

Example

allowScrolling boolean

Default Value:

Example

allowSearching boolean

Default Value:

Example

allowSelection boolean

Default Value:

Example

allowTextWrap boolean

Default Value:

Example

allowMultipleExporting boolean

Default Value:

Example

commonWidth number

Default Value:

Example

childGrid object

Default Value:

Example

columnLayout enum

Default Value:

Example

columns array

Default Value:

Example

columns.allowEditing boolean

Default Value:

Example

columns.allowFiltering boolean

Default Value:

Example

columns.allowGrouping boolean

Default Value:

Example

columns.allowSorting boolean

Default Value:

Example

columns.allowResizing boolean

Default Value:

Example

columns.clipMode enum

allowCellMerging `boolean`

allowGrouping `boolean`

allowKeyboardNavigation `boolean`

allowFiltering `boolean`

allowSorting `boolean`

allowMultiSorting `boolean`

allowPaging `boolean`

allowReordering `boolean`

allowResizeToFit `boolean`

allowResizing `boolean`

allowRowDragAndDrop `boolean`

allowScrolling `boolean`

allowSearching `boolean`

allowSelection `boolean`

allowTextWrap `boolean`

allowMultipleExporting `boolean`

commonWidth `number`

childGrid `object`

columnLayout `enum`

columns `array`

columns.allowEditing `boolean`

columns.allowFiltering `boolean`

columns.allowGrouping `boolean`

columns.allowSorting `boolean`

columns.allowResizing `boolean`

columns.clipMode `enum`

columns.commands `array`

columns.commands.buttonOptions `object`

columns.commands.type `enum`

columns.cssClass `string`

columns.customAttributes `object`

columns.dataSource `object`

columns.defaultValue `string|number|boolean|date`

columns.disableHtmlEncode `boolean`

columns.displayAsCheckbox `boolean`

columns.editParams `object`

columns.editTemplate `object`

columns.editType `enum`

columns.enableGroupByFormat `boolean`

columns.field `string`

columns.filterBarTemplate `object`

columns.filterType `enum`

columns.foreignKeyField `string`

columns.foreignKeyValue `string`

columns.format `string`

columns.headerTemplateID `string`

columns.headerText `string`

columns.headerTextAlign `enum`

columns.isFrozen `boolean`