Syncfusion Essential JS ejGrid

5 Mar 202124 minutes to read

The grid can be easily configured to the DOM element, such as div. you can create a grid with a highly customizable look and feel.

Syntax

$(element).ejGrid(options)

Name	Type	Description
options	object	settings for grid

Example

HTML

<div id="Grid"></div> 
<script>
// Create Grid
$('#Grid').ejGrid({
    dataSource: window.gridData
});         
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowCellMerging:true,
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowGrouping:true                      
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowKeyboardNavigation:false
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering:true                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowSorting:true,
  allowMultiSorting:true
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowPaging:true                      
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowReordering:true
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowResizeToFit:true,
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowResizing:true,
    allowScrolling:true,
    scrollSettings:{width:300,height:300}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowRowDragAndDrop:true
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowScrolling:true,
  scrollSettings:{width:300,height:100}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowSearching: true,
    toolbarSettings:{showToolbar:true,toolbarItems:[ej.Grid.ToolBarItems.Search]}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSelection:true                      
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowTextWrap:true                      
});
</script>

allowMultipleExporting `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowMultipleExporting:true                       
});
</script>

commonWidth `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   commonWidth:200                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   gridLines:ej.Grid.GridLines.Vertical                       
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
   childGrid: {
dataSource: window.employeeView,
queryString: "EmployeeID",
}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    columns: [{ field: "ShipName", headerText: 'Ship Name', width: 130, clipMode: ej.Grid.ClipMode.Ellipsis}]                                
 });
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
   columnLayout:ej.Grid.ColumnLayout.Fixed,
    columns: [
       { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 80  },
       { field: "CustomerID", headerText: "Customer ID", width: 90 },
             ],
});
</script>

columns `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData
});
var value = $("#Grid").ejGrid("option", "columns");
</script>

columns.allowEditing `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings:{allowEditing:true},
  columns:[{field:"OrderID"},{field:"CustomerID",allowEditing:false},{field:"ShipCity"}] 
});
</script>

columns.allowFiltering `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowFiltering:true,
  columns:[{field:"OrderID"},{field:"CustomerID",allowFiltering:false},{field:"ShipCity"}]
});
</script>

columns.allowGrouping `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowGrouping:true,
  columns:[{field:"OrderID"},{field:"CustomerID",allowGrouping:false},{field:"ShipCity"}]
});
</script>

columns.allowSorting `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowSorting:true,
  columns:[{field:"OrderID"},{field:"CustomerID",allowSorting:false},{field:"ShipCity"}] 
});
</script>

columns.allowResizing `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowResizing:true,
  columns:[{field:"OrderID"},{field:"CustomerID",allowResizing:false},{field:"ShipCity"}] 
});
</script>

columns.commands `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true},
    columns:[
           { field: "OrderID", isPrimaryKey: true },  
           { field: "EmployeeID" },
           {
              headerText: "Manage Records",
              commands: [
                  { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                  { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                  { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                  { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
               ],
              isUnbound: true,
              width: 130
           }
    ] 
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true},
    columns:[
           { field: "OrderID", isPrimaryKey: true },  
           { field: "EmployeeID" },
           {
              headerText: "Manage Records",
              commands: [
                  { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                  { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                  { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                  { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
               ],
              isUnbound: true, width: 130
           }
    ] 
});
</script>

columns.commands.type `enum`

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

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true},
    columns:[
           { field: "OrderID", isPrimaryKey: true },  
           { field: "EmployeeID" },
           {
              headerText: "Manage Records",
              commands: [
                  { type: ej.Grid.UnboundType.Edit, buttonOptions: { text: "Edit" } },
                  { type: ej.Grid.UnboundType.Delete, buttonOptions: { text: "Delete" } },
                  { type: ej.Grid.UnboundType.Save, buttonOptions: { text: "Save" } },
                  { type: ej.Grid.UnboundType.Cancel, buttonOptions: { text: "Cancel" } }
               ],
              isUnbound: true, width: 130
           }
    ] 
});
</script>

columns.cssClass `string`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<style class="temp">
.temp{
color:green;
}
</style>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"CustomerID",cssClass:"temp"},{field:"ShipCity"}]
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"CustomerID",customAttributes:{"style":"color:red"}},{field:"Freight"}]
});
</script>

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

<div id="Grid"></div>  
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
  columns:[{field:"OrderID"},{field:"CustomerID",visible:false},{ field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, headerText: "First Name" }]
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings: {allowAdding: true},
  toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },
  columns:[{field:"OrderID"},{field:"CustomerID"},{field:"ShipCity",defaultValue:"ABC"}]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    columns:[{field:"OrderID",headerText:"<div&amp;gtOrder ID</div>",disableHtmlEncode:true}]
  });
</script>

columns.displayAsCheckbox `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    columns:[{field:"OrderID"}, {field:"Verified", displayAsCheckbox: false}]
  });
</script>

columns.editParams `object`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    editSettings:{allowEditing:true,allowAdding:true,allowDeleting:true},
    columns:[{ field: "OrderID"}, { field: "Freight", editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }}]
  });
</script>

columns.editTemplate `object`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings:{allowEditing:true},
  columns:[{field:"OrderID"},{field:"CustomerID"},
            { field: "EmployeeID",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"]: "" }); } } }]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings:{allowEditing:true},
  columns:[{field:"OrderID"},{field:"CustomerID"},{field:"Freight",editType:ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }}]
});
</script>

columns.enableGroupByFormat `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div>
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                dataSource: window.gridData,
                allowGrouping: true,
                allowPaging: true,
                columns: [
                            { field: "OrderID" },
                            { field: "CustomerID" },
                            { field: "Freight", format: "{0:C}", enableGroupByFormat: true },
                            { field: "OrderDate", format: "{0:MM/dd/yyyy}", enableGroupByFormat: true },
                ]
            });
        });
    </script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"}]
});
</script>

columns.filterBarTemplate `object`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  allowFiltering:true,
  columns:[{field:"OrderID"},{
    field: "CustomerID", width: 100, 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)
        },
    },
}, {field :"EmployeeID"}]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering: true,
   filterSettings: { filterType: "menu"}, 
   columns: [
          { field: "OrderID", filterType: ej.Grid.FilterType.Excel },
          { field: "CustomerID", filterType: ej.Grid.FilterType.Excel },
          { field: "Freight", format: "{0:C}" },
          { field: "OrderDate", format: "{0:MM/dd/yyyy}"}
   ]                     
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"EmployeeID",foreignKeyField:"EmployeeID",foreignKeyValue:"FirstName",headerText:"FirstName",dataSource:window.employeeData },{field:"ShipCity"}]
});
</script>

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

<div id="Grid"></div>  
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"EmployeeID",foreignKeyField:"EmployeeID",foreignKeyValue:"FirstName",dataSource:window.employeeData,headerText:"FirstName"},{field:"ShipCity"}]
});
</script>

columns.format `string`

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

Default Value:

Example

HTML

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"CustomerID"},{field:"Freight",format:"{0:C}"}]
});
</script>

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="Grid"></div> 
<div id="customerTemplate">
<span class="e-userlogin e-icon headericon"></span>
 CUS ID
</div>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID",headerTemplateID: "#customerTemplate"},{field:"CustomerID"},{field:"ShipCity"}]
});
</script>

columns.headerText `string`

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

Default Value:

””

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID",headerText:"Order ID"},{field:"CustomerID",headerText:"Customer ID"}]
});
</script>

columns.headerTextAlign `enum`

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

Default Value:

null

Add a comment to this line

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID",headerTextAlign:ej.TextAlign.Center},{field:"CustomerID",headerTextAlign:ej.TextAlign.Right},{field:"ShipCity"}]
});
</script>

columns.headerTooltip `string`

It accepts the string value and shows the tooltip for the Grid column header.

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({             
  dataSource:window.gridData,
  columns:[{field:"OrderID",headerTooltip:"GridOrderID"},{field:"CustomerID"},{field:"ShipCity"}]
});
</script>

columns.isFrozen `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({             
  dataSource:window.gridData,
  allowScrolling: true,               
  scrollSettings:{width:500,height:100 }
  columns:[{field:"OrderID",isFrozen:true},{field:"CustomerID"},{field:"ShipCity"}]
});
</script>

columns.isIdentity `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"CustomerID",isIdentity:true},{field:"ShipCity"}]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({             
  dataSource:window.gridData,
  editSettings:{allowEditing:true},
  columns:[{field:"OrderID",isPrimaryKey:true},{field:"CustomerID"},{field:"ShipCity"}]
});
</script>

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:

-1

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({             
  dataSource:window.gridData,
  editSettings:{allowEditing:true},
  isResponsive: true,
  minWidth: 400,
  columns:[{field:"OrderID",isPrimaryKey:true},{field:"CustomerID", priority: 2},{field:"ShipCity", priority: 1}]
});
</script>

columns.showInColumnChooser `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
 showColumnChooser:true,
    columns:[{field:"OrderID"},{field:"CustomerID",showInColumnChooser:false},{field:"ShipCity"}] 
});
});
</script>

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

<div id="Grid"></div> 
<script id="columnTemplate" type="text/x-jsrender">
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</script>
<script>
$("#Grid").ejGrid({
 dataSource:window.gridData,
 columns:[{field:"OrderID",headerText:"TemplateColumn",template:"<span>{{:EmployeeID}}</span>"},
          {field:"EmployeeID",headerText:"Employee",template:true,templateID:"#columnTemplate"} ]
});
</script>

columns.textAlign `enum`

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

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID",textAlign:ej.TextAlign.Center},{field:"CustomerID",textAlign:ej.TextAlign.Right},{field:"ShipCity"}]
});
</script>

columns.tooltip `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script type="text/template" id="colTip">
  {{:value }}
  </script>
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   columns: [{ field: "ShipName", headerText: 'Ship Name', width: 130, tooltip:"#colTip"}] 
     });
</script>

columns.type `string`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    columns:[{ field: "OrderID"}, { field: "Verified",type: "boolean" }]
  });
</script>

columns.validationRules `object`

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

Example

HTML

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  editSettings: {allowEditing: true, allowAdding: true},
  columns:[{field:"OrderID", validationRules: { required: true, number: true }},{field:"CustomerID"},{field:"ShipCity"}] 
});
</script>

columns.visible `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID"},{field:"CustomerID",visible:false},{field:"ShipCity"}]
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field:"OrderID",width:50},{field:"CustomerID",width:"15%"},{field:"ShipCity",width:"70px"}]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   columns:[{field: "OrderID", isPrimaryKey: true},{field: "EmployeeID"}],
   editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
   allowGrouping: true,
   allowSorting: true,
   allowPaging: true,
   contextMenuSettings: { enableContextMenu: true, contextMenuItems:["Add Record,Edit Record,Delete Record"]  }
});
</script>

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

<div id="Grid"></div> 
<style type="text/css" class="cssStyles">
</style>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData, 
  contextMenuSettings: { enableContextMenu: true, customContextMenuItems:["Hidden Columns,Visible Columns"]  }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource: window.gridData,
   columns:[{field: "OrderID", isPrimaryKey: true},{field: "EmployeeID"}],
   editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
   allowGrouping: true,
   allowSorting: true,
   allowPaging: true,
   contextMenuSettings: { enableContextMenu: true }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
   contextMenuSettings: { enableContextMenu: true, customContextMenuItems: ["Hide Column"],
   subContextMenu: [{ contextMenuItem: "Hide Column", subMenu: ["OrderID", "CustomerID", "EmployeeID"] }] 
  },          
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
   contextMenuSettings: { enableContextMenu: true, customContextMenuItems: ["Hide Column"],
   subContextMenu: [{ contextMenuItem: "Hide Column", template: "<ul><li><a>OrderID</a></li></ul>" }] 
  },          
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource: window.gridData,
   columns:[{field: "OrderID", isPrimaryKey: true},{field: "EmployeeID"}],
   editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
   allowGrouping: true,
   allowSorting: true,
   allowPaging: true,
   contextMenuSettings: { enableContextMenu: true, customContextMenuItems:["Hidden Columns,Visible Columns"], disableDefaultItems: true }
});
</script>

cssClass `string`

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

Default Value:

””

Example

HTML

<div id="Grid"></div>
<style type="text/css">
   .gradient-green {
       font-family: cursive;
   }
   .gradient-green .e-alt_row {
       background: none repeat scroll 0 0 #71A409;
   }
</style>
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   cssClass: "gradient-green"
});
</script>

dataSource `object`

Gets or sets the data to render the grid with records

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData
});
</script>

detailsTemplate `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script id="templateData" type="text/x-jsrender">
<table>
<tr>
<td>
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</td>
</tr>
</table>
</script>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  detailsTemplate:"#templateData",
  detailsDataBound: "detailGridData",
});             
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowAdding: true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["add"] }                             
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowDeleting: true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["delete"] }      
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }
});
</script>

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

Defining editEvent with edit option:
<div id="Grid"></div> 
<script> 
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, allowEditOnDblClick: false },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }      
});
</script>

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

<div id="Grid"></div>
<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>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.DialogTemplate, dialogEditorTemplateID: "#template" },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
});
</script>

editSettings.editMode `enum`

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

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.Dialog },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
});
</script>

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

<div id="Grid"></div>
<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>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.ExternalFormTemplate, externalFormTemplateID: "#template" },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
});
</script>

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. See formPosition

Default Value:

ej.Grid.FormPosition.BottomLeft

Name	Description
BottomLeft	Form position is bottomleft.
TopRight	Form position is topright.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowAdding: true, allowEditing: true, editMode: ej.Grid.EditMode.ExternalForm, formPosition: ej.Grid.FormPosition.BottomLeft },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
});
</script>

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

<div id="Grid"></div>
<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>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.InlineTemplateForm, inlineFormTemplateID: "#template" },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
});
</script>

editSettings.rowPosition `enum`

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

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, allowAdding:true, rowPosition:"bottom" },
    toolbarSettings: { showToolbar: true, toolbarItems: ["add"]  },                             
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.Batch, showConfirmDialog:false },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit","update","cancel"] }                             
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowDeleting: true, showDeleteConfirmDialog:true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit","update","cancel"] }                             
});
</script>

editSettings.titleColumn `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowAdding: true, showAddNewRow: true, editMode: ej.Grid.EditMode.Dialog, titleColumn: "CustomerID"},
    toolbarSettings: { showToolbar: true, toolbarItems: ["edit","update","cancel"] }                             
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    editSettings: { allowAdding: true, showAddNewRow: true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["add"] }                             
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  enableAltRow:true,
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    editSettings: { allowEditing: true },
    toolbarSettings: { showToolbar: true, toolbarItems: ["cancel", "save"]},
    columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
    enableAutoSaveOnSelectionChange: false
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   enableHeaderHover:true
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping: true,
    enablePersistence:true
});
</script>

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

<div id="Grid"></div>  
<script type="text/javascript"> 
$("#Grid").ejGrid({
  dataSource: window.gridData,
                isResponsive: true,
                enableResponsiveRow: true    
});  
</script>

enableRowHover `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   enableRowHover:true
});
</script>

enableRTL `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  enableRTL:true,
});
</script>

enableTouch `boolean`

To Disable the mouse swipe property as false.

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    enableTouch:false
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    enableToolbarItems:true,
    editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },
    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
});
</script>

exportToExcelAction `string`

Act as mapper for the excel exporting URL.

Default Value:

ExportToExcel

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    exportToExcelAction: "http://js.syncfusion.com/ExportingServices/api/JSGridExport/ExcelExport",
    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport] }
});
</script>

exportToPdfAction `string`

Act as mapper for the PDF exporting URL.

Default Value:

ExportToPdf

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    exportToPdfAction:"http://js.syncfusion.com/ExportingServices/api/JSGridExport/PdfExport",
	toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] }
});
</script>

exportToWordAction `string`

Act as mapper for the Word exporting URL.

Default Value:

ExportToWord

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData, 
    exportToWordAction:"http://js.syncfusion.com/ExportingServices/api/JSGridExport/WordExport",
	toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.WordExport] }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
    allowFiltering: true, 
    filterSettings: { enableCaseSensitivity:true, filterType:"excel"}                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowFiltering: true, 
    filterSettings: { filterType: "excel, "enableInterDeterminateState:false}                       
});
</script>

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. See 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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering: true, 
   filterSettings:{ filterBarMode: ej.Grid.FilterBarMode.OnEnter }                
});
</script>

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`

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

filterSettings.filteredColumns.matchCase `boolean`

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

filterSettings.filteredColumns.operator `enum`

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

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 notequal.
greaterThan	Specifies the filter operator as greaterthan.
greaterThanOrEqual	Specifies the filter operator as greaterthanorequal.
lessThan	Specifies the filter operator as lessthan.
lessThanOrEqual	Specifies the filter operator as Lessthanorequal.

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering: true, 
   filterSettings: {  filterType: "menu", filteredColumns: [{ field: "ShipCity", operator: "startswith", value: "re", predicate: "and", matchCase: true }] }                     
});
</script>

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 filterbar.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering: true, 
   filterSettings: {  filterType: "menu" }                     
});
</script>

filterSettings.immediateModeDelay `number`

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

Default Value:

1500

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowFiltering: true, 
    filterSettings: { filterBarMode: ej.Grid.FilterBarMode.Immediate, immediateModeDelay:2000 }                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
    allowFiltering: true, 
    filterSettings: { maxFilterChoices:200, filterType:"excel"}                       
});
</script>

filterSettings.showFilterBarStatus `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowFiltering: true, 
   filterSettings: {  showFilterBarStatus: true }                        
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
    allowFiltering: true, 
    filterSettings: { showPredicate:true, filterType:"menu"}                       
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{captionFormat: "{{:field}} - {{:key}} : {{:count}} {{if count == 1 }} item {{else}} items {{/if}}"}                          
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{enableDropAreaAutoSizing: true}
});
</script>

groupSettings.groupedColumns `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{groupedColumns:["OrderID"]}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{showDropArea:false, groupedColumns: ["ShipCity"]},
    columns: [{ field: "OrderID" }, { field: "CustomerID" }, { field: "ShipCity" }]
});
</script>

groupSettings.showGroupedColumn `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{showGroupedColumn:false}
});
</script>

groupSettings.showToggleButton `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{showToggleButton:true}
});
</script>

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:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowGrouping:true,
    groupSettings:{showToggleButton: true, showUngroupButton:true}
});
</script>

isResponsive `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
 
<script type="text/javascript"> 
$("#Grid").ejGrid({
  dataSource: window.gridData,
                isResponsive: true 
});  
</script>

keySettings `object`

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

Default Value:

null

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
   keySettings: {
saveRequest: "83",
moveCellRight: "13",
}
});
</script>

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

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

minWidth `number`

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

Default Value:

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData, 
  minWidth: 990,
  isResponsive: true
});
</script>

pageSettings `object`

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

pageSettings.currentPage `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowPaging: true,   
    pageSettings: { currentPage: 1 }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowPaging: true,   
    pageSettings: {enableQueryString: true }
});
</script>

pageSettings.enableTemplates `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<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>
<script>
$("#Grid").ejGrid({
 dataSource:window.gridData,
 pageSettings:{enableTemplates:true,template:"#pagerTemplate"}
});
</script>

pageSettings.pageCount `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    allowPaging: true,    
    pageSettings: { pageCount: 1 }
});
</script>

pageSettings.pageSize `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    allowPaging: true,   
    pageSettings: { pageSize: 2 }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,
    allowPaging: true,   
    pageSettings: { pageSize: 14, pageSizeList: [8, 12, 9, 5] }
});
</script>

pageSettings.showDefaults `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<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>
<script>
$("#Grid").ejGrid({
 dataSource:window.gridData,
 pageSettings:{showDefaults:true,enableTemplates:true,templateID:"#pagerTemplate"}
});
</script>

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

<div id="Grid"></div> 
<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>
<script>
$("#Grid").ejGrid({
 dataSource:window.gridData,
 pageSettings:{enableTemplates:true,template:"#pagerTemplate"}
});
</script>

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

<div id="Grid"></div>
<div id="print"></div>
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowPaging: true    
});
var value = $("#Grid").ejGrid("option", "pageSettings.totalPages");
$("#print").text("TotalPages: " + value);
</script>

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

<div id="Grid"></div>
<div id="print"></div>
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowPaging: true
});
var value = $("#Grid").ejGrid("option", "pageSettings.totalRecordsCount");
$("#print").text("TotalRecordsCount: " + value);
</script>

pageSettings.printMode `enum`

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

Default Value:

ej.Grid.PrintMode.AllPages

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

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowPaging:true,
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PrintGrid] },
   pageSettings:{printMode:ej.Grid.PrintMode.CurrentPage},
});
</script>

query `Object`

Query the dataSource from the table for Grid.

Default Value:

null

Example

HTML

<div id="Grid"></div> 
 
<script type="text/javascript">
var queryOrder=ej.Query().select(["OrderID", "CustomerID"]); 
$("#Grid").ejGrid({
  dataSource: window.gridData,
  query: queryOrder
});  
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowPaging: true, 
    allowResizing: true,  
    resizeSettings: { resizeMode: "control" }
});
</script>

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

<div id="Grid"></div> 
<script id="templateData" type="text/x-jsrender">
<tr>
<td>
<img src="styles/images/Employees/{{:EmployeeID}}.png" alt="{{:EmployeeID}}"/>
</td>
<td>
{{:EmployeeID}}
</td>
</tr>
</script>
<script>
$("#Grid").ejGrid({
 dataSource:window.gridData,
  rowTemplate:"#templateData",
  columns:[{headerText:"Employeephoto"},{field:"EmployeeID",headerText:"EmployeeID"}],
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowRowDragAndDrop: true,
   rowDropSettings: { dropTargetID: "#OrdersGrid" }
});
</script>

rowDropSettings.dragMapper `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowRowDragAndDrop: true,
   rowDropSettings: { dropTargetID: "#OrdersGrid", dragMapper: "Home/DragHandler" }
});
</script>

rowDropSettings.dropMapper `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowRowDragAndDrop: true,
   rowDropSettings: { dropTargetID: "#OrdersGrid", dropMapper: "Home/DragHandler" }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowRowDragAndDrop: true,
   rowDropSettings: { dropTargetID: "#OrdersGrid", dropMapper: "Home/DragHandler", dragBehavior:ej.Grid.DragBehavior.Copy }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSearching: true,
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] },
   searchSettings: { fields:["OrderID","CustomerID","EmployeeID"], key:"VINET"}
});
</script>

searchSettings.key `string`

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

Default Value:

””

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSearching: true,
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] },
   searchSettings: { key:"VINET" }
});
</script>

searchSettings.operator `string`

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

List of enum type operators

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

Default Value:

contains

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSearching: true,
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] },
   searchSettings: { operator:"contains", key:"VINET"}
});
</script>

searchSettings.ignoreCase `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSearching: true,
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] },
   searchSettings: { ignoreCase: true, key:"VINET" }
});
</script>

selectedRecords `array`

Gets a value that display the array of selected records in the Grid.

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
});                       
</script>
<script>
// display single or multiple selected records
$("#Grid").ejGrid("model.selectedRecords")        
</script>

selectedRowIndex `number`

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

Default Value:

-1

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    selectedRowIndex:1
});
</script>

selectedRowIndices `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    selectedRowIndices:[1,4,5]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowSelection: true,
    selectionType: ej.Grid.SelectionType.Multiple,     
    selectionSettings: {selectionMode: ["cell"], cellSelectionMode: ej.Grid.CellSelectionMode.Box }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowSelection: true,   
    selectionSettings: {enableToggle: true }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:  window.gridData,
    allowSelection: true,   
    selectionType : "multiple",
    selectionSettings: {selectionMode: ["cell"], allowDragSelection:true, cellSelectionMode: ej.Grid.CellSelectionMode.Flow }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSelection: true,   
   selectionSettings: {selectionMode: ["row","cell","column"] }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   selectionType:"multiple"
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{width:300,height:100,allowVirtualScrolling:true}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ autoHide: true }
});
</script>

scrollSettings.buttonSize `number`

Specifies the height and width of button in the scrollbar.

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ buttonSize:20 }
});
</script>

scrollSettings.enableTouchScroll `boolean`

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

Default Value:

true

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ enableTouchScroll:true }
});
</script>

scrollSettings.frozenColumns `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowScrolling: true,               
    scrollSettings:{width:500,height:100,frozenColumns:2 }
});  
</script>

scrollSettings.frozenRows `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    allowScrolling: true,               
    scrollSettings:{width:300,height:200,frozenRows:2 }
});
</script>

scrollSettings.height `string|number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ height:100 }
});
</script>

scrollSettings.scrollerSize `number`

It accepts the integer value and sets the width of scrollbar.

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ scrollerSize: 20 }
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
    dataSource: window.gridData,                     
    allowScrolling:true,
    scrollSettings:{ width:500 , height: 550 , allowVirtualScrolling:true, virtualScrollMode:ej.Grid.VirtualScrollMode.Normal }
});
</script>

scrollSettings.enableVirtualization `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings: { width: 550, height: 300, enableVirtualization: true }
});
</script>

scrollSettings.width `string|number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ width:300 }
});
</script>

scrollSettings.scrollOneStepBy `number`

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

Default Value:

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowScrolling: true,
   scrollSettings:{ scrollOneStepBy:100 }
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    showColumnChooser:true                      
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID"}
         ,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
       { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
       { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    dataSource:window.gridData,
    columns: [{ field: "OrderID"}, { field: "Freight" }, { field: "ShipCity" }],
    showSummary:true,
    summaryRows:[{ title: "sum", summaryColumns: [{summaryType:ej.Grid.SummaryType.Count,displayColumn:"Freight",dataMember:"Freight"}]}]       
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field: "OrderID"},{field: "EmployeeID"}],
  sortSettings: {sortedColumns: [{field:"EmployeeID", direction:"descending"}] }                    
});
</script>

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

<div id="Grid"></div>          
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData,
  columns:[{field: "OrderID"},{field: "EmployeeID"}],
  sortSettings: {sortedColumns: [{field:"EmployeeID"}] }             
});
</script>

stackedHeaderRows `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID"}
         ,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
       { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
       { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID"}
         ,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
       { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
       { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID"}
         ,{headerText:"Logistics",column:["Freight","EmployeeID","OrderDate"]}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
       { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
       { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

stackedHeaderRows.stackedHeaderColumns.cssClass `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div>       
<style class="temp">
.temp{
color:green;
}
</style>
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID", cssClass:
         "temp"},{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
      { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
      { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign:           ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID"}
         ,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
       { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
       { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",column:"CustomerID", textAlign: 
         ej.TextAlign.Right},{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
      { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
      { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

stackedHeaderRows.stackedHeaderColumns.tooltip `string`

Sets the template for tooltip for the Grid stackedHeaderColumns.

Default Value:

null

Example

HTML

<div id="Grid"></div>
<script type="text/template" id="colTip">
  
</script>
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowSorting:true,
   showStackedHeader:true,
   stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID &amp; Freight",tooltip:"#colTip",column:"CustomerID", textAlign: 
         ej.TextAlign.Right},{headerText:"Logistics",tooltip:"#colTip",column:"Freight,EmployeeID,OrderDate"}
         ,{headerText:"Date &amp; Location Top Level",tooltip:"#colTip",column:"ShipCity"}
           ]}
          ],
   columns: [
      { field: "CustomerID", headerText: "Customer ID", width: 80 },
      { field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
      { field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
      { field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
      { field: "ShipCity", headerText: "Ship City", width: 110 }
      ]
});
</script>

summaryRows `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     showSummary: true,
     columns:[{field: "OrderID"},{field: "Freight"}],
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,  
     columns:[{field: "OrderID"},{field: "Freight"}],
     allowGrouping: true,
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }],
        showCaptionSummary: true
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,  
     columns:[{field: "OrderID"},{field: "Freight"}],
     allowGrouping: true,
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }],
        showGroupSummary: true
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData, 
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }],
        showTotalSummary: true
     }]                                    
});
</script>

summaryRows.summaryColumns `array`

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

Default Value:

[]

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData, 
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Custom,
           displayColumn: "Freight",
           dataMember: "Freight",
           customSummaryValue : "Currency"
        }]
     }]                                    
});    
</script>

summaryRows.summaryColumns.dataMember `string`

This specifies summary column used to perform the summary calculation

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight",
           format: "{0:C2}"
        }]
     }]                                    
});
</script>

summaryRows.summaryColumns.prefix `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight",
           prefix : "Currency:"
        }]
     }]                                    
});
</script>

summaryRows.summaryColumns.suffix `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight",
           suffix: "/-"
        }]
     }]                                    
});
</script>

summaryRows.summaryColumns.summaryType `enum`

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

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData, 
     columns:[{field: "OrderID"},{field: "Freight"}],
     showSummary: true,
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script id="templateData" type="text/x-jsrender">
     Freight has Average of {{:summaryValue}} in  dollars
</script>
<script>
$("#Grid").ejGrid({
     dataSource: window.gridData,
     showSummary: true,
     summaryRows: [{ 
         title: "Average",
         summaryColumns: [{ 
             summaryType: ej.Grid.SummaryType.Average, 
             displayColumn: "Freight", 
             dataMember: "Freight",  
             template: "#templateData",
             format: "{0:C2}"
         }]
      }],
     columns: [{ field: "OrderID" },{ field: "EmployeeID" },{ field: "Freight", format: "{0:C}" }]
});
</script>

summaryRows.title `string`

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

Default Value:

””

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,  
     showSummary: true,
     columns:[{field: "OrderID"},{field: "Freight"}],
     summaryRows: [{
        title: "Sum",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

summaryRows.titleColumn `string`

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

Default Value:

null

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
     dataSource:window.gridData,  
     showSummary: true,
     columns:[{field: "OrderID"},{field: "EmployeeID"},{field: "Freight"}],
     summaryRows: [{
        title: "Sum",
        titleColumn: "EmployeeID",
        summaryColumns: [{
           summaryType: ej.Grid.SummaryType.Sum,
           displayColumn: "Freight",
           dataMember: "Freight"
        }]
     }]                                    
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   allowTextWrap: true, 
   textWrapSettings:{ wrapMode: ej.Grid.WrapMode.Both }                
});
</script>

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

<div id="Grid"></div> 
<style type="text/css" class="cssStyles">
  .Expand:before
  {
    content:"\e627";
  }
</style>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData, 
  toolbarSettings:{showToolbar:true,customToolbarItems:["Expand"]}
});
</script>

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

<script id="Refresh" type="text/x-jsrender">
    <a  class="e-toolbaricons e-icon refresh" />
</script>
<div id="Grid"></div> 
<style type="text/css" class="cssStyles">
  .refresh:before
    {
        content:"\e677";
    }
</style>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData, 
  toolbarSettings:{showToolbar:true, customToolbarItems:[{ templateID: "#Refresh"]}
});
</script>

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

<script id="Refresh" type="text/x-jsrender">
    <a  class="e-toolbaricons e-icon refresh" />
</script>
<div id="Grid"></div> 
<style type="text/css" class="cssStyles">
  .refresh:before
    {
        content:"\e677";
    }
</style>
<script>
$("#Grid").ejGrid({
  dataSource:window.gridData, 
  toolbarSettings:{showToolbar:true, customToolbarItems:[{ templateID: "#Refresh", tooltip: "Refresh Grid"]}
});
</script>

toolbarSettings.showToolbar `boolean`

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

Default Value:

false

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource: window.gridData,
   columns:[{field: "OrderID", isPrimaryKey: true},{field: "EmployeeID"}],
   editSettings: { allowEditing: true },
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Edit] }
});
</script>

toolbarSettings.toolbarItems `array`

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

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   dataSource:window.gridData,
   columns:[{field: "OrderID", isPrimaryKey: true},{field: "EmployeeID"}],
   editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true },
   toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }
});
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to ignore the filterSettings property upon exporting
gridObj.addIgnoreOnExport("filterSettings"); 
</script>

HTML

<script>
// Sends a request to ignore the filterSettings property upon exporting
$("#Grid").ejGrid("addIgnoreOnExport","filterSettings");       
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to ignore the filterSettings property upon OnServerToolbarClick
gridObj.addIgnoreOnToolbarServerClick("filterSettings"); 
</script>

HTML

<script>
// Sends a request to ignore the filterSettings property upon OnServerToolbarClick
$("#Grid").ejGrid("addIgnoreOnToolbarServerClick","filterSettings");       
</script>

addRecord([data,[serverChange]])

Add a new record in grid control when allowAdding is set as true.Without passing parameters it will add empty row.

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

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an add new record request to the grid
gridObj.addRecord({"OrderID":12333});
</script>

HTML

<script>
// add new record to the grid
$("#Grid").ejGrid("addRecord",{OrderID:12333})       
</script>

batchCancel()

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

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchCancel();
// Cancel added, edited, and deleted changes made in grid
</script>

HTML

<script>
// Cancel added, edited, and deleted changes made in grid
$("#Grid").ejGrid("batchCancel");
</script>

batchSave()

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

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Save added, edited, and deleted changes to source of data
gridObj.batchSave(); 
</script>

HTML

<script>
// Save added, edited, and deleted changes to source of data
$("#Grid").ejGrid("batchSave");
</script>

cancelEdit()

Send a cancel request in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a cancel request to the grid
gridObj.cancelEdit(); 
</script>

HTML

<script>
// Sends a cancel request to the grid
$("#Grid").ejGrid("cancelEdit");        
</script>

cancelEditCell()

Send a cancel request to the edited cell in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a cancel request to the edited cell in  grid
gridObj.cancelEditCell();   
</script>

HTML

<script>
// Sends a cancel request to the edited cell in grid
$("#Grid").ejGrid("cancelEditCell");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// returns the page size based on the container height
gridObj.calculatePageSizeByParentHeight(400)
</script>

HTML

<script>
// returns the page size based on the container height
$("#Grid").ejGrid("calculatePageSizeByParentHeight",400)
</script>

changePageSize(pageSize)

It is used to change the number of records displayed per page in grid based on the given page size.

Name	Type	Description
pageSize	number	When passing the page size, it will change the number of records displayed per page in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// changes the number of records displayed per page based on the provided page size
gridObj.changePageSize(7)
</script>

HTML

<script>
// changes the number of records displayed per page based on the provided page size
$("#Grid").ejGrid("changePageSize",7)
</script>

clearCellSelection()

It is used to clear all the cell selection.

Returns:

boolean

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection();  // clears all of the cell selection
</script>

HTML

<script>         
// clears all of the cell selection
$("#Grid").ejGrid("clearCellSelection");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection(1,2);  // clears specified the cell selection
</script>

HTML

<script>         
// clears all of the cell selection
$("#Grid").ejGrid("clearCellSelection",1,2);        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearColumnSelection(2);  // Removes the selection based on the column index
gridObj.clearColumnSelection();  // clears all of the column selection
</script>

HTML

<script>
// Removes the selection based on the column index
$("#Grid").ejGrid("clearColumnSelection", 2);   
// clears all of the column selection
$("#Grid").ejGrid("clearColumnSelection");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearFiltering("EmployeeID"); //clears the filtering based on the fieldName passed
gridObj.clearFiltering();  // clears all the filtering
</script>

HTML

<script>         
$("#Grid").ejGrid("clearFiltering","EmployeeID");// clears the filtering based on the fieldName passed
$("#Grid").ejGrid("clearFiltering"); // clears all the filtering
</script>

clearSearching()

Clear the searching from the grid

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Clears the searching from the grid
gridObj.clearSearching(); 
</script>

HTML

<script>
// Clears the searching from the grid
$("#Grid").ejGrid("clearSearching");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearSelection(2);  // Removes the selection based on the row index
gridObj.clearSelection();  // clears all of the row selection
</script>

HTML

<script>
// Removes the selection based on the row index
$("#Grid").ejGrid("clearSelection", 2);   
// clears all of the row selection
$("#Grid").ejGrid("clearSelection");        
</script>

clearSorting()

Clear the sorting from columns in the grid

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Clears the sorting from columns in the grid
gridObj.clearSorting(); 
</script>

HTML

<script>
// Clears the sorting from columns in the grid
$("#Grid").ejGrid("clearSorting");        
</script>

collapseAll()

Collapse all the group caption rows in grid

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Collapse all the group caption rows
gridObj.collapseAll(); 
</script>

HTML

<script>
// Collapse all the group caption rows
$("#Grid").ejGrid("collapseAll");        
</script>

collapseGroupDropArea()

Collapse the group drop area in grid

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Collapse the group drop area of the grid
gridObj.collapseGroupDropArea(); 
</script>

HTML

<script>
// Collapse the group drop area of the grid
$("#Grid").ejGrid("collapseGroupDropArea");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// remove grid column
gridObj.columns("OrderID", "remove");
// Add new column into grid or modified already existing column in the grid.
gridObj.columns("CustomerID", "add"); 
</script>

HTML

<script>
// remove grid column
$("#Grid").ejGrid("columns","OrderID", "remove");   
// Add new column into grid or modified already existing column in the grid.                    
$("#Grid").ejGrid("columns","CustomerID", "add");                       
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the grid data source
gridObj.dataSource(data); 
</script>

HTML

<script>
// Refreshes the grid data source
$("#Grid").ejGrid("dataSource", data);        
</script>

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	Object	Pass the JSON data of record need to be delete.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a delete record request to the grid
gridObj.deleteRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); 
</script>

HTML

<script>
// Sends a delete record request to the grid
$("#Grid").ejGrid("deleteRecord", "OrderID", { OrderID: 10249, EmployeeID: 3 });        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a delete record request to the grid
gridObj.deleteRow($(".gridcontent tr").first()); 
</script>

HTML

<script>
// Sends a delete record request to the grid
$("#Grid").ejGrid("deleteRow", $(".gridcontent tr").first());        
</script>

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

HTML

<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.destroy(); // destroy the Grid
</script>

HTML

<script>
// destroy the Grid
$("#Grid").ejGrid("destroy");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Edit particular cell based on row index and column field name
gridObj.editCell(2, "OrderID"); 
</script>

HTML

<script>
// Edit particular cell based on row index and column field name
$("#Grid").ejGrid("editCell", 2, "OrderID");
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a form validation request to the grid
gridObj.editFormValidate(); 
</script>

HTML

<script>
// Sends a form validation request to the grid
$("#Grid").ejGrid("editFormValidate");        
</script>

endEdit()

Send a save request in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a save request to the grid
gridObj.endEdit(); 
</script>

HTML

<script>
// Sends a save request to the grid
$("#Grid").ejGrid("endEdit");        
</script>

expandAll()

Expand all the group caption rows in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Expand all the group caption rows
gridObj.expandAll(); 
</script>

HTML

<script>
// Expand all the group caption rows
$("#Grid").ejGrid("expandAll");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Expands or collapses the row based on the row state
gridObj.expandCollapse($("tr td.recordplusexpand > div").first());  
</script>

HTML

<script>
// Expands or collapses the row based on the row state
$("#Grid").ejGrid("expandCollapse", $("tr td.recordplusexpand > div").first());        
</script>

expandGroupDropArea()

Expand the group drop area in grid.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Expands the group drop area of the grid
gridObj.expandGroupDropArea(); 
</script>

HTML

<script>
// Expands the group drop area of the grid
$("#Grid").ejGrid("expandGroupDropArea");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an exporting request
gridObj.export("/api/GridExport/ExcelExport"); 
</script>

HTML

<script>
// Sends an exporting request
$("#Grid").ejGrid("export","/api/GridExport/ExcelExport");        
</script>

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

Send a filtering request to filter one column in grid.

Name	Type	Description
fieldName	array/string	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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a filtering request to the grid
gridObj.filterColumn("OrderID","equal","10248","and", true);
</script>

HTML

<script>
// Sends a filtering request to the grid
$("#Grid").ejGrid("filterColumn","OrderID","equal","10248","and", true);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a filtering request to the grid
gridObj.filterColumn([{field:"OrderID",operator:"lessthan",value:"10266",predicate:"and", matchcase:true},{field:"EmployeeID",operator:"equal",value:2,predicate:"and", matchcase:true}]);

</script>

HTML

<script>
// Sends a filtering request to the grid
$("#Grid").ejGrid("filterColumn",[{field:"OrderID",operator:"lessthan",value:"10266",predicate:"and", matchcase:true},{field:"EmployeeID",operator:"equal",value:2,predicate:"and", matchcase:true}]);
</script>

getBatchChanges()

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

Returns:

object

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the edit, delete, and add changes of a grid
gridObj.getBatchChanges(); 
</script>

HTML

<script>
// Gets the edit, delete, and add changes of a grid
$("#Grid").ejGrid("getBatchChanges");        
</script>

getBrowserDetails()

Get the browser details

Returns:

object

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the browser details of the application being run
gridObj.getBrowserDetails(); 
</script>

HTML

<div id="Grid"></div> 
<script>
// Gets the browser details of the application being run
$("#Grid").ejGrid("getBrowserDetails");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given field name
gridObj.getColumnByField("OrderID");
</script>

HTML

<script>
// Gets the column details based on the given field name
$("#Grid").ejGrid("getColumnByField", "OrderID");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given headerText
gridObj.getColumnByHeaderText("Order ID"); 
</script>

HTML

<script>
// Gets the column details based on the given headerText
$("#Grid").ejGrid("getColumnByHeaderText", "Order ID");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given column index
gridObj.getColumnByIndex(1); 
</script>

HTML

<script>
// Gets the column details based on the given column index
$("#Grid").ejGrid("getColumnByIndex", 1);        
</script>

getColumnFieldNames()

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

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column field names based on the given index
gridObj.getColumnFieldNames(); 
</script>

HTML

<script>
// Gets the column field names based on the given index
$("#Grid").ejGrid("getColumnFieldNames");        
</script>

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

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column index based on the given field name
gridObj.getColumnIndexByField("OrderID"); 
</script>

HTML

<div id="Grid"></div> 
<script>
// Gets the column index based on the given field name
$("#Grid").ejGrid("getColumnIndexByField", "OrderID");        
</script>

getColumnIndexByHeaderText(headerText, [field])

Get the column index of the given headerText of column in grid.

Name	Type	Description
headerText	string	Pass the headerText of the column to get that column index
field	string	optionalOptional Pass the field name of the column.

Returns:

number

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column index based on the given headerText
gridObj.getColumnIndexByHeaderText("Order ID"); 
</script>

HTML

<div id="Grid"></div> 
<script>
// Gets the column index based on the given headerText
$("#Grid").ejGrid("getColumnIndexByHeaderText","Order ID");        
</script>

getContent()

Get the content div element of grid.

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets content of grid control
gridObj.getContent(); 
</script>

HTML

<script>
// Gets content of grid control
$("#Grid").ejGrid("getContent");        
</script>

getContentTable()

Get the content table element of grid

Returns:

Array<HTMLTableElement>

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets content table of grid control
gridObj.getContentTable();
</script>

HTML

<script>
// Gets content table of grid control
$("#Grid").ejGrid("getContentTable");        
</script>

getCurrentEditCellData()

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

Returns:

object

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Get data of currently edited cell value
gridObj.getCurrentEditCellData(); 
</script>

HTML

<script>
// Get data of currently edited cell value
$("#Grid").ejGrid("getCurrentEditCellData");        
</script>

getCurrentIndex()

Get the current page index in grid pager.

Returns:

number

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the current page index in grid
gridObj.getCurrentIndex();  
</script>

HTML

<script>
// Gets the current page index in grid
$("#Grid").ejGrid("getCurrentIndex");   
</script>

getCurrentViewData()

Get the current page data source of grid.

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets current view data of grid control
gridObj.getCurrentViewData(); 
</script>

HTML

<script>
// Gets current view data of grid control
$("#Grid").ejGrid("getCurrentViewData");        
</script>

getDataByIndex(rowIndex)

Get the data of given row index in grid.

NOTE

It will work only for batch edit mode.

Returns:

object

Example

HTML

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

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column field name from the given headerText
gridObj.getFieldNameByHeaderText("Order ID"); 
</script>

HTML

<script>
// Gets the column field name from the given headerText
$("#Grid").ejGrid("getFieldNameByHeaderText", "Order ID");
</script>

getFilterBar()

Get the filter bar of grid

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets filter bar of grid control
gridObj.getFilterBar(); 
</script>

HTML

<script>
// Gets filter bar of grid control
$("#Grid").ejGrid("getFilterBar");        
</script>

getFilteredRecords()

Get the records filtered or searched in Grid

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the filtered or searched records in Grid
gridObj.getFilteredRecords();  
</script>

HTML

<script>
// Gets the filtered or searched records in Grid
$("#Grid").ejGrid("getFilteredRecords");   
</script>

getFooterContent()

Get the footer content of grid.

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid footer content of grid control
gridObj.getFooterContent(); 
</script>

HTML

<script>
// Gets grid footer content of grid control
$("#Grid").ejGrid("getFooterContent");        
</script>

getFooterTable()

Get the footer table element of grid.

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid footer table of grid control
gridObj.getFooterTable(); 
</script>

HTML

<script>
// Gets grid footer table of grid control
$("#Grid").ejGrid("getFooterTable");        
</script>

getHeaderContent()

Get the header content div element of grid.

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid header content of grid control
gridObj.getHeaderContent(); 
</script>

HTML

<script>
// Gets grid header content of grid control
$("#Grid").ejGrid("getHeaderContent");        
</script>

getHeaderTable()

Get the header table element of grid

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTable(); 
// Gets header table of grid control
</script>

HTML

<script>
// Gets header table of grid control
$("#Grid").ejGrid("getHeaderTable");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTextByFieldName("OrderID"); // Gets the column header text from the given field name
</script>

HTML

<script>
// Gets the column header text from the given field name
$("#Grid").ejGrid("getHeaderTextByFieldName", "OrderID");
</script>

getHiddenColumnNames()

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

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets names of all the hidden column collections
gridObj.getHiddenColumnNames(); 
</script>

HTML

<script>
// Gets names of all the hidden column collections
$("#Grid").ejGrid("getHiddenColumnNames");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the row index based on the given row
gridObj.getIndexByRow($(".gridcontent tr").first()); 
</script>

HTML

<script>
// Gets the row index based on the given row
$("#Grid").ejGrid("getIndexByRow", $(".gridcontent tr").first());        
</script>

getPager()

Get the pager of grid.

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid pager of grid control
gridObj.getPager(); 
</script>

HTML

<script>
// Gets grid pager of grid control
$("#Grid").ejGrid("getPager");        
</script>

getPrimaryKeyFieldNames()

Get the names of primary key columns in Grid

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the names of primary key columns
gridObj.getPrimaryKeyFieldNames(); 
</script>

HTML

<script>
// Gets the names of primary key columns
$("#Grid").ejGrid("getPrimaryKeyFieldNames");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the rows from the specified row index 
gridObj.getRowByIndex(3, 6);  
</script>

HTML

<script>
// Gets the rows from the specified row index
$("#Grid").ejGrid("getRowByIndex", 3, 6);   
</script>

getRowHeight()

Get the row height of grid.

Returns:

number

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the row height of the grid
gridObj.getRowHeight();  
</script>

HTML

<script>
// Gets the row height of the grid
$("#Grid").ejGrid("getRowHeight");   
</script>

getRows()

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

Returns:

Element

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid rows of grid control
gridObj.getRows(); 
</script>

HTML

<script>
// Gets grid rows of grid control
$("#Grid").ejGrid("getRows");        
</script>

getScrollObject()

Get the scroller object of grid.

Returns:

ej.Scroller

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets scroll object of grid control
gridObj.getScrollObject(); 
</script>

HTML

<script>
// Gets scroll object of grid control
$("#Grid").ejGrid("getScrollObject");        
</script>

getSelectedRecords()

Get the selected records details in grid.

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the selected row list
gridObj.getSelectedRecords();
</script>

HTML

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

getSelectedRows()

Get the selected row element details in grid.

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the selected row element list
gridObj.getSelectedRows();
</script>

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

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sorted direction of the column based on the given field.
gridObj.getsortColumnByField("OrderID"); 
</script>

HTML

<div id="Grid"></div> 
<script>
// Sorted direction of the column based on the given field.
$("#Grid").ejGrid("getsortColumnByField", "OrderID");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
var summaryCol = { summaryType: ej.Grid.SummaryType.Average, displayColumn: "Freight", dataMember: "Freight" };
// Get the calculated summary values of JSON data passed to it
gridObj.getSummaryValues(summaryCol, window.gridData); 
</script>

HTML

<script>
// Get the calculated summary values of JSON data passed to it
$("#Grid").ejGrid("getSummaryValues", summaryCol, window.gridData);        
</script>

getVisibleColumnNames()

Get the names of all the visible column collections in grid

Returns:

array

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the names of all the visible column collections
gridObj.getVisibleColumnNames(); 
</script>

HTML

<script>
// Gets the names of all the visible column collections
$("#Grid").ejGrid("getVisibleColumnNames");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a paging request to the grid with specified page index
gridObj.gotoPage(3);
</script>

HTML

<script>
// Sends a paging request to the grid with specified page index
$("#Grid").ejGrid("gotoPage", 3);        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a group column request to the grid
gridObj.groupColumn("OrderID"); 
</script>

HTML

<script>
// Sends a group column request to the grid
$("#Grid").ejGrid("groupColumn", "OrderID");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.hideColumns("Order ID"); // Hides column based on the given header text of the column
gridObj.hideColumns(["Order ID", "Customer ID"]); // Hide columns based on the array of header text of the columns given
</script>

HTML

<script>
// Hide column based on the given header text of the column
$("#Grid").ejGrid("hideColumns", "Order ID"); 
// Hide columns based on the array of header text of the columns given
$("#Grid").ejGrid("hideColumns", ["Order ID", "Customer ID"]);                  
</script>

print()

Print the grid control

Returns:

void

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It prints the grid.
gridObj.print(); 
</script>

HTML

<div id="Grid"></div> 
<script>
// It prints the grid.
$("#Grid").ejGrid("print");        
</script>

refreshBatchEditChanges()

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

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshBatchEditChanges(); 
// It is used to refresh and reset the changes made in batch edit mode
</script>

HTML

<script>
// It is used to refresh and reset the changes made in batch edit mode
$("#Grid").ejGrid("refreshBatchEditChanges");
</script>

refreshHeader()

It is used to refresh the grid header.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshHeader(); 
// It is used to refresh the grid header.
</script>

HTML

<script>
// It is used to refresh the grid header.
$("#Grid").ejGrid("refreshHeader");
</script>

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

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshContent(); // Refreshes the grid contents only
gridObj.refreshContent(true); // Refreshes the template and grid contents
</script>

HTML

<div id="Grid"></div> 
<script>
// Refreshes the grid contents only
$("#Grid").ejGrid("refreshContent");        
// Refreshes the template and grid contents
$("#Grid").ejGrid("refreshContent", true);        
</script>

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

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshData(); // Refreshes the grid contents with data from server
gridObj.refreshData("additionalParameter); // Refreshes the grid contents with data from server by passing parameter to server
</script>

HTML

<div id="Grid"></div> 
<script>
// Refreshes the grid contents with data from server
$("#Grid").ejGrid("refreshData");        
// Refreshes the grid contents with data from server by passing parameter to server
$("#Grid").ejGrid("refreshData", "additionalParameter");        
</script>

refreshTemplate()

Refresh the template of the grid

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the template of the grid control
gridObj.refreshTemplate(); 
</script>

HTML

<script>
// Refreshes the template of the grid control.
$("#Grid").ejGrid("refreshTemplate");        
</script>

refreshToolbar()

Refresh the toolbar items in grid.

Returns:

void

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the toolbar items state
gridObj.refreshToolbar(); 
</script>

HTML

<div id="Grid"></div> 
<script>
// Refreshes the toolbar items state
$("#Grid").ejGrid("refreshToolbar");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Removes a column from sorted column collections
gridObj.removeSortedColumns("OrderID"); 
// Removes specified collection of columns from sorted column collections
gridObj.removeSortedColumns(["CustomerID", "ShipCity"]); 
</script>

HTML

<script>
// Removes a column from sorted column collections
$("#Grid").ejGrid("removeSortedColumns", "OrderID");        
// Removes specified collection of columns from sorted column collections
$("#Grid").ejGrid("removeSortedColumns", ["CustomerID", "ShipCity"]);        
</script>

render()

Creates a grid control

Returns:

void

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It renders the grid.
gridObj.render(); 
</script>

HTML

<div id="Grid"></div>
<script>
// It renders the grid.
$("#Grid").ejGrid("render");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reorders the column based on the given index
gridObj.reorderColumns("OrderID", "CustomerID"); 
</script>

HTML

<script>
// Reorders the column based on the given index
$("#Grid").ejGrid("reorderColumns", "OrderID", "CustomerID");
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reorders the row based on the given index
gridObj.reorderRows([0,1],3); 
</script>

HTML

<script>
// Reorders the row based on the given index
$("#Grid").ejGrid("reorderRows", [0], 3);
</script>

resetModelCollections()

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

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reset model collections
gridObj.resetModelCollections(); 
</script>

HTML

<script>
// Reset model collections
$("#Grid").ejGrid("resetModelCollections");
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// ResizeColumns
gridObj.resizeColumns("OrderID",width); 
</script>

HTML

<script>
// ResizeColumns
$("#Grid").ejGrid("resizeColumns","OrderID",width);
</script>

rowHeightRefresh()

Resolves row height issue when unbound column is used with FrozenColumn

Returns:

void

Example

HTML

<div id="Grid"></div> 
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.rowHeightRefresh(); // Resolves row height issue
</script>

HTML

<div id="Grid"></div> 
<script>         
// Resolves row height issue
$("#Grid").ejGrid("rowHeightRefresh");   
</script>

saveCell([preventSaveEvent])

We can prevent the client side cellSave event triggering by passing the preventSaveEvent argument as true.Without argument it will save the particular edited grid cell.

Name	Type	Description
preventSaveEvent	boolean	optionalIf we pass preventSaveEvent as true, it prevents the client side cellSave event triggering

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Prevent save the edited cell
gridObj.saveCell(true); 
</script>

HTML

<script>
// Prevent save the edited cell
$("#Grid").ejGrid("saveCell",true);
</script>

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

<script>
// Create grid object.
 var gridObj = $("#Grid").data("ejGrid");
   gridObj.setDimension(300,400); // Set grid dimension
  </script>


  <script>
 //Set grid dimension based on providing height and width
 </script>

setWidthToColumns()

Send a request to grid to refresh the width set to columns

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to the grid to refresh columns width
gridObj.setWidthToColumns(); 
</script>

HTML

<script>
// Sends a request to the grid to refresh columns width
$("#Grid").ejGrid("setWidthToColumns");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a search request to the grid
gridObj.search("France"); 
</script>

HTML

<script>
// Sends a search request to the grid
$("#Grid").ejGrid("search", "France");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects cells based on the given index
gridObj.selectCells([[1, [4, 3, 2]]]); 
</script>

HTML

<script>
// Selects cells based on the given index
$("#Grid").ejGrid("selectCells", [[1, [4, 3, 2]]]);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects columns based on the given index
gridObj.selectColumns(1,4); 
</script>

HTML

<script>
// Selects columns based on the given index
$("#Grid").ejGrid("selectColumns", 1, 4);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects columns based on the given index
gridObj.selectColumns(1,4); 
</script>

HTML

<script>
// Selects columns based on the given index
$("#Grid").ejGrid("selectColumns", 1, 4);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects rows based on the given index
gridObj.selectRows(1, 4); 
</script>

HTML

<script>
// Selects rows based on the given index
$("#Grid").ejGrid("selectRows", 1, 4);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects rows based on the given index
gridObj.selectRows(1, 4); 
</script>

HTML

<script>
// Selects rows based on the given index
$("#Grid").ejGrid("selectRows", 1, 4);
</script>

selectRows(rowIndexes)

Select rows in grid.

Name	Type	Description
rowIndexes	array	Pass array of rowIndexes for selecting rows

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects rows based on the given array of indexes
gridObj.selectRows([1,3,5,7]);

</script>

HTML

<script>
// Selects rows based on the given array of indexes
$("#Grid").ejGrid("selectRows",[{1,3,5,7}]);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// update a particular cell value
gridObj.setCellText(0, 1, "GREYER");
</script>

HTML

<script>
// update a particular cell value
$("#Grid").ejGrid("setCellText", 0, 1, "GREYER");
</script>

setCellText(primaryKeyValue, field, value)

Used to update a particular cell value based on specified primarykeyvalue and fieldname

Name	Type	Description
primaryKeyValue	string	It is used to set the primarykey 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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// update a particular cell value
gridObj.setCellText(10248,"EmployeeID", "GREYER");
</script>

HTML

<script>
// update a particular cell value
$("#Grid").ejGrid("setCellText", 10248, "EmployeeID", "GREYER");
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
//Used to update a particular cell value
gridObj.setCellValue(1,"EmployeeID", "GREYER");
</script>

HTML

<script>
//Used to update a particular cell value
$("#Grid").ejGrid("setCellValue", 1, "EmployeeID", "GREYER");
</script>

setDefaultData(defaultData)

It sets the default data to the column in grid during adding record in batch edit mode.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
var defaultData = {OrderID:"10000"};
//Set the default date to the column in grid.
gridObj.setDefaultData(defaultData);
</script>

HTML

<script>
var defaultData = {OrderID:"10000"};  
//Set the default date to the column in grid.
$("#Grid").ejGrid("setDefaultData",defaultData);
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
//Used to render grid rows as details view in mobile mode
gridObj.setPhoneModeMaxWidth(500);
</script>

HTML

<script>
//Used to render grid rows as details view in mobile mode
$("#Grid").ejGrid("setPhoneModeMaxWidth", 500);
</script>

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 particular input field in a edit form dynamically.

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It is used to set validation to a field.
gridObj.setValidationToField("OrderID", { required: true }); 
</script>

HTML

<script>
// It is used to set validation to a field.
$("#Grid").ejGrid("setValidationToField", "OrderID", { required: true });
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.showColumns("Order ID"); // Shows column based on the given header text of the column
gridObj.showColumns(["Order ID", "Customer ID"]); // Shows columns based on the array of header text of the columns given
</script>

HTML

<script>
// Shows column based on the given header text of the column
$("#Grid").ejGrid("showColumns", "Order ID"); 
// Shows columns based on the array of header text of the columns given
$("#Grid").ejGrid("showColumns", ["Order ID", "Customer ID"]);                  
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.sortColumn("OrderID", "ascending"); // Sends a sorting request to the grid with specified columnName and sortDirection
</script>

HTML

<script>
// Sends a sorting request to the grid with specified columnName and sortDirection
$("#Grid").ejGrid("sortColumn", "OrderID", "ascending");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an edit record request to the grid
gridObj.startEdit($(".gridcontent tr").first()); 
</script>

HTML

<script>
// Sends an edit record request to the grid
$("#Grid").ejGrid("startEdit", $(".gridcontent tr").first());        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an ungroup column request to the grid
gridObj.ungroupColumn("OrderID"); 
</script>

HTML

<script>
// Sends an ungroup column request to the grid
$("#Grid").ejGrid("ungroupColumn", "OrderID");        
</script>

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

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a update record request to the grid
gridObj.updateRecord("OrderID", { OrderID: 10249, EmployeeID: 3 }); 
</script>

HTML

<script>
// Sends a update record request to the grid
$("#Grid").ejGrid("updateRecord", "OrderID", { OrderID: 10249, EmployeeID: 3 });        
</script>

windowonresize()

It adapts grid to its parent element or to the browsers window.

Returns:

void

Example

HTML

<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Used for resizing the grid window
gridObj.windowonresize(); 
</script>

HTML

<script>
// Used for resizing the grid window
$("#Grid").ejGrid("windowonresize");        
</script>

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 customfilter 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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   actionBegin: function (args){}
});
</script>

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).
rowData	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 customfilter 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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   actionComplete: function (args) {}
}); 
</script>

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).
rowData	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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   actionFailure: function (args) {}
}); 
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   batchAdd: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   batchDelete: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beforeBatchAdd: function (args) {}
});
</script>

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.
rowData	object	Returns deleted data.
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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beforeBatchDelete: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beforeBatchSave: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beforePrint: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beforeRowDrop: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   beginEdit: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellEdit: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellSave: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellSelected: function (args) {}
});
</script>

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
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellSelecting: function (args) {}
});
</script>

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.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellDeselected: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   cellDeselecting: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   columnDrag: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    columnDragStart: function (args) {}
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
 columnDrop: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   columnSelected: function (args) {}
});
</script>

columnSelecting

Triggered before the column is going to be selected.

Name

Type

Description

argument

Object

Arguments when columnSelecting event is triggered.

Name	Type	Description
columnIndex	number	Returns the selected column index value.
previousColumnIndex	number	Returns the previous selected column index value.
headerCell	object	Returns the selected header cell element.
prevColumnHeaderCell	object	Returns the previous selected header cell element.
column	object	Returns corresponding column object (JSON).
previousColumnIndex	array	Returns the previously selected column index values
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while selecting cell
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while selecting cell
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   columnSelecting: function (args) {}
});
</script>

columnDeselected

Triggered after the column is deselected.

Name

Type

Description

argument

Object

Arguments when columnDeselected event is triggered.

Name	Type	Description
columnIndex	number	Returns the Deselected column index value.
headerCell	object	Returns the Deselected column header element.
column	object	Returns corresponding column object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   columnDeselected: function (args) {}
});
</script>

columnDeselecting

Triggered before the column is going to be deselected.

Name

Type

Description

argument

Object

Arguments when columnDeselecting event is triggered.

Name	Type	Description
columnIndex	number	Returns the deselecting column index value.
headerCell	object	Returns the deselecting column header element.
column	object	Returns corresponding column object (JSON).
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while deselecting column
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while deselecting column
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   columnDeselecting: function (args) {}
});
</script>

contextClick

Triggered when context menu item is clicked

Name

Type

Description

argument

Object

Arguments when contextClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of contextmenu item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   contextClick: function (args) {}
});
</script>

contextOpen

Triggered before the context menu is opened.

Name

Type

Description

argument

Object

Arguments when contextOpen event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of contextmenu item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   contextOpen: function (args) {}
});
</script>

create

Triggered when the grid is rendered completely.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
   create: function (args){}
});
</script>

dataBound

Triggered when the grid is bound with data during initial rendering.

Name

Type

Description

argument

Object

Arguments when dataBound event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
 dataBound: function (args) {}
});
</script>

destroy

Triggered when grid going to destroy.

Name

Type

Description

argument

Object

Arguments when destroy event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   destroy: function (args) {}
});
</script>

detailsCollapse

Triggered when detail template row is clicked to collapse.

Name

Type

Description

argument

Object

Arguments when detailsCollapse event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsRow	object	Returns detail row element.
masterData	object	Returns master row of detail row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
masterRow	object	Returns master row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   detailsCollapse: function (args) {}
});
</script>

detailsDataBound

Triggered detail template row is initialized.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsElement	object	Returns details row element.
data	object	Returns the details row data.
rowData	object	Returns the details row data.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
   detailsDataBound: function (args){}
});
</script>

detailsExpand

Triggered when detail template row is clicked to expand.

Name

Type

Description

argument

Object

Arguments when detailsExpand event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
detailsRow	object	Returns detail row element.
masterData	object	Returns master row of detail row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
masterRow	object	Returns master row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   detailsExpand: function (args) {}
});
</script>

endAdd

Triggered after the record is added.

Name

Type

Description

argument

Object

Arguments when endAdd event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns added data.
rowData	object	Returns added data.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   endAdd: function (args) {}
});
</script>

endDelete

Triggered after the record is deleted.

Name

Type

Description

argument

Object

Arguments when endDelete event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns deleted data.
rowData	object	Returns deleted data.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   endDelete: function (args) {}
});
</script>

endEdit

Triggered after the record is edited.

Name

Type

Description

argument

Object

Arguments when endEdit event is triggered.

Name	Type	Description
model	object	Returns the grid model.
data	object	Returns modified data.
rowData	object	Returns modified data.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   endEdit: function (args) {}
});
</script>

load

Triggered initial load.

Name

Type

Description

argument

Object

Arguments when load event is triggered.

Name	Type	Description
model	object	Returns the grid model.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   load: function (args) {}
});
</script>

mergeHeaderCellInfo

Triggered every time a request is made to access particular header cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
headerCellMerge(startIndex:number, count:number)	void	Method to merge the header cells.
columnHeaders	object	Returns the column headers.
model	object	Returns the grid model.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   mergeHeaderCellInfo: function (args){}
});
</script>

mergeCellInfo

Triggered every time a request is made to access particular cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cell	object	Returns grid cell.
cancel	boolean	Returns the cancel option value.
data	object	Returns current row record object (JSON).
rowData	object	Returns current row record object (JSON).
text	string	Returns the text value in the cell.
column	object	Returns the column object.
rowMerge	void	Method to merge Grid rows.
colMerge	void	Method to merge Grid columns.
merge	void	Method to merge Grid rows and columns.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   mergeCellInfo: function (args){}
});
</script>

queryCellInfo

Triggered every time a request is made to access particular cell information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
cell	object	Returns grid cell.
cancel	boolean	Returns the cancel option value.
data	object	Returns current row record object (JSON).
rowData	object	Returns current row record object (JSON).
text	string	Returns the text value in the cell.
column	object	Returns the column object.
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   queryCellInfo: function (args){}
});
</script>

recordClick

Triggered when record is clicked.

Name

Type

Description

argument

Object

Arguments when recordClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
rowData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the jQuery object of the current selected row.
cell	object	Returns the current selected cell.
model	object	Returns the grid model.
cellIndex	number	Returns the cell index value.
cellValue	string	Returns the corresponding cell value.
columnName	string	Returns the Header text of the column corresponding to the selected cell.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   recordClick: function (args) {}
});
</script>

recordDoubleClick

Triggered when record is double clicked.

Name

Type

Description

argument

Object

Arguments when recordDoubleClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
rowData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the jQuery object of the current selected row.
cell	object	Returns the current selected cell.
model	object	Returns the grid model.
cellIndex	number	Returns the selected cell index value.
cellValue	string	Returns the corresponding cell value.
columnName	string	Returns the Header text of the column corresponding to the selected cell.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   recordDoubleClick: function (args) {}
});
</script>

resized

Triggered after column resized.

Name

Type

Description

argument

Object

Arguments when resized event is triggered.

Name	Type	Description
model	object	Returns the grid model.
cancel	boolean	Returns the cancel option value.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.
newWidth	number	Returns the new width value.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   resized: function (args) {}
});
</script>

resizeEnd

Triggered when column resize end.

Name

Type

Description

argument

Object

Arguments when resizeEnd event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.
newWidth	number	Returns the new width value.
extra	number	Returns the extra width value.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   resizeEnd: function (args) {}
});
</script>

resizeStart

Triggered when column resize start.

Name

Type

Description

argument

Object

Arguments when resizeStart event is triggered.

Name	Type	Description
model	object	Returns the grid model.
type	string	Returns the name of the event.
columnIndex	number	Returns the column index.
column	object	Returns the column object.
target	object	Returns the grid object.
oldWidth	number	Returns the old width value.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   resizeStart: function (args) {}
});
</script>

rightClick

Triggered when right clicked on grid element.

Name

Type

Description

argument

Object

Arguments when rightClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the current selected row.
data	object	Returns the selected row data object.
rowData	object	Returns the selected row data object.
cellIndex	number	Returns the cell index of the selected cell.
cellValue	string	Returns the cell value.
cell	object	Returns the cell object.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rightClick: function (args) {}
});
</script>

rowDataBound

Triggered every time a request is made to access row information, element and data.

Name

Type

Description

argument

Object

Event parameters from grid

Name	Type	Description
row	object	Returns grid row.
cancel	boolean	Returns the cancel option value.
data	object	Returns current row record object (JSON).
rowData	object	Returns current row record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
   rowDataBound: function (args){}
});
</script>

rowSelected

Triggered after the row is selected.

Name

Type

Description

argument

Object

Arguments when rowSelected event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
foreignKeyData	object	Returns the foreign key record object (JSON).
rowIndex	number	Returns the row index of the selected row.
row	object	Returns the current selected row.
prevRow	object	Returns the previous selected row element.
prevRowIndex	number	Returns the previous selected row index.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowSelected: function (args) {}
});
</script>

rowSelecting

Triggered before the row is going to be selected.

Name

Type

Description

argument

Object

Arguments when rowSelecting event is triggered.

Name	Type	Description
rowIndex	number	Returns the selected row index value.
row	object	Returns the selected row element.
prevRow	object	Returns the previous selected row element.
prevRowIndex	number	Returns the previous selected row index.
selectedData	object	Returns current record object (JSON).
data	object	Returns current record object (JSON).
cancel	boolean	Returns the cancel option value.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowSelecting: function (args) {}
});
</script>

rowDeselected

Triggered after the row is deselected.

Name

Type

Description

argument

Object

Arguments when rowDeselected event is triggered.

Name	Type	Description
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
rowIndex	number	Returns the row index of the deselected row.
row	object	Returns the current deselected row element.
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowDeselected: function (args) {}
});
</script>

rowDeselecting

Triggered before the row is going to be deselected.

Name

Type

Description

argument

Object

Arguments when rowDeselecting event is triggered.

Name	Type	Description
rowIndex	number	Returns the deselecting row index value.
row	object	Returns the deselecting row element.
data	object	Returns current record object (JSON).
selectedData	object	Returns current record object (JSON).
isCtrlKeyPressed	boolean	Returns whether the ctrl key is pressed while deselecting row
isShiftKeyPressed	boolean	Returns whether the shift key is pressed while deselecting row
model	object	Returns the grid model.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowDeselecting: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowDrag: function (args) {}
});
</script>

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

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
    rowDragStart: function (args) {}
});
</script>

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

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
 rowDrop: function (args) {}
});
</script>

rowHover

Triggered while hover the grid row.

Name

Type

Description

argument

Object

Arguments when rowHover event is triggered.

Name	Type	Description
row	object	Returns the hovered row.
rowIndex	object	Returns the hovered row index.
rowData	object	Returns the hovered record details
cell	object	Returns the hovered row cell

####Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   rowHover: function (args) {}
});
</script>

templateRefresh

Triggered when refresh the template column elements in the Grid.

Name

Type

Description

argument

Object

Arguments when templateRefresh event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
cell	object	Returns the cell object.
column	object	Returns the column object.
data	object	Returns the current row data.
rowData	object	Returns the current row data.
model	object	Returns the grid model.
rowIndex	number	Returns the current row index.
type	string	Returns the name of the event.

Example

HTML

<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
 templateRefresh: function (args) {}
});
</script>

toolbarClick

Triggered when toolbar item is clicked in grid.

Name

Type

Description

argument

Object

Arguments when toolbarClick event is triggered.

Name	Type	Description
cancel	boolean	Returns the cancel option value.
currentTarget	object	Returns the current item.
model	object	Returns the grid model.
status	boolean	Returns the status of toolbar item which denotes its enabled state
target	object	Returns the target item.
type	string	Returns the name of the event.
gridModel	object	Returns the grid model.
toolbarData	object	Returns the toolbar object of the selected toolbar element.
itemId	string	Returns the Id of the current toolbar element.
itemIndex	number	Returns the index of the current toolbar element.
itemName	string	Returns the name of the current toolbar element.

Example

HTML

<div id="Grid"></div> 
<script>
$("#Grid").ejGrid({
   toolbarClick: function (args) {}
});
</script>

Syncfusion Essential JS ejGrid

Syntax

Example

Requires

Members

allowCellMerging boolean

Default Value:

Example

allowGrouping boolean

Default Value:

Example

allowKeyboardNavigation boolean

Default Value:

Example

allowFiltering boolean

Default Value:

Example

allowSorting boolean

Default Value:

Example

allowMultiSorting boolean

Default Value:

Example

allowPaging boolean

Default Value:

Example

allowReordering boolean

Default Value:

Example

allowResizeToFit boolean

Default Value:

Example

allowResizing boolean

Default Value:

Example

allowRowDragAndDrop boolean

Default Value:

Example

allowScrolling boolean

Default Value:

Example

allowSearching boolean

Default Value:

Example

allowSelection boolean

Default Value:

Example

allowTextWrap boolean

Default Value:

Example

allowMultipleExporting boolean

Default Value:

Example

commonWidth number

Default Value:

Example

gridLines enum

Default Value:

Example

childGrid object

Default Value:

Example

columns.clipMode enum

Default Value:

Example

columnLayout enum

Default Value:

Example

columns array

Default Value:

Example

columns.allowEditing boolean

Default Value:

Example

columns.allowFiltering boolean

Default Value:

Example

columns.allowGrouping boolean

Default Value:

Example

allowCellMerging `boolean`

allowGrouping `boolean`

allowKeyboardNavigation `boolean`

allowFiltering `boolean`

allowSorting `boolean`

allowMultiSorting `boolean`

allowPaging `boolean`

allowReordering `boolean`

allowResizeToFit `boolean`

allowResizing `boolean`

allowRowDragAndDrop `boolean`

allowScrolling `boolean`

allowSearching `boolean`

allowSelection `boolean`

allowTextWrap `boolean`

allowMultipleExporting `boolean`

commonWidth `number`

gridLines `enum`

childGrid `object`

columns.clipMode `enum`

columnLayout `enum`

columns `array`

columns.allowEditing `boolean`

columns.allowFiltering `boolean`

columns.allowGrouping `boolean`

columns.allowSorting `boolean`

columns.allowResizing `boolean`

columns.commands `array`

columns.commands.buttonOptions `object`

columns.commands.type `enum`

columns.cssClass `string`

columns.customAttributes `object`

columns.dataSource `object`

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

columns.disableHtmlEncode `boolean`

columns.displayAsCheckbox `boolean`

columns.editParams `object`

columns.editTemplate `object`

columns.editType `enum`

columns.enableGroupByFormat `boolean`

columns.field `string`

columns.filterBarTemplate `object`

columns.filterType `enum`

columns.foreignKeyField `string`

columns.foreignKeyValue `string`

columns.format `string`

columns.headerTemplateID `string`

columns.headerText `string`

columns.headerTextAlign `enum`