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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
columns:[{field:"OrderID",headerText:"<div&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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
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
<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
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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<div id="Grid"></div>
<script>
ej.Pager.locale["es-ES"] = {
pagerInfo: "{0} de {1} páginas ({2} artí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:
- 0
Example
<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:
- 1
Example
<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
<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
<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:
- 8
Example
<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:
- 12
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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:
- 18
Example
<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
<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:
- 0
Example
<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:
- 0
Example
<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:
- 0
Example
<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:
- 18
Example
<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
<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
<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:
- 250
Example
<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:
- 57
Example
<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
<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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID"}
,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<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
<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
<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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID"}
,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID"}
,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID"}
,{headerText:"Logistics",column:["Freight","EmployeeID","OrderDate"]}
,{headerText:"Date & 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
<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 & Freight",column:"CustomerID", cssClass:
"temp"},{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID"}
,{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataSource:window.gridData,
allowSorting:true,
showStackedHeader:true,
stackedHeaderRows:[{stackedHeaderColumns:[{headerText:"ID & Freight",column:"CustomerID", textAlign:
ej.TextAlign.Right},{headerText:"Logistics",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<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 & Freight",tooltip:"#colTip",column:"CustomerID", textAlign:
ej.TextAlign.Right},{headerText:"Logistics",tooltip:"#colTip",column:"Freight,EmployeeID,OrderDate"}
,{headerText:"Date & 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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to ignore the filterSettings property upon exporting
gridObj.addIgnoreOnExport("filterSettings");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to ignore the filterSettings property upon OnServerToolbarClick
gridObj.addIgnoreOnToolbarServerClick("filterSettings");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an add new record request to the grid
gridObj.addRecord({"OrderID":12333});
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.batchCancel();
// Cancel added, edited, and deleted changes made in grid
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Save added, edited, and deleted changes to source of data
gridObj.batchSave();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a cancel request to the grid
gridObj.cancelEdit();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a cancel request to the edited cell in grid
gridObj.cancelEditCell();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// returns the page size based on the container height
gridObj.calculatePageSizeByParentHeight(400)
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection(); // clears all of the cell selection
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.clearCellSelection(1,2); // clears specified the cell selection
</script>
<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
<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>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Clears the searching from the grid
gridObj.clearSearching();
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Clears the sorting from columns in the grid
gridObj.clearSorting();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Collapse all the group caption rows
gridObj.collapseAll();
</script>
<script>
// Collapse all the group caption rows
$("#Grid").ejGrid("collapseAll");
</script>
collapseGroupDropArea()
Collapse the group drop area in grid
Returns:
void
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Collapse the group drop area of the grid
gridObj.collapseGroupDropArea();
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the grid data source
gridObj.dataSource(data);
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a delete record request to the grid
gridObj.deleteRow($(".gridcontent tr").first());
</script>
<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
<script>
var gridObj = $("#Grid").data("ejGrid");
gridObj.destroy(); // destroy the Grid
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a form validation request to the grid
gridObj.editFormValidate();
</script>
<script>
// Sends a form validation request to the grid
$("#Grid").ejGrid("editFormValidate");
</script>
endEdit()
Send a save request in grid.
Returns:
void
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a save request to the grid
gridObj.endEdit();
</script>
<script>
// Sends a save request to the grid
$("#Grid").ejGrid("endEdit");
</script>
expandAll()
Expand all the group caption rows in grid.
Returns:
void
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Expand all the group caption rows
gridObj.expandAll();
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Expands the group drop area of the grid
gridObj.expandGroupDropArea();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an exporting request
gridObj.export("/api/GridExport/ExcelExport");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a filtering request to the grid
gridObj.filterColumn("OrderID","equal","10248","and", true);
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the edit, delete, and add changes of a grid
gridObj.getBatchChanges();
</script>
<script>
// Gets the edit, delete, and add changes of a grid
$("#Grid").ejGrid("getBatchChanges");
</script>
getBrowserDetails()
Get the browser details
Returns:
object
Example
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given field name
gridObj.getColumnByField("OrderID");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given headerText
gridObj.getColumnByHeaderText("Order ID");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column details based on the given column index
gridObj.getColumnByIndex(1);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column field names based on the given index
gridObj.getColumnFieldNames();
</script>
<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
<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>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets content of grid control
gridObj.getContent();
</script>
<script>
// Gets content of grid control
$("#Grid").ejGrid("getContent");
</script>
getContentTable()
Get the content table element of grid
Returns:
Array<HTMLTableElement>
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets content table of grid control
gridObj.getContentTable();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Get data of currently edited cell value
gridObj.getCurrentEditCellData();
</script>
<script>
// Get data of currently edited cell value
$("#Grid").ejGrid("getCurrentEditCellData");
</script>
getCurrentIndex()
Get the current page index in grid pager.
Returns:
number
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the current page index in grid
gridObj.getCurrentIndex();
</script>
<script>
// Gets the current page index in grid
$("#Grid").ejGrid("getCurrentIndex");
</script>
getCurrentViewData()
Get the current page data source of grid.
Returns:
array
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets current view data of grid control
gridObj.getCurrentViewData();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets data of corresponding row index in grid control
gridObj.getDataByIndex(0);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the column field name from the given headerText
gridObj.getFieldNameByHeaderText("Order ID");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets filter bar of grid control
gridObj.getFilterBar();
</script>
<script>
// Gets filter bar of grid control
$("#Grid").ejGrid("getFilterBar");
</script>
getFilteredRecords()
Get the records filtered or searched in Grid
Returns:
array
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the filtered or searched records in Grid
gridObj.getFilteredRecords();
</script>
<script>
// Gets the filtered or searched records in Grid
$("#Grid").ejGrid("getFilteredRecords");
</script>
getFooterContent()
Get the footer content of grid.
Returns:
Element
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid footer content of grid control
gridObj.getFooterContent();
</script>
<script>
// Gets grid footer content of grid control
$("#Grid").ejGrid("getFooterContent");
</script>
getFooterTable()
Get the footer table element of grid.
Returns:
Element
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid footer table of grid control
gridObj.getFooterTable();
</script>
<script>
// Gets grid footer table of grid control
$("#Grid").ejGrid("getFooterTable");
</script>
getHeaderContent()
Get the header content div element of grid.
Returns:
Element
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid header content of grid control
gridObj.getHeaderContent();
</script>
<script>
// Gets grid header content of grid control
$("#Grid").ejGrid("getHeaderContent");
</script>
getHeaderTable()
Get the header table element of grid
Returns:
Element
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTable();
// Gets header table of grid control
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.getHeaderTextByFieldName("OrderID"); // Gets the column header text from the given field name
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets names of all the hidden column collections
gridObj.getHiddenColumnNames();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the row index based on the given row
gridObj.getIndexByRow($(".gridcontent tr").first());
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid pager of grid control
gridObj.getPager();
</script>
<script>
// Gets grid pager of grid control
$("#Grid").ejGrid("getPager");
</script>
getPrimaryKeyFieldNames()
Get the names of primary key columns in Grid
Returns:
array
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the names of primary key columns
gridObj.getPrimaryKeyFieldNames();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the rows from the specified row index
gridObj.getRowByIndex(3, 6);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the row height of the grid
gridObj.getRowHeight();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets grid rows of grid control
gridObj.getRows();
</script>
<script>
// Gets grid rows of grid control
$("#Grid").ejGrid("getRows");
</script>
getScrollObject()
Get the scroller object of grid.
Returns:
ej.Scroller
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets scroll object of grid control
gridObj.getScrollObject();
</script>
<script>
// Gets scroll object of grid control
$("#Grid").ejGrid("getScrollObject");
</script>
getSelectedRecords()
Get the selected records details in grid.
Returns:
array
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the selected row list
gridObj.getSelectedRecords();
</script>
<script>
// Gets the selected row list
$("#Grid").ejGrid("getSelectedRecords");
</script>
getSelectedRows()
Get the selected row element details in grid.
Returns:
array
Example
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the selected row element list
gridObj.getSelectedRows();
</script>
<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
<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>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Gets the names of all the visible column collections
gridObj.getVisibleColumnNames();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a paging request to the grid with specified page index
gridObj.gotoPage(3);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a group column request to the grid
gridObj.groupColumn("OrderID");
</script>
<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
<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>
<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
<div id="Grid"></div>
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It prints the grid.
gridObj.print();
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.refreshHeader();
// It is used to refresh the grid header.
</script>
<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
<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>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the template of the grid control
gridObj.refreshTemplate();
</script>
<script>
// Refreshes the template of the grid control.
$("#Grid").ejGrid("refreshTemplate");
</script>
refreshToolbar()
Refresh the toolbar items in grid.
Returns:
void
Example
<div id="Grid"></div>
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Refreshes the toolbar items state
gridObj.refreshToolbar();
</script>
<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
<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>
<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
<div id="Grid"></div>
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It renders the grid.
gridObj.render();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reorders the column based on the given index
gridObj.reorderColumns("OrderID", "CustomerID");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reorders the row based on the given index
gridObj.reorderRows([0,1],3);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Reset model collections
gridObj.resetModelCollections();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// ResizeColumns
gridObj.resizeColumns("OrderID",width);
</script>
<script>
// ResizeColumns
$("#Grid").ejGrid("resizeColumns","OrderID",width);
</script>
rowHeightRefresh()
Resolves row height issue when unbound column is used with FrozenColumn
Returns:
void
Example
<div id="Grid"></div>
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
gridObj.rowHeightRefresh(); // Resolves row height issue
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Prevent save the edited cell
gridObj.saveCell(true);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a request to the grid to refresh columns width
gridObj.setWidthToColumns();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends a search request to the grid
gridObj.search("France");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects cells based on the given index
gridObj.selectCells([[1, [4, 3, 2]]]);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects columns based on the given index
gridObj.selectColumns(1,4);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects columns based on the given index
gridObj.selectColumns(1,4);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects rows based on the given index
gridObj.selectRows(1, 4);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Selects rows based on the given index
gridObj.selectRows(1, 4);
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// update a particular cell value
gridObj.setCellText(0, 1, "GREYER");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// update a particular cell value
gridObj.setCellText(10248,"EmployeeID", "GREYER");
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
//Used to update a particular cell value
gridObj.setCellValue(1,"EmployeeID", "GREYER");
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
//Used to render grid rows as details view in mobile mode
gridObj.setPhoneModeMaxWidth(500);
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It is used to set validation to columns.
gridObj.setValidation();
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// It is used to set validation to a field.
gridObj.setValidationToField("OrderID", { required: true });
</script>
<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
<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>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an edit record request to the grid
gridObj.startEdit($(".gridcontent tr").first());
</script>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Sends an ungroup column request to the grid
gridObj.ungroupColumn("OrderID");
</script>
<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
<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>
<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
<script>
// Create grid object.
var gridObj = $("#Grid").data("ejGrid");
// Used for resizing the grid window
gridObj.windowonresize();
</script>
<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 |
|
Event parameters when grid is initialized:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid paging action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid sorting action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid grouping action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid record editing action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid record save action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid record cancel action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid record delete action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when add new record action starts:
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid filtering action starts:
|
||||||||||||||||||||||||||||||
argument | Object | Event parameters when grid request type as "filterbeforeopen"
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterchoicerequest"
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterchoicesearch"
|
||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterbeforeopen"
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
actionBegin: function (args){}
});
</script>
actionComplete
Triggered for every grid action success event.
Name | Type | Description | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments in actionComplete when grid is initialized.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid paging action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid sorting action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid grouping action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid record editing action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid record save action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid record cancel action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid record delete action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after add new record action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionComplete after grid filtering action is completed.
|
|||||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterchoicerequest"
|
|||||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterafteropen"
|
|||||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterchoicesearch"
|
|||||||||||||||||||||||||||||||||
argument |
|
Event parameters when grid request type as "filterafteropen"
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
actionComplete: function (args) {}
});
</script>
actionFailure
Triggered for every grid action server failure event.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments in actionFailure when grid is initialized.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid paging action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid sorting action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid grouping action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid record editing action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid record save action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid record delete action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after add new record action is completed.
|
||||||||||||||||||||||||||||||||||||
argument |
|
Arguments in actionFailure after grid filtering action is completed.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
actionFailure: function (args) {}
});
</script>
batchAdd
Triggered when record batch add.
Name | Type | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when batchAdd event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
batchAdd: function (args) {}
});
</script>
batchDelete
Triggered when record batch delete.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when batchDelete event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
batchDelete: function (args) {}
});
</script>
beforeBatchAdd
Triggered before the batch add.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when beforeBatchAdd event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
beforeBatchAdd: function (args) {}
});
</script>
beforeBatchDelete
Triggered before the batch delete.
Name | Type | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when beforeBatchDelete event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
beforeBatchDelete: function (args) {}
});
</script>
beforeBatchSave
Triggered before the batch save.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when beforeBatchSave event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
beforeBatchSave: function (args) {}
});
</script>
beforePrint
Triggered before the print.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when beforePrint event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
beforePrint: function (args) {}
});
</script>
beforeRowDrop
Triggered before row drop in the grid
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when beforeRowDrop event is triggered.
|
Example
<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 |
|
Arguments when beginEdit event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
beginEdit: function (args) {}
});
</script>
cellEdit
Triggered when record cell edit.
Name | Type | Description | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when cellEdit event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
cellEdit: function (args) {}
});
</script>
cellSave
Triggered when record cell save.
Name | Type | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when cellSave event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
cellSave: function (args) {}
});
</script>
cellSelected
Triggered after the cell is selected.
Name | Type | Description | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when cellSelecting event is triggered.
|
Example
<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 |
|
Arguments when cellSelecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
cellSelecting: function (args) {}
});
</script>
cellDeselected
Triggered after the cell is deselected.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when cellDeselected event is triggered.
|
Example
<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 |
|
Arguments when cellDeselecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
cellDeselecting: function (args) {}
});
</script>
columnDrag
Triggered when the column is being dragged.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when columnDrag event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
columnDrag: function (args) {}
});
</script>
columnDragStart
Triggered when column dragging begins.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when columnDragStart event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
columnDragStart: function (args) {}
});
</script>
columnDrop
Triggered when the column is dropped.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when columnDrop event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
columnDrop: function (args) {}
});
</script>
columnSelected
Triggered after the column is selected.
Name | Type | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when columnSelected event is triggered.
|
Example
<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 |
|
Arguments when columnSelecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
columnSelecting: function (args) {}
});
</script>
columnDeselected
Triggered after the column is deselected.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when columnDeselected event is triggered.
|
Example
<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 |
|
Arguments when columnDeselecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
columnDeselecting: function (args) {}
});
</script>
contextClick
Triggered when context menu item is clicked
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when contextClick event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
contextClick: function (args) {}
});
</script>
contextOpen
Triggered before the context menu is opened.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when contextOpen event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
contextOpen: function (args) {}
});
</script>
create
Triggered when the grid is rendered completely.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Event parameters from grid
|
Example
<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 |
|
Arguments when dataBound event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
dataBound: function (args) {}
});
</script>
destroy
Triggered when grid going to destroy.
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when destroy event is triggered.
|
Example
<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 |
|
Arguments when detailsCollapse event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
detailsCollapse: function (args) {}
});
</script>
detailsDataBound
Triggered detail template row is initialized.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Event parameters from grid
|
Example
<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 |
|
Arguments when detailsExpand event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
detailsExpand: function (args) {}
});
</script>
endAdd
Triggered after the record is added.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when endAdd event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
endAdd: function (args) {}
});
</script>
endDelete
Triggered after the record is deleted.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when endDelete event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
endDelete: function (args) {}
});
</script>
endEdit
Triggered after the record is edited.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when endEdit event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
endEdit: function (args) {}
});
</script>
load
Triggered initial load.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when load event is triggered.
|
Example
<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 |
|
Event parameters from grid
|
Example
<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 |
|
Event parameters from grid
|
Example
<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 |
|
Event parameters from grid
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
queryCellInfo: function (args){}
});
</script>
recordClick
Triggered when record is clicked.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when recordClick event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
recordClick: function (args) {}
});
</script>
recordDoubleClick
Triggered when record is double clicked.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when recordDoubleClick event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
recordDoubleClick: function (args) {}
});
</script>
resized
Triggered after column resized.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when resized event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
resized: function (args) {}
});
</script>
resizeEnd
Triggered when column resize end.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when resizeEnd event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
resizeEnd: function (args) {}
});
</script>
resizeStart
Triggered when column resize start.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when resizeStart event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
resizeStart: function (args) {}
});
</script>
rightClick
Triggered when right clicked on grid element.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rightClick event is triggered.
|
Example
<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 |
|
Event parameters from grid
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowDataBound: function (args){}
});
</script>
rowSelected
Triggered after the row is selected.
Name | Type | Description | |||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowSelected event is triggered.
|
Example
<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 |
|
Arguments when rowSelecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowSelecting: function (args) {}
});
</script>
rowDeselected
Triggered after the row is deselected.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowDeselected event is triggered.
|
Example
<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 |
|
Arguments when rowDeselecting event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowDeselecting: function (args) {}
});
</script>
rowDrag
Triggered when the row is being dragged.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowDrag event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowDrag: function (args) {}
});
</script>
rowDragStart
Triggered when row dragging begins.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowDragStart event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowDragStart: function (args) {}
});
</script>
rowDrop
Triggered when the row is dropped.
Name | Type | Description | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowDrop event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
rowDrop: function (args) {}
});
</script>
rowHover
Triggered while hover the grid row.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when rowHover event is triggered.
|
####Example
<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 |
|
Arguments when templateRefresh event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
templateRefresh: function (args) {}
});
</script>
toolbarClick
Triggered when toolbar item is clicked in grid.
Name | Type | Description | ||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument |
|
Arguments when toolbarClick event is triggered.
|
Example
<div id="Grid"></div>
<script>
$("#Grid").ejGrid({
toolbarClick: function (args) {}
});
</script>