ejGrid

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>
  • ts
  • 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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • 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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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 click 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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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:

    • 0

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" [minWidth]=990 isResponsive="true" >
    </ej-grid>
  • ts
  • //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:

    • 1

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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:

    • 8

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
    </ej-grid>
  • ts
  • //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:

    • 12

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowPaging="true" [pageSettings]="pageSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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

    1. ej.FilterOperators.contain
    2. ej.FilterOperators.equal
    3. ej.FilterOperators.notEqual
    4. ej.FilterOperators.startsWith
    5. ej.FilterOperators.endsWith

    Default Value:

    • contains

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowSearching="true" [toolbarSettings]="toolbarSettings" [searchSettings]="searchSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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:

    • 18

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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:

    • 0

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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:

    • 0

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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:

    • 0

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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:

    • 250

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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:

    • 57

    Example

  • html
  • <ej-grid id="Grid" [dataSource]="gridData" allowScrolling="true" [scrollSettings]="scrollSettings" >
    </ej-grid>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • 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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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>
  • ts
  • //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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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

  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • 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)">
  • ts
  • onColumnSelected(e: any){ 
                 //Do Something.
      }

    columnSelecting

    Triggered before the column is going to be selected.

    Name Type Description
    argument