Syncfusion Essential JS ejGrid

5 Mar 202124 minutes to read

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

Syntax

$(element).ejGrid(options)

Name Type Description
options object settings for grid

Example

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

    Requires

    • module:jQuery
    • module:jsrender.min.js
    • module:ej.core.js
    • module:ej.data.js
    • module:ej.touch.js
    • module:ej.print.js
    • module:ej.globalize.js
    • module:ej.draggable.js
    • module:ej.grid.js
    • module:ej.pager.js
    • module:ej.scroller.js
    • module:ej.waitingpopup.js
    • module:ej.radiobutton.js
    • module:ej.dropdownlist.js
    • module:ej.dialog.js
    • module:ej.button.js
    • module:ej.autocomplete.js
    • module:ej.checkbox.js
    • module:ej.datepicker.js
    • module:ej.timepicker.js
    • module:ej.datetimepicker.js
    • module:ej.editor.js
    • module:ej.tooltip.js
    • module:ej.toolbar.js
    • module:ej.menu.js
    • module:ej.excelfilter.js

    Members

    allowCellMerging boolean

    Gets or sets a value that indicates whether to customizing cell based on our needs.

    Default Value:

    • false

    Example

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

    allowGrouping boolean

    Gets or sets a value that indicates whether to enable dynamic grouping behavior. Grouping can be done by drag on drop desired columns to grid’s GroupDropArea. This can be further customized through “groupSettings” property.

    Default Value:

    • false

    Example

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

    allowKeyboardNavigation boolean

    Gets or sets a value that indicates whether to enable keyboard support for performing grid actions. selectionType – Gets or sets a value that indicates whether to enable single row or multiple rows selection behavior in grid. Multiple selection can be done through by holding CTRL and clicking the grid rows

    Default Value:

    • true

    Example

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

    allowFiltering boolean

    Gets or sets a value that indicates whether to enable dynamic filtering behavior on grid. Filtering can be used to limit the records displayed using required criteria and this can be further customized through “filterSettings” property

    Default Value:

    • false

    Example

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

    allowSorting boolean

    Gets or sets a value that indicates whether to enable the dynamic sorting behavior on grid data. Sorting can be done through clicking on particular column header.

    Default Value:

    • false

    Example

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

    allowMultiSorting boolean

    Gets or sets a value that indicates whether to enable multi columns sorting behavior in grid. Sort multiple columns by holding CTRL and click on the corresponding column header.

    Default Value:

    • false

    Example

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

    allowPaging boolean

    This specifies the grid to show the paginated data. Also enables pager control at the bottom of grid for dynamic navigation through data source. Paging can be further customized through “pageSettings” property.

    Default Value:

    • false

    Example

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

    allowReordering boolean

    Gets or sets a value that indicates whether to enable the columns reordering behavior in the grid. Reordering can be done through by drag and drop the particular column from one index to another index within the grid.

    Default Value:

    • false

    Example

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

    allowResizeToFit boolean

    Gets or sets a value that indicates whether the column is non resizable. Column width is set automatically based on the content or header text which is large.

    Default Value:

    • false

    Example

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

    allowResizing boolean

    Gets or sets a value that indicates whether to enable dynamic resizable of columns. Resize the width of the columns by simply click and move the particular column header line

    Default Value:

    • false

    Example

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

    allowRowDragAndDrop boolean

    Gets or sets a value that indicates whether to enable the rows reordering in Grid and drag & drop rows between multiple Grid.

    Default Value:

    • false

    Example

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

    allowScrolling boolean

    Gets or sets a value that indicates whether to enable the scrollbar in the grid and view the records by scroll through the grid manually

    Default Value:

    • false

    Example

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

    allowSearching boolean

    Gets or sets a value that indicates whether to enable dynamic searching behavior in grid. Currently search box can be enabled through “toolbarSettings”

    Default Value:

    • false

    Example

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

    allowSelection boolean

    Gets or sets a value that indicates whether user can select rows on grid. On enabling feature, selected row will be highlighted.

    Default Value:

    • true

    Example

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

    allowTextWrap boolean

    Gets or sets a value that indicates whether the Content will wrap to the next line if the content exceeds the boundary of the Column Cells.

    Default Value:

    • false

    Example

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

    allowMultipleExporting boolean

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

    Default Value:

    • false

    Example

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

    commonWidth number

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

    Default Value:

    • -

    Example

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

    gridLines enum

    Gets or sets a value that indicates to enable the visibility of the grid lines.

    Default Value:

    • ej.Grid.GridLines.Both
    Name Description
    Both Displays both the horizontal and vertical grid lines.
    Horizontal Displays the horizontal grid lines only.
    Vertical Displays the vertical grid lines only.
    None No grid lines are displayed.

    Example

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

    childGrid object

    This specifies the grid to add the grid control inside the grid row of the parent with expand/collapse options

    Default Value:

    • null

    Example

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

    columns.clipMode enum

    Sets the clip mode for Grid cell as ellipsis or clipped content(both header and content)

    Default Value:

    • ej.Grid.ClipMode.Clip
    Name Description
    Ellipsis Shows ellipsis for the overflown cell.
    Clip Truncate the text in the cell
    EllipsisWithTooltip Shows ellipsis and tooltip for the overflown cell.

    Example

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

    columnLayout enum

    Used to enable or disable static width settings for column. If the columnLayout is set as fixed, then column width will be static.

    Default Value:

    • ej.Grid.ColumnLayout.Auto
    Name Description
    Auto Column layout is auto(based on width).
    Fixed Column layout is fixed(based on width).

    Example

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

    columns array

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

    Default Value:

    • []

    Example

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

    columns.allowEditing boolean

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

    Default Value:

    • true

    Example

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

    columns.allowFiltering boolean

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

    Default Value:

    • true

    Example

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

    columns.allowGrouping boolean

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

    Default Value:

    • true

    Example

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

    columns.allowSorting boolean

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

    Default Value:

    • true

    Example

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

    columns.allowResizing boolean

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

    Default Value:

    • true

    Example

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

    columns.commands array

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

    Default Value:

    • []

    Example

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

    columns.commands.buttonOptions object

    Gets or sets an object that indicates to define all the button options which are available in ejButton.

    Default Value:

    • -

    Example

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

    columns.commands.type enum

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

    Default Value:

    • -
    Name Description
    Edit Unbound type is edit.
    Save Unbound type is save.
    Delete Unbound type is delete.
    Cancel Unbound type is cancel.

    Example

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

    columns.cssClass string

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

    Default Value:

    • -

    Example

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

    columns.customAttributes object

    Gets or sets a value that indicates the attribute values to the td element of a particular column

    Default Value:

    • -

    Example

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

    columns.dataSource object

    Gets or sets a value that indicates to bind the external datasource to the particular column when column editType as dropdownedit and also it is used to bind the datasource to the foreign key column while editing the grid. //Where data is array of JSON objects of text and value for the drop-down and array of JSON objects for foreign key column.

    Default Value:

    • null

    Example

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

    columns.defaultValue string|number|boolean|date

    Gets or sets a value that indicates to display the specified default value while adding a new record to the grid

    Default Value:

    • -

    Example

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

    columns.disableHtmlEncode boolean

    Gets or sets a value that indicates to render the grid content and header with an HTML elements

    Default Value:

    • false

    Example

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

    columns.displayAsCheckbox boolean

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

    Default Value:

    • true

    Example

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

    columns.editParams object

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

    Default Value:

    • -

    Example

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

    columns.editTemplate object

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

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div> 
    <script>
    $("#Grid").ejGrid({
      dataSource:window.gridData,
      editSettings:{allowEditing:true},
      columns:[{field:"OrderID"},{field:"CustomerID"},
                { field: "EmployeeID",editTemplate: { create: function () { return "<input>"; }, read: function (args) { return args.ejMaskEdit("get_StrippedValue"); }, write: function (args) { args.element.ejMaskEdit({ width: "100%" ,maskFormat: "9",value: args.rowdata !== undefined ? args.rowdata["EmployeeID"]: "" }); } } }]
    });
    </script>

    columns.editType enum

    Gets or sets a value that indicates to render the element(based on edit type) for editing the grid record. See editingType

    Default Value:

    • ej.Grid.EditingType.String
    Name Description
    String Specifies editing type as string edit.
    Boolean Specifies editing type as boolean edit.
    Numeric Specifies editing type as numeric edit.
    Dropdown Specifies editing type as dropdown edit.
    DatePicker Specifies editing type as datepicker.
    DateTimePicker Specifies editing type as datetime picker.

    Example

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

    columns.enableGroupByFormat boolean

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

    Default Value:

    • false

    Example

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

    columns.field string

    Gets or sets a value that indicates to display the columns in the grid mapping with column name of the dataSource.

    Default Value:

    • ””

    Example

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

    columns.filterBarTemplate object

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

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div> 
    <script>
    $("#Grid").ejGrid({
      dataSource:window.gridData,
      allowFiltering:true,
      columns:[{field:"OrderID"},{
        field: "CustomerID", width: 100, filterBarTemplate: {
            create: function (args) {
                return "<input>"
            },
            write: function (args) {
                var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("CustomerID"));
                args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, focusOut: ej.proxy(
    			args.column.filterBarTemplate.read, this, args) });
            },
            read: function (args) {
                this.filterColumn(args.column.field, "equal", args.element.val(), "and", true)
            },
        },
    }, {field :"EmployeeID"}]
    });
    </script>

    columns.filterType enum

    Gets or sets a value that indicates to render the excel or menu filter dialog to the grid columns. See filterType

    Default Value:

    • null
    Name Description
    Menu Specifies the filter type as menu.
    Excel Specifies the filter type as excel.

    Example

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

    columns.foreignKeyField string

    Gets or sets a value that indicates to define foreign key field name of the grid datasource.

    Default Value:

    • null

    Example

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

    columns.foreignKeyValue string

    Gets or sets a value that indicates to bind the field which is in foreign column datasource based on the foreignKeyField

    Default Value:

    • null

    Example

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

    columns.format string

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

    Default Value:

    • -

    Example

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

    columns.headerTemplateID string

    Gets or sets a value that indicates to add the template within the header element of the particular column.

    Default Value:

    • null

    Example

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

    columns.headerText string

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

    Default Value:

    • ””

    Example

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

    columns.headerTextAlign enum

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

    Default Value:

    • null
    Add a comment to this line
    Name Description
    Center Header text is centered.
    Justify Header text is justified.
    Left Header text is aligned to the left.
    Right Header text is aligned to the right.

    Example

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

    columns.headerTooltip string

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

    Default Value:

    • null

    Example

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

    columns.isFrozen boolean

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

    Default Value:

    • false

    Example

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

    columns.isIdentity boolean

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

    Default Value:

    • false

    Example

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

    columns.isPrimaryKey boolean

    Gets or sets a value that indicates the column is act as a primary key(read-only) of the grid. The editing is performed based on the primary key column

    Default Value:

    • false

    Example

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

    columns.priority number

    Gets or sets a value that indicates the order of Column that are to be hidden or visible when Grid element is in responsive mode and could not occupy all columns.

    Default Value:

    • -1

    Example

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

    columns.showInColumnChooser boolean

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

    Default Value:

    • true

    Example

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

    columns.template boolean|string

    Gets or sets a value that indicates whether to enables column template for a particular column.

    Default Value:

    • false

    Example

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

    columns.textAlign enum

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

    Default Value:

    • ej.TextAlign.Left
    Name Description
    Center Text is centered.
    Justify Text is justified.
    Left Text is aligned to the left.
    Right Text is aligned to the right.

    Example

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

    columns.tooltip string

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

    Default Value:

    • null

    Example

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

    columns.type string

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

    Default Value:

    • -

    Example

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

    columns.validationRules object

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

    Example

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

    columns.visible boolean

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

    Default Value:

    • true

    Example

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

    columns.width number

    Gets or sets a value that indicates to define the width for a particular column in the grid.

    Default Value:

    • -

    Example

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

    contextMenuSettings object

    Gets or sets an object that indicates whether to customize the context menu behavior of the grid.

    contextMenuSettings.contextMenuItems Array

    Gets or sets a value that indicates whether to add the default context menu actions as a context menu items If enableContextMenu is true it will show all the items related to the target, if you want selected items from contextmenu you have to mention in the contextMenuItems

    Default Value:

    • []

    Example

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

    contextMenuSettings.customContextMenuItems array

    Gets or sets a value that indicates whether to add custom contextMenu items within the toolbar to perform any action in the grid

    Default Value:

    • []

    Example

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

    contextMenuSettings.enableContextMenu boolean

    Gets or sets a value that indicates whether to enable the context menu action in the grid.

    Default Value:

    • false

    Example

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

    contextMenuSettings.subContextMenu array

    Used to get or set the subMenu to the corresponding custom context menu item.

    contextMenuSettings.subContextMenu.contextMenuItem string

    Used to get or set the corresponding custom context menu item to which the submenu to be appended.

    Default Value:

    • null

    contextMenuSettings.subContextMenu.subMenu array

    Used to get or set the sub menu items to the custom context menu item.

    Default Value:

    • []

    Example

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

    contextMenuSettings.subContextMenu.template string

    Used to get or set the sub menu items to the custom context menu item using JsRender template.

    Default Value:

    • null

    Example

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

    contextMenuSettings.disableDefaultItems boolean

    Gets or sets a value that indicates whether to disable the default context menu items in the grid.

    Default Value:

    • false

    Example

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

    cssClass string

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

    Default Value:

    • ””

    Example

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

    dataSource object

    Gets or sets the data to render the grid with records

    Default Value:

    • null

    Example

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

    detailsTemplate string

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

    Default Value:

    • null

    Example

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

    editSettings object

    Gets or sets an object that indicates whether to customize the editing behavior of the grid.

    editSettings.allowAdding boolean

    Gets or sets a value that indicates whether to enable insert action in the editing mode.

    Default Value:

    • false

    Example

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

    editSettings.allowDeleting boolean

    Gets or sets a value that indicates whether to enable the delete action in the editing mode.

    Default Value:

    • false

    Example

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

    editSettings.allowEditing boolean

    Gets or sets a value that indicates whether to enable the edit action in the editing mode.

    Default Value:

    • false

    Example

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

    editSettings.allowEditOnDblClick boolean

    Gets or sets a value that indicates whether to enable the editing action while double click on the record

    Default Value:

    • true

    Example

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

    editSettings.dialogEditorTemplateID string

    This specifies the id of the template. This template can be used to display the data that you require to be edited using the Dialog Box

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div>
    <script id="template" type="text/template">
       <table>
           <tr>
               <td>OrderID</td>
               <td>
                   <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
           </tr>
           <tr>
               <td>CustomerID</td>
               <td>
                   <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
           </tr>
           <tr>
               <td>EmployeeID</td>
               <td>
                   <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
           </tr>
       </table>
    </script>
    <script>
    $("#Grid").ejGrid({
        dataSource: window.gridData,
        columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
        editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.DialogTemplate, dialogEditorTemplateID: "#template" },
        toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
    });
    </script>

    editSettings.editMode enum

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

    Default Value:

    • ej.Grid.EditMode.Normal
    Add a comment to this line
    Name Description
    Normal Edit mode is normal.
    Dialog Edit mode is dialog.
    DialogTemplate Edit mode is dialog template.
    Batch Edit mode is batch.
    InlineForm Edit mode is inline form.
    InlineTemplateForm Edit mode is inline template form.
    ExternalForm Edit mode is external form.
    ExternalFormTemplate Edit mode is external form template.

    Example

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

    editSettings.externalFormTemplateID string

    This specifies the id of the template. This template can be used to display the data that you require to be edited using the External edit form

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div>
    <script id="template" type="text/template">
       <table>
           <tr>
               <td>OrderID</td>
               <td>
                   <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
           </tr>
           <tr>
               <td>CustomerID</td>
               <td>
                   <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
           </tr>
           <tr>
               <td>EmployeeID</td>
               <td>
                   <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
           </tr>
       </table>
    </script>
    <script>
    $("#Grid").ejGrid({
        dataSource: window.gridData,
        columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
        editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.ExternalFormTemplate, externalFormTemplateID: "#template" },
        toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
    });
    </script>

    editSettings.formPosition enum

    This specifies to set the position of an External edit form either in the top-right or bottom-left of the grid. See formPosition

    Default Value:

    • ej.Grid.FormPosition.BottomLeft
    Name Description
    BottomLeft Form position is bottomleft.
    TopRight Form position is topright.

    Example

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

    editSettings.inlineFormTemplateID string

    This specifies the id of the template. This template can be used to display the data that you require to be edited using the Inline edit form

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div>
    <script id="template" type="text/template">
       <table>
           <tr>
               <td>OrderID</td>
               <td>
                   <input id="OrderID" name="OrderID" value="{{:OrderID}}" disabled="disabled" /></td>
           </tr>
           <tr>
               <td>CustomerID</td>
               <td>
                   <input id="CustomerID" name="CustomerID" value="{{:CustomerID}}" /></td>
           </tr>
           <tr>
               <td>EmployeeID</td>
               <td>
                   <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" /></td>
           </tr>
       </table>
    </script>
    <script>
    $("#Grid").ejGrid({
        dataSource: window.gridData,
        columns: [{ field: "OrderID", isPrimaryKey: true }, { field: "CustomerID" }, { field: "ShipCity" }],
        editSettings: { allowEditing: true, editMode: ej.Grid.EditMode.InlineTemplateForm, inlineFormTemplateID: "#template" },
        toolbarSettings: { showToolbar: true, toolbarItems: ["edit"] }                             
    });
    </script>

    editSettings.rowPosition enum

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

    Default Value:

    • ej.Grid.RowPosition.Top
    Name Description
    Top Specifies position of add new row as top.
    Bottom Specifies position of add new row as bottom.

    Example

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

    editSettings.showConfirmDialog boolean

    Gets or sets a value that indicates whether the confirm dialog has to be shown while saving or discarding the batch changes

    Default Value:

    • true

    Example

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

    editSettings.showDeleteConfirmDialog boolean

    Gets or sets a value that indicates whether the confirm dialog has to be shown while deleting record

    Default Value:

    • false

    Example

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

    editSettings.titleColumn string

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

    Default Value:

    • null

    Example

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

    editSettings.showAddNewRow boolean

    Gets or sets a value that indicates whether to display the add new form by default in the grid.

    Default Value:

    • false

    Example

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

    enableAltRow boolean

    Gets or sets a value that indicates whether to enable the alternative rows differentiation in the grid records based on corresponding theme.

    Default Value:

    • true

    Example

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

    enableAutoSaveOnSelectionChange boolean

    Gets or sets a value that indicates whether to enable the save action in the grid through row selection

    Default Value:

    • true

    Example

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

    enableHeaderHover boolean

    Gets or sets a value that indicates whether to enable mouse over effect on the corresponding column header cell of the grid

    Default Value:

    • false

    Example

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

    enablePersistence boolean

    Gets or sets a value that indicates whether to persist the grid model state in page using applicable medium i.e., HTML5 localStorage or cookies

    Default Value:

    • false

    Example

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

    enableResponsiveRow boolean

    Gets or sets a value that indicates whether the grid rows has to be rendered as detail view in mobile mode

    Default Value:

    • false

    Example

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

    enableRowHover boolean

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

    Default Value:

    • true

    Example

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

    enableRTL boolean

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

    Default Value:

    • false

    Example

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

    enableTouch boolean

    To Disable the mouse swipe property as false.

    Default Value:

    • true

    Example

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

    enableToolbarItems boolean

    It sets a value that indicates whether to enable toolbar items, when allowEditing, allowAdding and allowDeleting property set as false in the grid.

    Default Value:

    • false

    Example

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

    exportToExcelAction string

    Act as mapper for the excel exporting URL.

    Default Value:

    • ExportToExcel

    Example

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

    exportToPdfAction string

    Act as mapper for the PDF exporting URL.

    Default Value:

    • ExportToPdf

    Example

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

    exportToWordAction string

    Act as mapper for the Word exporting URL.

    Default Value:

    • ExportToWord

    Example

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

    filterSettings object

    Gets or sets an object that indicates whether to customize the filtering behavior of the grid

    filterSettings.enableCaseSensitivity boolean

    Gets or sets a value that indicates to perform the filter operation with case sensitive in excel styled filter menu mode

    Default Value:

    • false

    Example

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

    filterSettings.enableInterDeterminateState boolean

    Gets or sets a value that indicates to define the interDeterminateState of checkbox in excel filter dialog.

    Default Value:

    • true

    Example

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

    filterSettings.filterBarMode enum

    This specifies the grid to starts the filter action while typing in the filterBar or after pressing the enter key. based on the filterBarMode. See filterBarMode.

    Default Value:

    • ej.Grid.FilterBarMode.Immediate
    Name Description
    Immediate Initiate filter operation on typing the filter query.
    OnEnter Initiate filter operation after Enter key is pressed.

    Example

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

    filterSettings.filteredColumns array

    Gets or sets a value that indicates whether to define the filtered columns details programmatically at initial load

    Default Value:

    • []

    filterSettings.filteredColumns.field string

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

    filterSettings.filteredColumns.matchCase boolean

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

    filterSettings.filteredColumns.operator enum

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

    Default Value:

    • -
    Name Description
    startsWith Specifies the filter operator as startswith.
    endsWith Specifies the filter operator as endswith.
    contains Specifies the filter operator as contains.
    equal Specifies the filter operator as equal.
    notEqual Specifies the filter operator as notequal.
    greaterThan Specifies the filter operator as greaterthan.
    greaterThanOrEqual Specifies the filter operator as greaterthanorequal.
    lessThan Specifies the filter operator as lessthan.
    lessThanOrEqual Specifies the filter operator as Lessthanorequal.

    filterSettings.filteredColumns.predicate string

    Gets or sets a value that indicates whether to define the predicate as and/or.

    filterSettings.filteredColumns.value string|number

    Gets or sets a value that indicates whether to define the value to be filtered in a column.

    Example

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

    filterSettings.filterType enum

    This specifies the grid to show the filterBar or filterMenu to the grid records. See filterType

    Default Value:

    • ej.Grid.FilterType.FilterBar
    Name Description
    Menu Specifies the filter type as menu.
    Excel Specifies the filter type as excel.
    FilterBar Specifies the filter type as filterbar.

    Example

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

    filterSettings.immediateModeDelay number

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

    Default Value:

    • 1500

    Example

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

    filterSettings.maxFilterChoices number

    Gets or sets a value that indicates the maximum number of filter choices that can be showed in the excel styled filter menu.

    Default Value:

    • 1000

    Example

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

    filterSettings.showFilterBarStatus boolean

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

    Default Value:

    • true

    Example

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

    filterSettings.showPredicate boolean

    Gets or sets a value that indicates whether to enable the predicate options in the filtering menu

    Default Value:

    • false

    Example

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

    groupSettings object

    Gets or sets an object that indicates whether to customize the grouping behavior of the grid.

    groupSettings.captionFormat string

    Gets or sets a value that customize the group caption format.

    Default Value:

    • null

    Example

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

    groupSettings.enableDropAreaAutoSizing boolean

    Gets or sets a value that indicates whether to enable animation button option in the group drop area of the grid.

    Default Value:

    • false

    Example

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

    groupSettings.groupedColumns array

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

    Default Value:

    • []

    Example

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

    groupSettings.showDropArea boolean

    Gets or sets a value that indicates whether to show the group drop area just above the column header. It can be used to avoid ungrouping the already grouped column using groupSettings.

    Default Value:

    • true

    Example

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

    groupSettings.showGroupedColumn boolean

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

    Default Value:

    • false

    Example

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

    groupSettings.showToggleButton boolean

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

    Default Value:

    • false

    Example

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

    groupSettings.showUngroupButton boolean

    Gets or sets a value that indicates whether to enable the close button in the grouped column which is in the group drop area to ungroup the grouped column

    Default Value:

    • false

    Example

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

    isResponsive boolean

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

    Default Value:

    • false

    Example

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

    keySettings object

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

    Default Value:

    • null

    Example

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

    locale string

    Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region.

    Default Value:

    • “en-US”

    Example

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

    minWidth number

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

    Default Value:

    • 0

    Example

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

    pageSettings object

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

    pageSettings.currentPage number

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

    Default Value:

    • 1

    Example

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

    pageSettings.enableQueryString boolean

    Gets or sets a value that indicates whether to pass the current page information as a query string along with the URL while navigating to other page.

    Default Value:

    • false

    Example

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

    pageSettings.enableTemplates boolean

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

    Default Value:

    • false

    Example

  • HTML
  • <div id="Grid"></div> 
    <script id="pagerTemplate" type="text/x-jsrender">
     <input type="text" id="txtPageNumber"  value="" style="width: 45px; border: none; cursor: text" />
    <input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" onclick="gotoPage(this)" />
    </script>
    <script>
    $("#Grid").ejGrid({
     dataSource:window.gridData,
     pageSettings:{enableTemplates:true,template:"#pagerTemplate"}
    });
    </script>

    pageSettings.pageCount number

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

    Default Value:

    • 8

    Example

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

    pageSettings.pageSize number

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

    Default Value:

    • 12

    Example

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

    pageSettings.pageSizeList array

    Gets or sets different page size values to the Dropdown in Grid Pager, by which number of records in a page can be changed dynamically.

    Default Value:

    • []

    Example

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

    pageSettings.showDefaults boolean

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

    Default Value:

    • false

    Example

  • HTML
  • <div id="Grid"></div> 
    <script id="pagerTemplate" type="text/x-jsrender">
     <input type="text" id="txtPageNumber"  value="" style="width: 45px; border: none; cursor: text" />
    <input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" />
    </script>
    <script>
    $("#Grid").ejGrid({
     dataSource:window.gridData,
     pageSettings:{showDefaults:true,enableTemplates:true,templateID:"#pagerTemplate"}
    });
    </script>

    pageSettings.template string

    Gets or sets a value that indicates to add the template as a pager template for grid.

    Default Value:

    • null

    Example

  • HTML
  • <div id="Grid"></div> 
    <script id="pagerTemplate" type="text/x-jsrender">
     <input type="text" id="txtPageNumber"  value="" style="width: 45px; border: none; cursor: text" />
    <input type="button" value="Go" style="border: none; cursor: pointer" id="btnGo" />
    </script>
    <script>
    $("#Grid").ejGrid({
     dataSource:window.gridData,
     pageSettings:{enableTemplates:true,template:"#pagerTemplate"}
    });
    </script>

    pageSettings.totalPages number

    Get the value of total number of pages in the grid. The totalPages value is calculated based on page size and total records of grid

    Default Value:

    • null

    Example

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

    pageSettings.totalRecordsCount number

    Get the value of total number of records which is bound to the grid. The totalRecordsCount value is calculated based on dataSource bound to the grid.

    Default Value:

    • null

    Example

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

    pageSettings.printMode enum

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

    Default Value:

    • ej.Grid.PrintMode.AllPages
    Name Description
    AllPages Prints all pages.
    CurrentPage Prints current page.

    Example

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

    query Object

    Query the dataSource from the table for Grid.

    Default Value:

    • null

    Example

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

    resizeSettings object

    Gets or sets an object that indicates whether to modify the resizing behavior.

    resizeSettings.resizeMode enum

    Gets or sets a value that indicates whether to define the mode of resizing.

    Default Value:

    • ej.Grid.ResizeMode.Normal
    Name Description
    Normal New column size will be adjusted by all other Columns
    NextColumn New column Size will be adjusted using next column.
    Control New column Size will be adjusted using entire control

    Example

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

    rowTemplate string

    Gets or sets a value that indicates to render the grid with template rows. The template row must be a table row. That table row must have the JavaScript render binding format () then the grid data source binds the data to the corresponding table row of the template.

    Default Value:

    • null

    Example

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

    rowDropSettings object

    Gets or sets an object that indicates whether to customize the drag and drop behavior of the grid rows

    rowDropSettings.dropTargetID object

    This specifies the grid to drop the grid rows only at particular target element.

    Default Value:

    • null

    Example

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

    rowDropSettings.dragMapper string

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

    Default Value:

    • null

    Example

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

    rowDropSettings.dropMapper string

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

    Default Value:

    • null

    Example

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

    rowDropSettings.dragBehavior enum

    Gets or sets a value that indicates whether move or copy a record from one grid to another or within the grid

    Default Value:

    • ej.Grid.DragBehavior.Move
    Name Description
    Move Allows to move a record from one grid to another or within the grid.
    Copy Allows to copy a record from one grid to another or within the grid.

    Example

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

    searchSettings object

    Gets or sets an object that indicates whether to customize the searching behavior of the grid

    searchSettings.fields object

    This specify the grid to search for the value in particular columns that is mentioned in the field.

    Default Value:

    • []

    Example

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

    searchSettings.key string

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

    Default Value:

    • ””

    Example

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

    searchSettings.operator string

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

    List of enum type operators

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

    Default Value:

    • contains

    Example

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

    searchSettings.ignoreCase boolean

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

    Default Value:

    • true

    Example

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

    selectedRecords array

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

    Default Value:

    • null

    Example

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

    selectedRowIndex number

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

    Default Value:

    • -1

    Example

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

    selectedRowIndices array

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

    Default Value:

    • []

    Example

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

    selectionSettings object

    This property is used to configure the selection behavior of the grid.

    selectionSettings.cellSelectionMode enum

    Gets or sets a value that indicates the cell selection actions based on the cell selection mode.

    Default Value:

    • ej.Grid.CellSelectionMode.Flow
    Name Description
    Flow It selects cells continuously from the start cell to end cell.
    Box It selects range of cells as a block from start cell to the end cell.

    Example

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

    selectionSettings.enableToggle boolean

    Gets or sets a value that indicates whether to enable the toggle selection behavior for row, cell and column.

    Default Value:

    • false

    Example

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

    selectionSettings.allowDragSelection boolean

    Gets or sets a value that indicates whether to select multiple rows or cells by performing dragging in Grid.

    Default Value:

    • false

    Example

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

    selectionSettings.selectionMode array

    Gets or sets a value that indicates whether to add the default selection actions as a selection mode.See selectionMode

    Default Value:

    • [“row”]
    Name Description
    Row Selection is row basis.
    Cell Selection is cell basis.
    Column Selection is column basis.

    Example

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

    selectionType enum

    The row selection behavior of grid. Accepting types are “single” and “multiple”.

    Default Value:

    • ej.Grid.SelectionType.Single
    Name Description
    Single Specifies the selection type as single.
    Multiple Specifies the selection type as multiple.

    Example

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

    scrollSettings object

    Gets or sets an object that indicates whether to customize the scrolling behavior of the grid.

    scrollSettings.allowVirtualScrolling boolean

    This specify the grid to to view data that you require without buffering the entire load of a huge database

    Default Value:

    • false

    Example

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

    scrollSettings.autoHide boolean

    It accepts the boolean value and shows or hides the scrollbar while focus in or focus out of the Grid.

    Default Value:

    • false

    Example

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

    scrollSettings.buttonSize number

    Specifies the height and width of button in the scrollbar.

    Default Value:

    • 18

    Example

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

    scrollSettings.enableTouchScroll boolean

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

    Default Value:

    • true

    Example

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

    scrollSettings.frozenColumns number

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

    Default Value:

    • 0

    Example

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

    scrollSettings.frozenRows number

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

    Default Value:

    • 0

    Example

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

    scrollSettings.height string|number

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

    Default Value:

    • 0

    Example

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

    scrollSettings.scrollerSize number

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

    Default Value:

    • 18

    Example

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

    scrollSettings.virtualScrollMode enum

    This is used to define the mode of virtual scrolling in grid. See virtualScrollMode

    Default Value:

    • ej.Grid.VirtualScrollMode.Normal
    Name Description
    Normal virtual scroll mode is normal.
    Continuous virtual scroll mode is continuous.

    Example

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

    scrollSettings.enableVirtualization boolean

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

    Default Value:

    • false

    Example

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

    scrollSettings.width string|number

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

    Default Value:

    • 250

    Example

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

    scrollSettings.scrollOneStepBy number

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

    Default Value:

    • 57

    Example

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

    showColumnChooser boolean

    Gets or sets a value that indicates whether to enable column chooser on grid. On enabling feature able to show/hide grid columns

    Default Value:

    • false

    Example

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

    showStackedHeader boolean

    Gets or sets a value that indicates stacked header should be shown on grid layout when the property “stackedHeaderRows” is set.

    Default Value:

    • false

    Example

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

    showSummary boolean

    Gets or sets a value that indicates summary rows should be shown on grid layout when the property “summaryRows” is set

    Default Value:

    • false

    Example

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

    sortSettings object

    Gets or sets a value that indicates whether to customize the sorting behavior of the grid.

    sortSettings.sortedColumns array

    Gets or sets a value that indicates whether to define the direction and field to sort the column.

    sortSettings.sortedColumns.direction string

    Gets or sets a value that indicates whether to define the direction to sort the column.

    Default Value:

    • -

    Example

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

    sortSettings.sortedColumns.field string

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

    Default Value:

    • -

    Example

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

    stackedHeaderRows array

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

    Default Value:

    • []

    Example

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

    stackedHeaderRows.stackedHeaderColumns array

    Gets or sets a value that indicates whether to add stacked header columns into the stacked header rows

    Default Value:

    • []

    Example

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

    stackedHeaderRows.stackedHeaderColumns.column object

    Gets or sets a value that indicates the header text for the particular stacked header column.

    Default Value:

    • null

    Example

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

    stackedHeaderRows.stackedHeaderColumns.cssClass string

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

    Default Value:

    • null

    Example

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

    stackedHeaderRows.stackedHeaderColumns.headerText string

    Gets or sets a value that indicates the header text for the particular stacked header column.

    Default Value:

    • null

    Example

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

    stackedHeaderRows.stackedHeaderColumns.textAlign string

    Gets or sets a value that indicates the text alignment of the corresponding headerText.

    Default Value:

    • ej.TextAlign.Left

    Example

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

    stackedHeaderRows.stackedHeaderColumns.tooltip string

    Sets the template for tooltip for the Grid stackedHeaderColumns.

    Default Value:

    • null

    Example

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

    summaryRows array

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

    Default Value:

    • []

    Example

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

    summaryRows.showCaptionSummary boolean

    Gets or sets a value that indicates whether to show the summary value within the group caption area for the corresponding summary column while grouping the column

    Default Value:

    • false

    Example

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

    summaryRows.showGroupSummary boolean

    Gets or sets a value that indicates whether to show the group summary value for the corresponding summary column while grouping a column

    Default Value:

    • false

    Example

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

    summaryRows.showTotalSummary boolean

    Gets or sets a value that indicates whether to show the total summary value the for the corresponding summary column. The summary row is added after the grid content.

    Default Value:

    • true

    Example

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

    summaryRows.summaryColumns array

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

    Default Value:

    • []

    Example

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

    summaryRows.summaryColumns.customSummaryValue string

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

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.dataMember string

    This specifies summary column used to perform the summary calculation

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.displayColumn string

    Gets or sets a value that indicates to define the target column at which to display the summary.

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.format string

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

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.prefix string

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

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.suffix string

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

    Default Value:

    • null

    Example

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

    summaryRows.summaryColumns.summaryType enum

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

    Default Value:

    • []
    Name Description
    Average Summary type is average.
    Minimum Summary type is minimum.
    Maximum Summary type is maximum.
    Count Summary type is count.
    Sum Summary type is sum.
    Custom Summary type is custom.
    TrueCount Summary type is true count.
    FalseCount Summary type is false count.

    Example

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

    summaryRows.summaryColumns.template string

    Gets or sets a value that indicates to add the template for the summary value of dataMember given.

    Default Value:

    • null

    Example

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

    summaryRows.title string

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

    Default Value:

    • ””

    Example

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

    summaryRows.titleColumn string

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

    Default Value:

    • null

    Example

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

    textWrapSettings object

    Gets or sets an object that indicates whether to auto wrap the grid header or content or both

    textWrapSettings.wrapMode enum

    This specifies the grid to apply the auto wrap for grid content or header or both.

    Default Value:

    • ej.Grid.WrapMode.Both
    Name Description
    Both Auto wrap is applied for both content and header.
    Content Auto wrap is applied only for content.
    Header Auto wrap is applied only for header.

    Example

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

    toolbarSettings object

    Gets or sets an object that indicates whether to enable the toolbar in the grid and add toolbar items

    toolbarSettings.customToolbarItems array

    Gets or sets a value that indicates whether to add custom toolbar items within the toolbar to perform any action in the grid

    Default Value:

    • []

    Example

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

    toolbarSettings.customToolbarItems.templateID string

    Gets or sets a value that indicates whether to add custom toolbar item as a template element.

    Default Value:

    • -

    Example

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

    toolbarSettings.customToolbarItems.tooltip string

    Gets or sets a value that indicates whether to add custom toolbar item with a custom tooltip.

    Default Value:

    • -

    Example

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

    toolbarSettings.showToolbar boolean

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

    Default Value:

    • false

    Example

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

    toolbarSettings.toolbarItems array

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

    Default Value:

    • []
    Name Description
    Add Toolbar item is add.
    Edit Toolbar item is edit.
    Delete Toolbar item is delete.
    Update Toolbar item is update.
    Cancel Toolbar item is cancel.
    Search Toolbar item is search.
    PdfExport Toolbar item is pdfExport.
    PrintGrid Toolbar item is printGrid.
    WordExport Toolbar item is wordExport.

    Example

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

    Methods

    addIgnoreOnExport(propertyNames)

    Adds a grid model property which is to be ignored upon exporting.

    Name Type Description
    propertyNames Array Pass the array of parameters which need to be ignored on exporting

    Returns:

    void

    Example

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

    addIgnoreOnToolbarServerClick(propertyNames)

    Adds a grid model property which is to be ignored upon OnServerToolbarClick.

    Name Type Description
    propertyNames Array Pass the array of parameters which need to be ignored on OnServerToolbarClick

    Returns:

    void

    Example

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

    addRecord([data,[serverChange]])

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

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

    Returns:

    void

    Example

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

    batchCancel()

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

    Returns:

    void

    Example

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

    batchSave()

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

    Returns:

    void

    Example

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

    cancelEdit()

    Send a cancel request in grid.

    Returns:

    void

    Example

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

    cancelEditCell()

    Send a cancel request to the edited cell in grid.

    Returns:

    void

    Example

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

    calculatePageSizeByParentHeight(containerHeight)

    Returns the total page size need to be displayed in grid based on the given container height. This method will also work when the property allowTextWrap as true only when wrap mode is header.

    Name Type Description
    containerHeight number When passing the container height as integer or percentage, it will returns the page size that need to be displayed for grid.

    Returns:

    number

    Example

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

    changePageSize(pageSize)

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

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

    Returns:

    void

    Example

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

    clearCellSelection()

    It is used to clear all the cell selection.

    Returns:

    boolean

    Example

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

    clearCellSelection(rowIndex,columnIndex)

    It is used to clear specified cell selection based on the rowIndex and columnIndex provided.

    Name Type Description
    rowIndex number It is used to pass the row index of the cell
    columnIndex number It is used to pass the column index of the cell.

    Returns:

    boolean

    Example

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

    clearColumnSelection([index])

    It is used to clear all the row selection or at specific row selection based on the index provided.

    Name Type Description
    index number optional If index of the column is specified then it will remove the selection from the particular column else it will clears all of the column selection

    Returns:

    boolean

    Example

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

    clearFiltering(field)

    It is used to clear all the filtering done.

    Name Type Description
    field string If field of the column is specified then it will clear the particular filtering column

    Returns:

    void

    Example

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

    clearSearching()

    Clear the searching from the grid

    Returns:

    void

    Example

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

    clearSelection([index])

    Clear all the row selection or at specific row selection based on the index provided

    Name Type Description
    index number optional If index of the row is specified then it will remove the selection from the particular row else it will clears all of the row selection

    Returns:

    boolean

    Example

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

    clearSorting()

    Clear the sorting from columns in the grid

    Returns:

    void

    Example

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

    collapseAll()

    Collapse all the group caption rows in grid

    Returns:

    void

    Example

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

    collapseGroupDropArea()

    Collapse the group drop area in grid

    Returns:

    void

    Example

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

    columns(columnDetails, [action])

    Add or remove columns in grid column collections

    Name Type Description
    columnDetails array/string Pass array of columns or string of field name to add/remove the column in grid
    action string optional Pass add/remove action to be performed. By default "add" action will perform

    Returns:

    void

    Example

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

    dataSource(datasource,[templateRefresh])

    Refresh the grid with new data source

    Name Type Description
    datasource Object Pass new data source to the grid
    templateRefresh boolean optional When templateRefresh is set true, both header and contents get refreshed

    Returns:

    void

    Example

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

    deleteRecord(fieldName, data)

    Delete a record in grid control when allowDeleting is set as true

    Name Type Description
    fieldName string Pass the primary key field Name of the column
    data Object Pass the JSON data of record need to be delete.

    Returns:

    void

    Example

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

    deleteRow($tr)

    Delete the row based on the given tr element in grid.

    Name Type Description
    $tr jQuery Pass the tr element in grid content to get its row index

    Returns:

    Element

    Example

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

    destroy()

    Destroy the grid widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Returns:

    void

    Example

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

    editCell(index, fieldName)

    Edit a particular cell based on the row index and field name provided in “batch” edit mode.

    Name Type Description
    index number Pass row index to edit particular cell
    fieldName string Pass the field name of the column to perform batch edit

    Returns:

    void

    Example

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

    editFormValidate()

    It returns a value and if the input field values of edit form is not based on the validation rules then it will show the validation message.

    Returns:

    boolean

    Example

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

    endEdit()

    Send a save request in grid.

    Returns:

    void

    Example

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

    expandAll()

    Expand all the group caption rows in grid.

    Returns:

    void

    Example

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

    expandCollapse($target)

    Expand or collapse the row based on the row state in grid

    Name Type Description
    $target jQuery Pass the target object to expand/collapse the row based on its row state

    Returns:

    void

    Example

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

    expandGroupDropArea()

    Expand the group drop area in grid.

    Returns:

    void

    Example

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

    export([action, [serverEvent], [multipleExport], [gridIds]])

    Export the grid content to excel, word or PDF document.

    Name Type Description
    action string Pass the controller action name corresponding to exporting
    serverEvent string optionalASP server event name corresponding to exporting
    multipleExport boolean optionalPass the multiple exporting value as true/false
    gridIds array optionalPass the array of the gridIds to be filtered

    Returns:

    void

    Example

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

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

    Send a filtering request to filter one column in grid.

    Name Type Description
    fieldName array/string Pass the field name of the column
    filterOperator string string/integer/dateTime operator
    filterValue string Pass the value to be filtered in a column
    predicate string Pass the predicate as and/or
    matchcase boolean optional Pass the match case value as true/false
    actualFilterValue object optionalactualFilterValue denote the filter object of current filtered columns. Pass the value to filtered in a column

    Returns:

    void

    Example

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

    filterColumn(filterCollection)

    Send a filtering request to filter single or multiple column in grid.

    Name Type Description
    filterQueries array Pass array of filterColumn query for performing filter operation

    Returns:

    void

    Example

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

    getBatchChanges()

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

    Returns:

    object

    Example

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

    getBrowserDetails()

    Get the browser details

    Returns:

    object

    Example

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

    getColumnByField(fieldName)

    Get the column details based on the given field in grid

    Name Type Description
    fieldName string Pass the field name of the column to get the corresponding column object

    Returns:

    object

    Example

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

    getColumnByHeaderText(headerText)

    Get the column details based on the given header text in grid.

    Name Type Description
    headerText string Pass the header text of the column to get the corresponding column object

    Returns:

    object

    Example

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

    getColumnByIndex(columnIndex)

    Get the column details based on the given column index in grid

    Name Type Description
    columnIndex number Pass the index of the column to get the corresponding column object

    Returns:

    object

    Example

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

    getColumnFieldNames()

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

    Returns:

    array

    Example

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

    getColumnIndexByField(fieldName)

    Get the column index of the given field in grid.

    Name Type Description
    fieldName string Pass the field name of the column to get the corresponding column index

    Returns:

    number

    Example

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

    getColumnIndexByHeaderText(headerText, [field])

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

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

    Returns:

    number

    Example

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

    getContent()

    Get the content div element of grid.

    Returns:

    Element

    Example

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

    getContentTable()

    Get the content table element of grid

    Returns:

    Array<HTMLTableElement>

    Example

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

    getCurrentEditCellData()

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

    Returns:

    object

    Example

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

    getCurrentIndex()

    Get the current page index in grid pager.

    Returns:

    number

    Example

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

    getCurrentViewData()

    Get the current page data source of grid.

    Returns:

    array

    Example

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

    getDataByIndex(rowIndex)

    Get the data of given row index in grid.

    NOTE

    It will work only for batch edit mode.

    Returns:

    object

    Example

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

    getFieldNameByHeaderText(headerText)

    Get the column field name from the given header text in grid.

    Name Type Description
    headerText string Pass header text of the column to get its corresponding field name

    Returns:

    string

    Example

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

    getFilterBar()

    Get the filter bar of grid

    Returns:

    Element

    Example

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

    getFilteredRecords()

    Get the records filtered or searched in Grid

    Returns:

    array

    Example

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

    getFooterContent()

    Get the footer content of grid.

    Returns:

    Element

    Example

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

    getFooterTable()

    Get the footer table element of grid.

    Returns:

    Element

    Example

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

    getHeaderContent()

    Get the header content div element of grid.

    Returns:

    Element

    Example

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

    getHeaderTable()

    Get the header table element of grid

    Returns:

    Element

    Example

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

    getHeaderTextByFieldName(field)

    Get the column header text from the given field name in grid.

    Name Type Description
    field string Pass field name of the column to get its corresponding header text

    Returns:

    string

    Example

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

    getHiddenColumnNames()

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

    Returns:

    array

    Example

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

    getIndexByRow($tr)

    Get the row index based on the given tr element in grid.

    Name Type Description
    $tr jQuery Pass the tr element in grid content to get its row index

    Returns:

    number

    Example

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

    getPager()

    Get the pager of grid.

    Returns:

    Element

    Example

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

    getPrimaryKeyFieldNames()

    Get the names of primary key columns in Grid

    Returns:

    array

    Example

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

    getRowByIndex(from, to)

    Get the rows(tr element) from the given from and to row index in grid

    Name Type Description
    from number Pass the from index from which the rows to be returned
    to number Pass the to index to which the rows to be returned

    Returns:

    Element

    Example

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

    getRowHeight()

    Get the row height of grid.

    Returns:

    number

    Example

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

    getRows()

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

    Returns:

    Element

    Example

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

    getScrollObject()

    Get the scroller object of grid.

    Returns:

    ej.Scroller

    Example

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

    getSelectedRecords()

    Get the selected records details in grid.

    Returns:

    array

    Example

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

    getSelectedRows()

    Get the selected row element details in grid.

    Returns:

    array

    Example

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

    getsortColumnByField(field)

    It accepts the string value and returns the field and sorted direction of the column in grid.

    Name Type Description
    field string Pass the field of the column to get the sorted direction of the corresponding column in Grid.

    Returns:

    number

    Example

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

    getSummaryValues(summaryCol, summaryData)

    Get the calculated summary values of JSON data passed to it

    Name Type Description
    summaryCol object Pass Summary Column details
    summaryData object Pass JSON Array for which its field values to be calculated

    Returns:

    number

    Example

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

    getVisibleColumnNames()

    Get the names of all the visible column collections in grid

    Returns:

    array

    Example

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

    gotoPage(pageIndex)

    Send a paging request to specified page in grid

    Name Type Description
    pageIndex number Pass the page index to perform paging at specified page index

    Returns:

    void

    Example

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

    groupColumn(fieldName)

    Send a column grouping request in grid.

    Name Type Description
    fieldName string Pass the field Name of the column to be grouped in grid control

    Returns:

    void

    Example

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

    hideColumns(headerText)

    Hide columns from the grid based on the header text

    Name Type Description
    headerText array/string you can pass either array of header text of various columns or a header text of a column to hide

    Returns:

    void

    Example

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

    print()

    Print the grid control

    Returns:

    void

    Example

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

    refreshBatchEditChanges()

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

    Returns:

    void

    Example

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

    refreshHeader()

    It is used to refresh the grid header.

    Returns:

    void

    Example

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

    refreshContent([templateRefresh])

    Refresh the grid contents. The template refreshment is based on the argument passed along with this method

    Name Type Description
    templateRefresh boolean optional When templateRefresh is set true, template and grid contents both are refreshed in grid else only grid content is refreshed

    Returns:

    void

    Example

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

    refreshData([additionalParameters])

    Refresh the grid contents with updated server Data, using XMLHttpRequest. Url Path should be provided in Grid datasource otherwise it refreshes with local data without XMLHttpRequest.

    NOTE

    It is applicable only for Grid with remoteSaveAdaptor.

    Name Type Description
    additionalParameters object optionalData to the server

    Returns:

    void

    Example

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

    refreshTemplate()

    Refresh the template of the grid

    Returns:

    void

    Example

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

    refreshToolbar()

    Refresh the toolbar items in grid.

    Returns:

    void

    Example

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

    removeSortedColumns(fieldName)

    Remove a column or collection of columns from a sorted column collections in grid.

    Name Type Description
    fieldName array/string Pass array of field names of the columns to remove a collection of sorted columns or pass a string of field name to remove a column from sorted column collections

    Returns:

    void

    Example

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

    render()

    Creates a grid control

    Returns:

    void

    Example

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

    reorderColumns(fromFieldName, toFieldName)

    Re-order the column in grid

    Name Type Description
    fromFieldName string Pass the from field name of the column needs to be changed
    toFieldName string Pass the to field name of the column needs to be changed

    Returns:

    void

    Example

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

    reorderRows(indexes, toIndex)

    Re-order the row in grid

    Name Type Description
    indexes Array Pass the indexes of the rows needs to reorder.
    toIndex Number Pass the index of a row where to be reordered.

    Returns:

    void

    Example

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

    resetModelCollections()

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

    Returns:

    void

    Example

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

    resizeColumns(column,width)

    Resize the columns by giving column name and width for the corresponding one.

    Name Type Description
    column string Pass the column name that needs to be changed
    width string Pass the width to resize the particular columns

    Returns:

    void

    Example

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

    rowHeightRefresh()

    Resolves row height issue when unbound column is used with FrozenColumn

    Returns:

    void

    Example

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

    saveCell([preventSaveEvent])

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

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

    Returns:

    void

    Example

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

    setDimension(height, width)

    Set dimension for grid with corresponding to grid parent.

    Name Type Description
    height number Pass the height of the grid container
    width number Pass the width of the grid container

    Returns:

    void

    Example

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

    setWidthToColumns()

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

    Returns:

    void

    Example

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

    search(searchString)

    Send a search request to grid with specified string passed in it

    Name Type Description
    searchString string Pass the string to search in Grid records

    Returns:

    void

    Example

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

    selectCells(rowCellIndexes)

    Select cells in grid.

    Name Type Description
    rowCellIndexes object It is used to set the starting index of row and indexes of cells for that corresponding row for selecting cells.

    Returns:

    void

    Example

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

    selectColumns(fromIndex)

    Select columns in grid.

    Name Type Description
    fromIndex number It is used to set the starting index of column for selecting columns.

    Returns:

    void

    Example

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

    selectColumns(columnIndex,[toIndex])

    Select the specified columns in grid based on Index provided.

    Name Type Description
    columnIndex number It is used to set the starting index of column for selecting columns.
    toIndex number optionalIt is used to set the ending index of column for selecting columns.

    Returns:

    boolean

    Example

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

    selectRows(fromIndex, toIndex)

    Select rows in grid.

    Name Type Description
    fromIndex number It is used to set the starting index of row for selecting rows.
    toIndex number It is used to set the ending index of row for selecting rows.

    Returns:

    void

    Example

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

    selectRows(from,to,[target])

    Select specified rows in grid based on Index provided.

    Name Type Description
    from array/number It is used to set the starting index of row for selecting rows.
    to number optionalIt is used to set the ending index of row for selecting rows.
    target object optionalTarget element which is clicked.

    Returns:

    void

    Example

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

    selectRows(rowIndexes)

    Select rows in grid.

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

    Returns:

    void

    Example

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

    setCellText()

    Used to update a particular cell value.

    NOTE

    It will work only for Local Data.This method applicable for all editMode’s except batch edit mode.

    setCellText(rowIndex, cellIndex, value)

    Used to update a particular cell value based on specified rowIndex and cellIndex values.

    Name Type Description
    rowIndex string/number It is used to set the index of row.
    cellIndex string/number It is used to set the index of cell.
    value string/number It is used to set the value for the cell based on specified row and cell Index.

    Returns:

    void

    Example

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

    setCellText(primaryKeyValue, field, value)

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

    Name Type Description
    primaryKeyValue string It is used to set the primarykey value for selecting the corresponding row cell.
    field string It is used to set the field name for selecting the corresponding column cell.
    value object It is used to set the value for the cell based on specified primaryKeyValue and field name.

    Returns:

    void

    Example

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

    setCellValue(index, fieldName, cellValue)

    Used to update a particular cell value based on specified row Index and the fieldName.

    NOTE

    It will working only for batch edit mode.

    Name Type Description
    Index number It is used to set the index for selecting the row.
    fieldName string It is used to set the field name for selecting column.
    value object It is used to set the value for the selected cell.

    Returns:

    void

    Example

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

    setDefaultData(defaultData)

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

    Returns:

    void

    Example

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

    setPhoneModeMaxWidth(value)

    The grid rows has to be rendered as detail view in mobile mode based on given value.

    NOTE

    Need to set same value for max-width in ejgrid.responsive.css file

    Name Type Description
    Index number It is used to render grid rows as details view in mobile mode.

    Returns:

    void

    Example

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

    setValidation()

    Set validation to edit form in the grid.

    Returns:

    void

    Example

  • HTML
  • <script>
    // Create grid object.
    var gridObj = $("#Grid").data("ejGrid");
    // It is used to set validation to columns.
    gridObj.setValidation(); 
    </script>
  • HTML
  • <script>
    // It is used to set validation to columns.
    $("#Grid").ejGrid("setValidation");
    </script>

    setValidationToField(fieldName, rules)

    Set validation to a particular input field in a edit form dynamically.

    Name Type Description
    fieldName string Specify the field name of the column to set validation rules
    rules object Specify the validation rules for the field

    Returns:

    void

    Example

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

    showColumns(headerText)

    Show columns in the grid based on the header text

    Name Type Description
    headerText array/string you can pass either array of header text of various columns or a header text of a column to show

    Returns:

    void

    Example

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

    sortColumn(columnName, [sortingDirection])

    Send a sorting request in grid.

    Name Type Description
    columnName string Pass the field name of the column as columnName for which sorting have to be performed
    sortingDirection string optional Pass the sort direction ascending/descending by which the column have to be sort. By default it is sorting in an ascending order

    Returns:

    void

    Example

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

    startEdit($tr)

    Send an edit record request in grid

    Name Type Description
    $tr jQuery Pass the tr- selected row element to be edited in grid

    Returns:

    void

    Example

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

    ungroupColumn(fieldName)

    Un-group a column from grouped columns collection in grid

    Name Type Description
    fieldName string Pass the field Name of the column to be ungrouped from grouped column collection

    Returns:

    void

    Example

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

    updateRecord(fieldName, data)

    Update a edited record in grid control when allowEditing is set as true.

    Name Type Description
    fieldName string Pass the primary key field Name of the column
    data array Pass the edited JSON data of record need to be update.

    Returns:

    void

    Example

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

    windowonresize()

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

    Returns:

    void

    Example

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

    Events

    actionBegin

    Triggered for every grid action before its starts.

    Name Type Description
    argument Object Event parameters when grid is initialized:
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.
    argument Object Event parameters when grid paging action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentPage number Returns the current selected page number.
    previousPage number Returns the previous selected page number.
    endIndex number Returns the end row index of that current page.
    model object Returns the grid model.
    requestType string Returns request type.
    startIndex number Returns the start row index of that current page.
    type string Returns the name of the event.
    argument Object Event parameters when grid sorting action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    columnSortDirection string Returns the column sort direction.
    argument Object Event parameters when grid grouping action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when grid record editing action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    row object Returns current edited row.
    model object Returns the grid model.
    originalEventType string Returns the current action event type.
    primaryKey string Returns primary key.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    rowIndex number Returns the edited row index.
    type string Returns the name of the event.
    argument Object Event parameters when grid record save action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    selectedRow number Returns the selected row index.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when grid record cancel action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when grid record delete action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    requestType string Returns request type.
    tr object Returns selected row for delete.
    type string Returns the name of the event.
    argument Object Event parameters when add new record action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when grid filtering action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFilteringColumn object Returns current filtering column field name.
    currentFilterObject object Returns current filtering object.
    filterCollection object Returns filter details.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterbeforeopen"
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns current column field name.
    columnType string Returns type of the column like number, string and so on.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    requestType string Returns request type as "filterbeforeopen".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterchoicerequest"
    Name Type Description
    cancel boolean Returns the cancel option value.
    dataSource object Returns the dataSource.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    query object Returns the query manager.
    requestType string Returns request type as "filterchoicerequest".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterchoicesearch"
    Name Type Description
    cancel boolean Returns the cancel option value.
    dataSource object Returns the dataSource.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    query object Returns the query manager.
    requestType string Returns request type as "filterchoicesearch".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterbeforeopen"
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns current column field name.
    columnType string Returns type of the column like number, string and so on.
    filtermodel object Returns the excel filter model.
    isCustomFilter boolean Returns the customfilter option value.
    model object Returns the grid model.
    requestType string Returns request type as "filterbeforeopen".
    type string Returns the name of the event.

    Example

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

    actionComplete

    Triggered for every grid action success event.

    Name Type Description
    argument Object Arguments in actionComplete when grid is initialized.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Arguments in actionComplete after grid paging action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentPage number Returns the current selected page number.
    previousPage number Returns the previous selected page number.
    endIndex number Returns the end row index of that current page.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    startIndex number Returns the start row index of the current page.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid sorting action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current sorted column field name.
    columnSortDirection string Returns the column sort direction.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid grouping action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid record editing action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    row object Returns current edited row.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    primaryKey string Returns primary key.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    rowIndex number Returns the edited row index.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid record save action is completed.
    Name Type Description
    cancel object Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    selectedRow number Returns the selectedRow index.
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid record cancel action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid record delete action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    tr object Returns selected row for delete.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after add new record action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns empty record object (JSON).
    rowData object Returns empty record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after grid filtering action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFilteringColumn string Returns current filtering column field name.
    currentFilterObject object Returns current filtering object.
    filterCollection object Returns filter details.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterchoicerequest"
    Name Type Description
    cancel boolean Returns the cancel option value.
    dataSource object Returns the dataSource.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    requestType string Returns request type as "filterchoicerequest".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterafteropen"
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns current column field name.
    columnType string Returns type of the column like number, string and so on.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    requestType string Returns request type as "filterafteropen".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterchoicesearch"
    Name Type Description
    cancel boolean Returns the cancel option value.
    dataSource object Returns the dataSource.
    filtermodel object Returns the excel filter model.
    model object Returns the grid model.
    requestType string Returns request type as "filterchoicesearch".
    type string Returns the name of the event.
    argument Object Event parameters when grid request type as "filterafteropen"
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns current column field name.
    columnType string Returns type of the column like number, string and so on.
    filtermodel object Returns the excel filter model.
    isCustomFilter boolean Returns the customfilter option value.
    model object Returns the grid model.
    requestType string Returns request type as "filterafteropen".
    type string Returns the name of the event.

    Example

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

    actionFailure

    Triggered for every grid action server failure event.

    Name Type Description
    argument Object Arguments in actionFailure when grid is initialized.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    requestType string Returns request type.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument Object Arguments in actionFailure after grid paging action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentPage number Returns the current selected page number.
    previousPage number Returns the previous selected page number.
    endIndex number Returns the end row index of that current page.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    startIndex number Returns the start row index of the current page.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid sorting action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current sorted column field name.
    columnSortDirection string Returns the column sort direction.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid grouping action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    columnName string Returns the current grouped column field name.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid record editing action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    row object Returns current edited row.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    primaryKey string Returns primary key.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    rowIndex number Returns the edited row index.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid record save action is completed.
    Name Type Description
    cancel object Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    selectedRow number Returns the selectedRow index.
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid record delete action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the record object (JSON).
    rowData object Returns the record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    tr object Returns selected row for delete.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after add new record action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns empty record object (JSON).
    rowData object Returns empty record object (JSON).
    foreignKeyData object Returns the foreign key record object (JSON).
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after grid filtering action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFilteringColumn string Returns current filtering column field name.
    currentFilterObject object Returns current filtering object.
    filterCollection object Returns filter details.
    model object Returns the grid model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns grid element.
    type string Returns the name of the event.
    error object Returns the error return by server.

    Example

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

    batchAdd

    Triggered when record batch add.

    Name Type Description
    argument Object Arguments when batchAdd event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    defaultData object Returns deleted data.
    type string Returns the name of the event.
    columnObject object Returns the column object.
    columnIndex number Returns the column index.
    row object Returns the row element.
    primaryKey object Returns the primaryKey.
    cell object Returns the cell object.

    Example

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

    batchDelete

    Triggered when record batch delete.

    Name Type Description
    argument Object Arguments when batchDelete event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    rowData object Returns deleted data.
    type string Returns the name of the event.
    primaryKey object Returns the primary key.
    rowIndex number Returns the row Index.

    Example

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

    beforeBatchAdd

    Triggered before the batch add.

    Name Type Description
    argument Object Arguments when beforeBatchAdd event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.
    defaultData object Returns the default data object.
    primaryKey object Returns the primaryKey.

    Example

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

    beforeBatchDelete

    Triggered before the batch delete.

    Name Type Description
    argument Object Arguments when beforeBatchDelete event is triggered.
    Name Type Description
    model object Returns the grid model.
    rowData object Returns deleted data.
    type string Returns the name of the event.
    primaryKey object Returns the primaryKey.
    rowIndex number Returns the row index.
    rowData object Returns the row data.
    row object Returns the row element.

    Example

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

    beforeBatchSave

    Triggered before the batch save.

    Name Type Description
    argument Object Arguments when beforeBatchSave event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    batchChanges object Returns the changed record object.

    Example

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

    beforePrint

    Triggered before the print.

    Name Type Description
    argument Object Arguments when beforePrint event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    element object Returns the Grid element.
    selectedRows object Returns the selected records.

    Example

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

    beforeRowDrop

    Triggered before row drop in the grid

    Name Type Description
    argument Object Arguments when beforeRowDrop event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    target object Returns the targeted row.
    targetIndex object Returns the targeted row index.
    draggedRecords object Returns the dragged record details
    dropDetails object Returns the drop details

    Example

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

    beginEdit

    Triggered before the record is going to be edited.

    Name Type Description
    argument Object Arguments when beginEdit event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    row object Returns the current edited row.
    model object Returns the grid model.
    primaryKey object Returns the primary key.
    primaryKeyValue object Returns the primary key value.
    rowIndex number Returns the edited row index.
    type string Returns the name of the event.

    Example

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

    cellEdit

    Triggered when record cell edit.

    Name Type Description
    argument Object Arguments when cellEdit event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    validationRules object Returns the validation rules.
    columnName string Returns the column name.
    value string Returns the cell value.
    rowData object Returns the row data object.
    previousValue string Returns the previous value of the cell.
    columnObject object Returns the column object.
    cell object Returns the cell object.
    isForeignKey boolean Returns isForeignKey option value.

    Example

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

    cellSave

    Triggered when record cell save.

    Name Type Description
    argument Object Arguments when cellSave event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    columnName string Returns the column name.
    value string Returns the cell value.
    rowData object Returns the row data object.
    previousValue string Returns the previous value of the cell.
    columnObject object Returns the column object.
    cell object Returns the cell object.
    isForeignKey boolean Returns isForeignKey option value.

    Example

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

    cellSelected

    Triggered after the cell is selected.

    Name Type Description
    argument Object Arguments when cellSelecting event is triggered.
    Name Type Description
    cellIndex number Returns the selected cell index value.
    previousRowCellIndex number Returns the previous selected cell index value.
    currentCell object Returns the selected cell element.
    previousRowCell object Returns the previous selected cell element.
    data object Returns current record object (JSON).
    selectedData object Returns current record object (JSON).
    selectedRowCellIndex array Returns the selected row cell index values.
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    cellSelecting

    Triggered before the cell is going to be selected.

    Name Type Description
    argument Object Arguments when cellSelecting event is triggered.
    Name Type Description
    cellIndex number Returns the selected cell index value.
    previousRowCellIndex number Returns the previous selected cell index value.
    currentCell object Returns the selected cell element.
    previousRowCell object Returns the previous selected cell element.
    data object Returns current record object (JSON).
    selectedData object Returns current record object (JSON).
    previousRowCellIndex array Returns the previously selected row cell index values
    isCtrlKeyPressed boolean Returns whether the ctrl key is pressed while selecting cell
    isShiftKeyPressed boolean Returns whether the shift key is pressed while selecting cell
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    cellDeselected

    Triggered after the cell is deselected.

    Name Type Description
    argument Object Arguments when cellDeselected event is triggered.
    Name Type Description
    cellIndex number Returns the deselected cell index value.
    currentCell object Returns the deselected cell element.
    data object Returns current record object (JSON).
    selectedData object Returns current record object (JSON).
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    cellDeselecting

    Triggered before the cell is going to be deselected.

    Name Type Description
    argument Object Arguments when cellDeselecting event is triggered.
    Name Type Description
    cellIndex number Returns the deselecting cell index value.
    currentCell object Returns the deselecting cell element.
    data object Returns current record object (JSON).
    selectedData object Returns current record object (JSON).
    isCtrlKeyPressed boolean Returns whether the ctrl key is pressed while deselecting cell
    isShiftKeyPressed boolean Returns whether the shift key is pressed while deselecting cell
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    columnDrag

    Triggered when the column is being dragged.

    Name Type Description
    argument Object Arguments when columnDrag event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType object Returns draggable element type.
    column object Returns the draggable column object.
    model object Returns the grid model.
    target object Returns target elements based on mouse move position.
    type string Returns the name of the event.

    Example

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

    columnDragStart

    Triggered when column dragging begins.

    Name Type Description
    argument Object Arguments when columnDragStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType object Returns draggable element type.
    column object Returns the draggable column object.
    model object Returns the grid model.
    target object Returns drag start element.
    type string Returns the name of the event.

    Example

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

    columnDrop

    Triggered when the column is dropped.

    Name Type Description
    argument Object Arguments when columnDrop event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType string Returns draggable element type.
    column object Returns the draggable column object.
    model object Returns the grid model.
    target object Returns dropped dragged element.
    type string Returns the name of the event.

    Example

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

    columnSelected

    Triggered after the column is selected.

    Name Type Description
    argument Object Arguments when columnSelected event is triggered.
    Name Type Description
    columnIndex number Returns the selected cell index value.
    previousColumnIndex number Returns the previous selected column index value.
    headerCell object Returns the selected header cell element.
    prevColumnHeaderCell object Returns the previous selected header cell element.
    column object Returns corresponding column object (JSON).
    selectedColumnsIndex array Returns the selected columns values.
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    columnSelecting

    Triggered before the column is going to be selected.

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

    Example

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

    columnDeselected

    Triggered after the column is deselected.

    Name Type Description
    argument Object Arguments when columnDeselected event is triggered.
    Name Type Description
    columnIndex number Returns the Deselected column index value.
    headerCell object Returns the Deselected column header element.
    column object Returns corresponding column object (JSON).
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    columnDeselecting

    Triggered before the column is going to be deselected.

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

    Example

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

    contextClick

    Triggered when context menu item is clicked

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

    Example

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

    contextOpen

    Triggered before the context menu is opened.

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

    Example

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

    create

    Triggered when the grid is rendered completely.

    Name Type Description
    argument Object Event parameters from grid
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    dataBound

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

    Name Type Description
    argument Object Arguments when dataBound event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    destroy

    Triggered when grid going to destroy.

    Name Type Description
    argument Object Arguments when destroy event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    detailsCollapse

    Triggered when detail template row is clicked to collapse.

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

    Example

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

    detailsDataBound

    Triggered detail template row is initialized.

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

    Example

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

    detailsExpand

    Triggered when detail template row is clicked to expand.

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

    Example

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

    endAdd

    Triggered after the record is added.

    Name Type Description
    argument Object Arguments when endAdd event is triggered.
    Name Type Description
    model object Returns the grid model.
    data object Returns added data.
    rowData object Returns added data.
    type string Returns the name of the event.

    Example

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

    endDelete

    Triggered after the record is deleted.

    Name Type Description
    argument Object Arguments when endDelete event is triggered.
    Name Type Description
    model object Returns the grid model.
    data object Returns deleted data.
    rowData object Returns deleted data.
    type string Returns the name of the event.

    Example

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

    endEdit

    Triggered after the record is edited.

    Name Type Description
    argument Object Arguments when endEdit event is triggered.
    Name Type Description
    model object Returns the grid model.
    data object Returns modified data.
    rowData object Returns modified data.
    type string Returns the name of the event.

    Example

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

    load

    Triggered initial load.

    Name Type Description
    argument Object Arguments when load event is triggered.
    Name Type Description
    model object Returns the grid model.
    cancel boolean Returns the cancel option value.
    type string Returns the name of the event.

    Example

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

    mergeHeaderCellInfo

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

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

    Example

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

    mergeCellInfo

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

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

    Example

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

    queryCellInfo

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

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

    Example

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

    recordClick

    Triggered when record is clicked.

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

    Example

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

    recordDoubleClick

    Triggered when record is double clicked.

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

    Example

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

    resized

    Triggered after column resized.

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

    Example

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

    resizeEnd

    Triggered when column resize end.

    Name Type Description
    argument Object Arguments when resizeEnd event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    columnIndex number Returns the column index.
    column object Returns the column object.
    target object Returns the grid object.
    oldWidth number Returns the old width value.
    newWidth number Returns the new width value.
    extra number Returns the extra width value.

    Example

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

    resizeStart

    Triggered when column resize start.

    Name Type Description
    argument Object Arguments when resizeStart event is triggered.
    Name Type Description
    model object Returns the grid model.
    type string Returns the name of the event.
    columnIndex number Returns the column index.
    column object Returns the column object.
    target object Returns the grid object.
    oldWidth number Returns the old width value.

    Example

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

    rightClick

    Triggered when right clicked on grid element.

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

    Example

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

    rowDataBound

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

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

    Example

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

    rowSelected

    Triggered after the row is selected.

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

    Example

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

    rowSelecting

    Triggered before the row is going to be selected.

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

    Example

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

    rowDeselected

    Triggered after the row is deselected.

    Name Type Description
    argument Object Arguments when rowDeselected event is triggered.
    Name Type Description
    data object Returns current record object (JSON).
    selectedData object Returns current record object (JSON).
    rowIndex number Returns the row index of the deselected row.
    row object Returns the current deselected row element.
    model object Returns the grid model.
    type string Returns the name of the event.

    Example

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

    rowDeselecting

    Triggered before the row is going to be deselected.

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

    Example

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

    rowDrag

    Triggered when the row is being dragged.

    Name Type Description
    argument Object Arguments when rowDrag event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType object Returns draggable element type.
    target object Returns the draggable row object.
    model object Returns the grid model.
    currentTarget object Returns target elements based on mouse move position.
    type string Returns the name of the event.
    data object Returns JSON data of dragged rows.
    draggedRecords object Returns JSON data of dragged rows.

    Example

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

    rowDragStart

    Triggered when row dragging begins.

    Name Type Description
    argument Object Arguments when rowDragStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType object Returns draggable element type.
    target object Returns the draggable row object.
    model object Returns the grid model.
    currentTarget object Returns drag start element cell.
    type string Returns the name of the event.
    data object Returns the JSON data of dragged rows.
    draggedRecords object Returns the JSON data of dragged rows.

    Example

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

    rowDrop

    Triggered when the row is dropped.

    Name Type Description
    argument Object Arguments when rowDrop event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggableType string Returns draggable element type.
    rows object Returns the draggable row object.
    model object Returns the grid model.
    target object Returns the current mouse position cell element.
    type string Returns the name of the event.
    data object Returns the JSON data of dragged rows.
    droppedRecords object Returns the JSON data of dragged rows.

    Example

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

    rowHover

    Triggered while hover the grid row.

    Name Type Description
    argument Object Arguments when rowHover event is triggered.
    Name Type Description
    row object Returns the hovered row.
    rowIndex object Returns the hovered row index.
    rowData object Returns the hovered record details
    cell object Returns the hovered row cell

    ####Example

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

    templateRefresh

    Triggered when refresh the template column elements in the Grid.

    Name Type Description
    argument Object Arguments when templateRefresh event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cell object Returns the cell object.
    column object Returns the column object.
    data object Returns the current row data.
    rowData object Returns the current row data.
    model object Returns the grid model.
    rowIndex number Returns the current row index.
    type string Returns the name of the event.

    Example

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

    toolbarClick

    Triggered when toolbar item is clicked in grid.

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

    Example

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