ejmGrid

8 Mar 201624 minutes to read

The Grid can be easily configured to the DOM element, div. You can create a Grid with a highly customizable look and feel.

$(element).ejmGrid(options)

Name	Type	Description
HTML `options`	object	settings for grid

Example

HTML

<div  id="mobilegrid" ></div>
<script> 
// Create Grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));   
$("#mobilegrid").ejmGrid({ dataSource:data,columns: [
		 { field: "OrderID", headerText: "Order ID" },
		 { field: "CustomerID", headerText: "Customer ID" },
		 { field: "Freight", headerText: "Freight" }
 ] });
 }); 
</script>

Requires

module:jQuery
module:jsrender
module:jquery.globalize
module:ej.mobile.application
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch
module:ej.mobile.scrollbar
module:ej.mobile.scrollpanel
module:ej.mobile.header
module:ej.mobile.button
module:ej.mobile.dialog
module:ej.mobile.listbox
module:ej.mobile.checkbox

Members

allowFiltering`boolean`

Specifies whether to enable filtering for the columns. It allows to filter the desired records in Grid columns.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ allowFiltering: false,dataSource:data,columns: [
			 { field: "OrderID", headerText: "Order ID" },
			 { field: "CustomerID", headerText: "Customer ID" },
			 { field: "Freight", headerText: "Freight" }
	 ] });
	 });    
</script>

allowPaging`boolean`

Specifies whether to enable the pager feature in Grid.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>  
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));                   
$("#mobilegrid").ejmGrid ({ allowPaging: true,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });                
</script>

allowScrolling`boolean`

Specifies whether to enable the scrolling feature in Grid.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ allowScrolling: false,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

allowSelection`boolean`

Specifies whether to enable the Grid row selection.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ allowSelection: false,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

allowSorting`boolean`

Enables or disables the sorting behavior for Grid and you can sort the Grid columns in ascending or descending order.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ allowSorting: false,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });
</script>

caption`string`

Sets the caption for the Grid.

Default Value

””

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ caption: "caption", showCaption: true,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

columns`array`

It is used to define the columns that can be bound to Grid.

Default Value

[]

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejGrid({ dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });                   
</script>

cssClass`string`

Specifies the CSS class to Grid to achieve custom theme.

Default Value

””

Example

HTML

<div  id="mobilegrid" ></div>
<script> 
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ cssClass: "Customclass",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

dataSource`data`

Specifies the data source for Grid.

Default Value

null

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

enablePersistence`boolean`

Specifies whether to enable the state maintenance in Grid.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ enablePersistence: false,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

filterSettings

To customize the filtering behavior of the Grid.

filterSettings.filterBarMode`enum`

Sets the filter bar mode option in the Grid. The accepted filterBarModes are “immediate” and “onenter”. See FilterBarMode

Default Value

ej.mobile.Grid.FilterBarMode.OnEnter

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowFiltering:true,
                filterSettings: { filterBarMode: ej.mobile.Grid.FilterBarMode.OnEnter },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });           
</script>

filterSettings.filteredColumns`object`

Gets filtered column details programmatically after filtering.

Default Value

[]

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowFiltering:true,
                filterSettings: { interval: 1500 },filteredColumns:[],dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });  
                 });            
</script>

filterSettings.interval`number`

Specifies the filter interval in milliseconds when filterbar mode is set to Immediate.

Default Value

1500

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowFiltering:true,
                filterSettings: { interval: 1500 },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });  
                 });            
</script>

pageSettings

This property is used to modify the default pager configuration.

pageSettings.currentPage`number`

This is used to define the page that has to be displayed currently.

Default Value

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowPaging:true,
                pageSettings: { currentPage: 1 },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });               
</script>

pageSettings.display`enum`

Defines the pager position that can be fixed or normal. See PagerDisplay

Default Value

ej.mobile.Grid.PagerDisplay.Normal

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowPaging:true,
                pageSettings: { display: ej.mobile.Grid.PagerDisplay.Normal },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });              
</script>

pageSettings.pageSize`number`

Defines the number of records displayed per page.

Default Value

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowPaging:true,
                pageSettings:{ pageSize: 5 },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });               
</script>

pageSettings.totalRecordsCount`number`

It holds the total records count available in the Grid.

Default Value

null

Example

HTML

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

pageSettings.type`enum`

Defines the pager type, scrollable or normal. See PagerType

Default Value

ej.mobile.Grid.PagerType.Scrollable

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowPaging:true,
                pageSettings:{ type: ej.mobile.Grid.PagerType.Scrollable },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });              
</script>

renderMode`enum`

Changes the rendering mode of the Grid. It can be auto, ios7, android, windows or flat. See RenderMode

Default Value

auto

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ renderMode: ej.mobile.RenderMode.Auto,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

scrollSettings

Used to enable Grid column and row scrolling.

scrollSettings.enableColumnScrolling`boolean`

Used to enable or disable column scrolling.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowScrolling:true,
                scrollSettings:{ enableColumnScrolling: false },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });             
</script>

scrollSettings.enableNativeScrolling`boolean`

Used to enable or disable native scrolling.

Default Value

true

Example

HTML

<div  id="mobilegrid" ></div>
<script> 
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowScrolling:true,
                scrollSettings: { enableNativeScrolling: true },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });               
</script>

scrollSettings.enableRowScrolling`boolean`

Used to enable or disable row scrolling.

Default Value

true

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowScrolling:true,
                scrollSettings: { enableRowScrolling: true },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });  
                 });               
</script>

scrollSettings.height`string`

Specifies the height for the Grid content.

Default Value

auto

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowScrolling:true,
                scrollSettings: { height: "auto" },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });  
                 });             
</script>

selectedRowIndex`number`

To apply row selection based on your row index value.

Default Value

-1

Example

HTML

<div  id="mobilegrid" ></div>
<script>
// Set grid selectedRowIndex on initialization. 
//To set selectedRowIndex API value 
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ selectedRowIndex: 1,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

sortSettings

This property is used to modify sorting default configuration.

sortSettings.allowMultiSorting`boolean`

Enable or disable the multi sorting behavior of Grid.

Default Value

false

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowSorting: true,
                sortSettings: { allowMultiSorting: false },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });   
                 });              
</script>

sortSettings.sortedColumns`object`

To define the column that can be sorted and also to define the sort direction.

Default Value

[]

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ 
                allowSorting: true,
                sortSettings: { sortedColumns:[] },dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });  
                 });             
</script>

theme`enum`

Specifies the theme of the Grid. See Theme

Default Value

auto

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ theme: ej.mobile.Theme.Auto,dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });    
</script>

transition`string`

Specifies the transition type when navigation happens while interacting with Grid.

Default Value

For Android, “pop”. For Windows, “turn”. For IOS, “slide”.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
// Set grid transition on initialization. 
//To set transition API value 
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid ({ transition: "slide",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });
</script>

Methods

getColumnByField`()`

To get column by field.

Example

HTML

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

HTML

<div id="mobilegrid"></div> 
<script>
// Get the column details based on the given field name
$("#mobilegrid").ejGrid("getColumnByField", "OrderID");        
</script>

getColumnByHeaderText`()`

To get column by header text.

Example

HTML

<div  id="mobilegrid" ></div>  
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.getColumnByHeaderText("Order ID"); // Get column by header text
</script>

HTML

<div  id="mobilegrid" ></div>  
<script>
// Get column by header text
$("#mobilegrid").ejmGrid("getColumnByHeaderText", "Order ID");  
</script>

getColumnByIndex`()`

To get column by index.

Example

HTML

<div  id="mobilegrid" ></div>        
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.getColumnByIndex(1); // Get column by index
</script>

HTML

<div  id="mobilegrid" ></div>  
<script>
// Get column by index
$("#mobilegrid").ejmGrid("getColumnByIndex",1); 
</script>

getColumnFieldNames`()`

To get column field names.

Example

HTML

<div id="mobilegrid"></div> 
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.getColumnFieldNames(); // Get column field names
</script>

HTML

<div id="mobilegrid"></div> 
<script>
// Get column field names
$("#mobilegrid").ejmGrid("getColumnFieldNames");        
</script>

getColumnIndexByField`()`

To get column index by field.

Example

HTML

<div id="mobilegrid"></div>
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.getColumnIndexByField("OrderID"); // Get column index by field
</script>

HTML

<div id="mobilegrid"></div>
<script>
// Get column index by field
$("#mobilegrid").ejmGrid("getColumnIndexByField","OrderID");    
</script>

getColumnMemberByIndex`()`

To get column member by index.

Example

HTML

<div id="mobilegrid"></div>
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.getColumnMemberByIndex(1); // Get column member by index
</script>

HTML

<div id="mobilegrid"></div>
<script>
// Get column member by index
$("#mobilegrid").ejmGrid("getColumnMemberByIndex",1);   
</script>

hideColumns`()`

To hide the specified column.

Example

HTML

<div id="mobilegrid"></div> 
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.hideColumns("Order ID"); // Hides column based on the given header text of the column
</script>

HTML

<div id="mobilegrid"></div> 
<script>
// Hides column based on the given header text of the column
$("#mobilegrid").ejmGrid("hideColumns","Order ID"); 
</script>

refreshContent`()`

It is used to refresh the Grid contents.

Name	Type	Description
HTML `[requestType].`	enum	The request type can be refresh, paging, sorting, filtering. If no parameter is passed, the request type is refresh

Example

HTML

<div id="mobilegrid"></div>
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.refreshContent(); 
</script>

HTML

<div id="mobilegrid"></div>
<script>
$("#mobilegrid").ejmGrid("refreshContent");     
</script>

scrollRefresh`()`

To refresh Grid scroll panel.

Example

HTML

<div id="mobilegrid"></div> 
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.scrollRefresh(); // To Refresh grid scrollpanel
</script>

HTML

<div id="mobilegrid"></div> 
<script>
// To Refresh grid scrollpanel
$("#mobilegrid").ejmGrid("scrollRefresh"); 
</script>

showColumns`()`

To show the specified column.

Example

HTML

<div id="mobilegrid"></div>
<script>
// Create Grid
var grid = $("#mobilegrid").data("ejmGrid");
grid.showColumns("Order ID"); // Shows column based on the given header text of the column
</script>

HTML

<div id="mobilegrid"></div>
<script>
// Shows column based on the given header text of the column
$("#mobilegrid").ejmGrid("showColumns","Order ID");     
</script>

Events

actionBegin

Triggered for every Grid action before it starts.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `requestType`	string	Returns request type.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
//actionBegin event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ actionBegin:"actionBegin",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });            
function actionBegin(args) { //handle the event }                       
</script>

actionComplete

Event triggers when loading action of Grid data succeeds.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `requestType`	string	Returns request type.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
//actionComplete event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ actionComplete:"actionComplete",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });
function actionComplete(args) { //handle the event }            
</script>

actionFailure

Event triggers when loading action of Grid data fails.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `requestType`	string	Returns request type.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ actionFailure:"actionFailure",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });
function actionFailure(args) { //handle the event }            
</script>

actionSuccess

Triggered for every Grid action success.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `requestType`	string	Returns request type.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
//actionSuccess event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ actionSuccess:"actionSuccess",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });
function actionSuccess(args) { //handle the event }          
</script>

load

Triggered for every Grid load.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `requestType`	string	Returns request type.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ load:"load",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });
function load(args) { //handle the event }            
</script>

modelChange

Triggered every time when a model value changes.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current Grid row.
HTML `options`	Object	Returns the changed model values.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
//modelChange event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ modelChange:"modelChange",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 }); 
function modelChange(args) { //handle the event }            
</script>

queryCellInfo

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

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current cell.
HTML `data`	Object	Returns the current data.
HTML `text`	Object	Returns the current cell HTML content.

Example

HTML

<div  id="mobilegrid" ></div>
<script>
//queryCellInfo event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ queryCellInfo:"queryCellInfo",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] }); 
                 });
function queryCellInfo(args) { //handle the event }   
</script>

rowDataBound

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

Name Type Description

HTML

argument

Object

Event parameters from Grid </tbody> </table>

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current Grid row.td> </tr>
HTML `data`	Object	Returns the current data.

#### Example

HTML

<div  id="mobilegrid" ></div>
<script>
//rowDataBound event for grid
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ rowDataBound:"rowDataBound",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 }); 
function rowDataBound(args) { //handle the event }              
</script>

### rowSelected {:#events:rowselected} Triggered after the row is selected.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `rowIndex`	number	Returns the current row index.
HTML `row`	object	Returns the current row.
HTML `cell`	object	Returns the current data cell.
HTML `data`	object	Returns the current data record.

#### Example

HTML

<div  id="mobilegrid" ></div>
<script>
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
$("#mobilegrid").ejmGrid({ rowSelected:"rowSelected",dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ] });
                 });                     
function rowSelected(args) { //handle the event }
</script>

### rowSelecting {:#events:rowselecting} Triggered before the row is to be selected.

Name Type Description

HTML

argument

Object

Event parameters from Grid

Name	Type	Description
HTML `cancel`	boolean	Set to true when the event has to be canceled, else false.
HTML `model`	Object	Returns the Grid model.
HTML `type`	string	Returns the name of the event.
HTML `element`	Object	Returns the current element.
HTML `rowIndex`	number	Returns the current row index.
HTML `row`	object	Returns the current row.
HTML `cell`	object	Returns the current data cell.
HTML `data`	object	Returns the current data record.

#### Example

HTML

<div  id="mobilegrid" ></div>
<script>       
$(document).ready(function(){
var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));                   
$("#mobilegrid").ejmGrid ({ dataSource:data,columns: [
                         { field: "OrderID", headerText: "Order ID" },
                         { field: "CustomerID", headerText: "Customer ID" },
                         { field: "Freight", headerText: "Freight" }
                 ],rowSelecting:"rowSelecting" });
                 });    
function rowSelecting(args) { //handle the event }      
</script>

ejmGrid

Example

Requires

Members

allowFilteringboolean

Default Value

Example

allowPagingboolean

Default Value

Example

allowScrollingboolean

Default Value

Example

allowSelectionboolean

Default Value

Example

allowSortingboolean

Example

captionstring

Default Value

Example

columnsarray

Default Value

Example

cssClassstring

Default Value

Example

dataSourcedata

Default Value

Example

enablePersistenceboolean

Default Value

Example

filterSettings

filterSettings.filterBarModeenum

Default Value

Example

filterSettings.filteredColumnsobject

Default Value

Example

filterSettings.intervalnumber

Default Value

Example

pageSettings

pageSettings.currentPagenumber

Default Value

Example

pageSettings.displayenum

Default Value

Example

pageSettings.pageSizenumber

Default Value

Example

pageSettings.totalRecordsCountnumber

Default Value

Example

pageSettings.typeenum

Default Value

Example

renderModeenum

Default Value

Example

scrollSettings

scrollSettings.enableColumnScrollingboolean

Default Value

Example

scrollSettings.enableNativeScrollingboolean

Default Value

Example

scrollSettings.enableRowScrollingboolean

Default Value

Example

scrollSettings.heightstring

Default Value

Example

selectedRowIndexnumber

Default Value

Example

sortSettings

sortSettings.allowMultiSortingboolean

allowFiltering`boolean`

allowPaging`boolean`

allowScrolling`boolean`

allowSelection`boolean`

allowSorting`boolean`

caption`string`

columns`array`

cssClass`string`

dataSource`data`

enablePersistence`boolean`

filterSettings.filterBarMode`enum`

filterSettings.filteredColumns`object`

filterSettings.interval`number`

pageSettings.currentPage`number`

pageSettings.display`enum`

pageSettings.pageSize`number`

pageSettings.totalRecordsCount`number`

pageSettings.type`enum`

renderMode`enum`

scrollSettings.enableColumnScrolling`boolean`

scrollSettings.enableNativeScrolling`boolean`

scrollSettings.enableRowScrolling`boolean`

scrollSettings.height`string`

selectedRowIndex`number`

sortSettings.allowMultiSorting`boolean`

sortSettings.sortedColumns`object`

theme`enum`

transition`string`

getColumnByField`()`

getColumnByHeaderText`()`

getColumnByIndex`()`

getColumnFieldNames`()`

getColumnIndexByField`()`

getColumnMemberByIndex`()`

hideColumns`()`

refreshContent`()`

scrollRefresh`()`

showColumns`()`