ejmGrid

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

    allowFilteringboolean

    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>

    allowPagingboolean

    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>

    allowScrollingboolean

    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>

    allowSelectionboolean

    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>

    allowSortingboolean

    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>

    captionstring

    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>

    columnsarray

    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>

    cssClassstring

    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>

    dataSourcedata

    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>

    enablePersistenceboolean

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

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

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

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

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

    Default Value

    • 1

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

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

    Defines the number of records displayed per page.

    Default Value

    • 5

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

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

    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>

    renderModeenum

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

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

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

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

    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>

    selectedRowIndexnumber

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

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

    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>

    themeenum

    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>

    transitionstring

    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>