autoLoad : boolean
default: true
When this setting is enabled the content of the grid will be loaded automatically after the creation of the grid.
Examples
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", autoLoad: false, columns: [ { field: "ID" }, { field: "Name" } ] }); grid.reload(); //call .reload() explicitly in order to load the data in the grid </script>
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", autoLoad: true, columns: [ { field: "ID" }, { field: "Name" } ] }); </script>
columns : array
An array that holds the configurations of each column from the grid.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID", width: 30 }, { field: "Name" }, { field: "PlaceOfBirth", name: "Birth Place" } ] }); </script>
columns.align : left | right | center | justify | initial | inherit
default: "left"
This setting control the alignment of the text in the cell.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID", align: "center" }, { field: "Name", align: "right" }, { field: "PlaceOfBirth", align: "left" } ] }); </script>
columns.cssClass : string
default: undefined
The name(s) of css class(es) that are going to be applied to the text wrapper inside the cell.
Example
Edit this example
<table id="grid"></table> <style> .nowrap { white-space: nowrap } .bold { font-weight: bold } </style> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID", width: 20 }, { field: "Name", width: 100, cssClass: "nowrap bold" }, { field: "PlaceOfBirth" } ] }); </script>
columns.decimalDigits : int
default: undefined
Number of decimal digits after the decimal point.
columns.editor : function | boolean
default: undefined
Provides a way to specify a custom editing UI for the column.
Example
Edit this example
<table id="grid"></table> <script> function edit($container, currentValue) { $container.append("<input type=\"text\" value=\"" + currentValue + "\"/>"); } $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name", editor: edit }, { field: "PlaceOfBirth", editor: true } ] }); </script>
columns.events : function
default: undefined
Configuration object with event names as keys and functions as values that are going to be bind to each cell from the column. Each function is going to receive event information as a parameter with info in the "data" field for id, field name and record data.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name", events: { "mouseenter": function (e) { e.stopPropagation(); $(e.currentTarget).css("background-color", "red"); }, "mouseleave": function (e) { e.stopPropagation(); $(e.currentTarget).css("background-color", ""); } } }, { field: "PlaceOfBirth" }, { title: "", field: "Info", width: 20, type: "icon", icon: "ui-icon-info", events: { "click": function (e) { alert("record with id=" + e.data.id + " is clicked."); } } } ] }); </script>
columns.field : string
default: undefined
The field name to which the column is bound. If the columns.name is not defined this value is used as columns.name.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth", title: "Place of Birth" }, { field: "DateOfBirth", type: "date" } ] }); </script>
columns.format : string
default: undefined
Format the date when the type of the column is date. This configuration setting is going to work only if you have implementation of format method for the Date object. You can use external libraries like http://blog.stevenlevithan.com/archives/date-time-format for that.
Example
Edit this example
<table id="grid"></table> <script src="http://stevenlevithan.com/assets/misc/date.format.js"></script> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "DateOfBirth", type: 'date', format: 'HH:MM:ss mm/dd/yyyy' } ] }); </script>
columns.hidden : boolean
default: false
If set to true the column will not be displayed in the grid. By default all columns are displayed.
columns.icon : string
default: undefined
Css class for icon that is going to be in use for the cell. This setting can be in use only with combination of type icon.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" }, { title: "", field: "Edit", width: 20, type: "icon", icon: "ui-icon-pencil", events: { "click": function (e) { alert("name=" + e.data.record.Name); } } } ] }); </script>
columns.sortable : boolean
default: false
Indicates if the column is sortable. If set to true the user can click the column header and sort the grid by the column source field.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name", sortable: true }, { field: "PlaceOfBirth", sortable: false }, { field: "DateOfBirth", type: "date", title: "Birth Date" } ] }); </script>
columns.title : string
default: undefined
The caption that is going to be displayed in the header of the grid.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name", title: "Player" }, { field: "PlaceOfBirth", title: "Place of Birth" }, { field: "DateOfBirth", type: "date", title: "Birth Date" } ] }); </script>
columns.tmpl : string
default: undefined
Template for the content in the column. Use curly brackets "{}" to wrap the names of data source columns from server response.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { title: "Info", tmpl: "{Name} is born in {PlaceOfBirth}." } ] }); </script>
columns.tooltip : string
default: undefined
The text for the cell tooltip.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID", tooltip: "This is my tooltip 1." }, { field: "Name", tooltip: "This is my tooltip 2." }, { field: "PlaceOfBirth", tooltip: "This is my tooltip 3." } ] }); </script>
columns.type : undefined | checkbox | icon | date
default: undefined
Indicates the type of the column.
columns.width : int | string
default: undefined
The width of the column. Numeric values are treated as pixels. If the width is undefined the width of the column is not set and depends on the with of the table(grid).
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID", width: 20 }, { field: "Name", width: 120 }, { field: "PlaceOfBirth" } ] }); </script>
dataSource : string | object | array
default: undefined
The data source that is going to be used for data in rows during rendering.
If set to string, then the grid is going to use this string as a url for ajax requests to the server.
If set to object, then the grid is going to use this object as settings for the jquery ajax function.
If set to array, then the grid is going to use the array as data for rows.
Examples
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
Edit this example
<table id="grid" data-source="../Demos/GetPlayers"> <thead> <tr> <th width="20">ID</th> <th>Name</th> <th>PlaceOfBirth</th> </tr> </thead> </table> <script> $("#grid").grid(); </script>
Edit this example
<table id="grid"></table> <script> var grid, onSuccessFunc = function (response) { alert("The result contains " + response.records.length + " records."); grid.render(response); }; grid = $("#grid").grid({ dataSource: { url: "../Demos/GetPlayers", data: {}, success: onSuccessFunc }, columns: [ { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
Edit this example
<table id="grid"></table> <script> var data = [ { "ID": 1, "Name": "Hristo Stoichkov", "PlaceOfBirth": "Plovdiv, Bulgaria" }, { "ID": 2, "Name": "Ronaldo Luis Nazario de Lima", "PlaceOfBirth": "Rio de Janeiro, Brazil" }, { "ID": 3, "Name": "David Platt", "PlaceOfBirth": "Chadderton, Lancashire, England" } ]; $("#grid").grid({ dataSource: data, columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
defaultParams.direction : string
default: "direction"
The name of the parameter that is going to send the direction for sorting. The "sortable" setting for at least one column should be enabled in order this parameter to be in use.
defaultParams.limit : string
default: "limit"
The name of the parameter that is going to send the maximum number of records per page. The pager should be enabled in order this parameter to be in use.
defaultParams.page : string
default: "page"
The name of the parameter that is going to send the number of the page. The pager should be enabled in order this parameter to be in use.
defaultParams.sortBy : string
default: "sortBy"
The name of the parameter that is going to send the name of the column for sorting. The "sortable" setting for at least one column should be enabled in order this parameter to be in use.
fontSize : string
default: undefined
The size of the font in the grid.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", fontSize: "14px", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
mapping.dataField : string
default: "records"
The name of the object in the server response, that contains array with records, that needs to be display in the grid.
mapping.totalRecordsField : string
default: "total"
The name of the object in the server response, that contains the number of all records on the server.
minWidth : int
default: undefined
Minimum width of the grid.
notFoundText : string
default: "No records found."
The text that is going to be displayed if the grid is empty.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: { url: "../Demos/GetPlayers", data: { searchString: "sadasd" } }, notFoundText: "No records found custom message", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
pager.enable : boolean
default: false
This setting control the visualization of the pager. If this setting is enabled the pager would show.
pager.leftControls : array
default: array
Array that contains a list with jquery objects that are going to be used on the left side of the pager.
pager.limit : int
default: 10
The maximum number of records that can be show by page.
pager.rightControls : array
default: array
Array that contains a list with jquery objects that are going to be used on the right side of the pager.
pager.sizes : array
default: undefined
Array that contains the possible page sizes of the grid. When this setting is set, then a drop down with the options for each page size is visualized in the pager.
selectionMethod : basic | checkbox
default: "basic"
The type of the row selection method.
If this setting is set to "basic" when the user select a row, then this row will be highlighted.
If this setting is set to "checkbox" a column with checkboxes will appear as first row of the grid and when the user select a row, then this row will be highlighted and the checkbox selected.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", selectionType: "single", selectionMethod: "checkbox", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
selectionType : single | multiple
default: "single"
The type of the row selection.
If the type is set to multiple the user will be able to select more then one row from the grid.
Examples
Edit this example
$("table").grid({ });
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", selectionType: "multiple", selectionMethod: "checkbox", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
uiLibrary : jqueryui | bootstrap
default: "jqueryui"
The name of the UI library that is going to be in use. Currently we support only jQuery UI and bootstrap. jQuery UI or Bootstrap should be manually included to the page where the grid is in use.
Example
Edit this example
<table id="grid"></table> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", uiLibrary: "bootstrap", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], pager: { enable: true, limit: 2, sizes: [2, 5, 10, 20] } }); </script>
width : int
default: undefined
Width of the grid.
Example
Edit this example
<table id="grid"></table> <script> $("#grid").grid({ dataSource: "../Demos/GetPlayers", width: 400, columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>

addRow(record)
return type: grid
Add new row to the grid.
Parameters:
Name Type Description
record object Object with data for the new record.
Example
Edit this example
<button id="btnAdd">Add Row</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnAdd").on("click", function () { grid.addRow({ "ID": grid.count() + 1, "Name": "Test Player", "PlaceOfBirth": "Test City, Test Country" }); }); </script>
clear()
return type: void
Clear the content in the grid.
Example
Edit this example
<button id="btnClear">Clear</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnClear").on("click", function () { grid.clear(); }); </script>
count()
return type: int
Return the number of records presented on the screen.
Example
Edit this example
<button id="btnShowCount">Show Count</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnShowCount").on("click", function () { alert(grid.count()); }); </script>
destroy()
return type: void
Destroy the grid from the HTML dom tree and leave just the "table" tag in the HTML dom tree.
Example
Edit this example
<button id="btnDestroy">Destroy</button> <button id="btnCreate">Create</button> <br/><br/> <table id="grid"></table> <script> var grid, createFunc; createFunc = function() { grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); }; createFunc(); $("#btnDestroy").on("click", function () { grid.destroy(); }); $("#btnCreate").on("click", function () { createFunc(); }); </script>
get(position)
return type: object
Return record from the grid based on position.
Parameters:
Name Type Description
position int The position of the row that needs to be return.
Example
Edit this example
<button id="btnGetData">Get Data</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnGetData").on("click", function () { var data = grid.get(3); alert(data.Name + " born in " + data.PlaceOfBirth); }); </script>
getAll()
return type: array
Return an array with all records presented in the grid.
Example
Edit this example
<button id="btnGetAllName">Get All Names</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnGetAllName").on("click", function () { var records = grid.getAll(), names = ""; $.each(records, function () { names += this.record.Name + "(id=" + this.id + "),"; }); alert(names); }); </script>
getById(id)
return type: object
Return record by id of the record.
Parameters:
Name Type Description
id string The id of the row that needs to be returned.
Example
Edit this example
<button id="btnGetData">Get Data</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], dataKey: "ID" //define the name of the column that you want to use as ID here. }); $("#btnGetData").on("click", function () { var data = grid.getById("2"); alert(data.Name + " born in " + data.PlaceOfBirth); }); </script>
getSelected()
return type: string
Return the id of the selected record. If the multiple selection method is one this method is going to return only the id of the first selected record.
Example
Edit this example
<button id="btnShowSelection">Show Selection</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox" }); $("#btnShowSelection").on("click", function () { alert(grid.getSelected()); }); </script>
getSelections()
return type: array
Return an array with the ids of the selected record.
Example
Edit this example
<button id="btnShowSelection">Show Selections</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox", selectionType: "multiple" }); $("#btnShowSelection").on("click", function () { var selections = grid.getSelections(); $.each(selections, function() { alert(this); }); }); </script>
hideColumn(field)
return type: grid
Hide column from the grid.
Parameters:
Name Type Description
field string The name of the field bound to the column.
Example
Edit this example
<button id="btnHideColumn">Hide Column</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnHideColumn").on("click", function () { grid.hideColumn("PlaceOfBirth"); }); </script>
reload(params)
return type: void
Reload the data in the grid from a data source.
Parameters:
Name Type Description
params object An object that contains a list with parameters that are going to be send to the server.
Fires:
  • Grid#beforeEmptyRowInsert, Grid#dataBinding, Grid#dataBound, Grid#event:cellDataBound
Example
Edit this example
<input type="text" id="txtSearch"> <button id="btnSearch">Search</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnSearch").on("click", function () { grid.reload({ searchString: $("#txtSearch").val() }); }); </script>
remove()
return type: void
Remove the grid from the HTML dom tree.
Example
Edit this example
<button id="btnRemove">Remove</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); $("#btnRemove").on("click", function () { grid.remove(); }); </script>
removeRow(id)
return type: grid
Remove row from the grid
Parameters:
Name Type Description
id string Id of the record that needs to be removed.
Example
Edit this example
<table id="grid"></table> <script> var grid; function Delete(e) { if (confirm("Are you sure?")) { grid.removeRow(e.data.id); } } grid = $("#grid").grid({ dataSource: [ { "ID": 1, "Name": "Hristo Stoichkov", "PlaceOfBirth": "Plovdiv, Bulgaria" }, { "ID": 2, "Name": "Ronaldo LuГ­s NazГЎrio de Lima", "PlaceOfBirth": "Rio de Janeiro, Brazil" }, { "ID": 3, "Name": "David Platt", "PlaceOfBirth": "Chadderton, Lancashire, England" } ], columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" }, { title: "", width: 20, type: "icon", icon: "ui-icon-close", events: { "click": Delete } } ] }); </script>
render(response)
return type: void
Render data in the grid
Parameters:
Name Type Description
response object An object that contains the data that needs to be loaded in the grid.
Fires:
  • Grid#beforeEmptyRowInsert, Grid#dataBinding, Grid#dataBound, Grid#event:cellDataBound
Example
Edit this example
<table id="grid"></table> <script> var grid, onSuccessFunc; onSuccessFunc = function (response) { grid.render(response); }; grid = $("#grid").grid({ dataSource: { url: "../Demos/GetPlayers", success: onSuccessFunc }, columns: [ { field: "Name" }, { field: "PlaceOfBirth" } ] }); </script>
selectAll()
return type: void
Select all records from the grid.
Example
Edit this example
<button id="btnSelectAll">Select All</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox", selectionType: "multiple" }); $("#btnSelectAll").on("click", function () { grid.selectAll(); }); </script>
setSelected(id)
return type: void
Select a row from the grid based on id parameter.
Parameters:
Name Type Description
id string The id of the row that needs to be selected
Example
Edit this example
<input type="text" id="txtNumber" value="1" /> <button id="btnSelect">Select</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox" }); $("#btnSelect").on("click", function () { grid.setSelected(parseInt($("#txtNumber").val(), 10)); }); </script>
showColumn(field)
return type: grid
Show hidden column.
Parameters:
Name Type Description
field string The name of the field bound to the column.
Example
Edit this example
<button id="btnShowColumn">Show Column</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth", hidden: true } ] }); $("#btnShowColumn").on("click", function () { grid.showColumn("PlaceOfBirth"); }); </script>
unSelectAll()
return type: void
Unselect all records from the grid.
Example
Edit this example
<button id="btnSelectAll">Select All</button> <button id="btnUnSelectAll">UnSelect All</button> <br/><br/> <table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox", selectionType: "multiple" }); $("#btnSelectAll").on("click", function () { grid.selectAll(); }); $("#btnUnSelectAll").on("click", function () { grid.unSelectAll(); }); </script>
updateRow(id, record)
return type: grid
Update row data.
Parameters:
Name Type Description
id string The id of the row that needs to be updated
record object Object with data for the new record.
Example
Edit this example
<table id="grid"></table> <script> var grid, data; function Edit(e) { grid.updateRow(e.data.id, { "ID": e.data.id, "Name": "Ronaldo", "PlaceOfBirth": "Rio, Brazil" }); } grid = $("#grid").grid({ dataSource: [ { "ID": 1, "Name": "Hristo Stoichkov", "PlaceOfBirth": "Plovdiv, Bulgaria" }, { "ID": 2, "Name": "Ronaldo Luis Nazario de Lima", "PlaceOfBirth": "Rio de Janeiro, Brazil" }, { "ID": 3, "Name": "David Platt", "PlaceOfBirth": "Chadderton, Lancashire, England" } ], columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" }, { title: "", width: 20, type: "icon", icon: "ui-icon-pencil", events: { "click": Edit } } ] }); </script>

beforeEmptyRowInsert
Event fires before addition of an empty row to the grid.
Properties:
Name Type Description
e object event data
$row object The empty row as jquery object
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: { url: "../Demos/GetPlayers", data: { searchString: "not existing data" } //search for not existing data in order to fire the event }, columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); grid.on("beforeEmptyRowInsert", function (e, $row) { alert("beforeEmptyRowInsert is fired."); }); </script>
cellDataBound
Event fires after insert of a cell in the grid during the loading of the data
Properties:
Name Type Description
e object event data
$wrapper object the cell wrapper presented as jquery object
id string the id of the record
index int the index number of the column
record object the data of the row record
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" }, { field: "IsBulgarian", title: "Is Bulgarian" } ] }); grid.on("cellDataBound", function (e, $wrapper, id, index, record) { if ("IsBulgarian" === index) { $wrapper.text(record.PlaceOfBirth.indexOf("Bulgaria") > -1 ? "Bulgarian" : ""); } }); </script>
dataBinding
Event fired before data binding takes place.
Properties:
Name Type Description
e object event data
records array the list of records received from the server
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); grid.on("dataBinding", function (e, records) { alert("dataBinding is fired. " + records.length + " records will be loaded in the grid."); }); </script>
dataBound
Event fires after the loading of the data in the grid.
Properties:
Name Type Description
e object event data
records array the list of records received from the server
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); grid.on("dataBound", function (e, records) { alert("dataBound is fired. " + records.length + " records are bound to the grid."); }); </script>
pageSizeChange
Event fires on change of the page size
Properties:
Name Type Description
e object event data
newSize int The new page size
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], pager: { enable: true, limit: 2, sizes: [2, 5, 10, 20] } }); grid.on("pageSizeChange", function (e, newSize) { alert('The new page size is ' + newSize + '.'); }); </script>
rowDataBound
Event fires after insert of a row in the grid during the loading of the data
Properties:
Name Type Description
e object event data
$row object the row presented as jquery object
id object the id of the record
record object the data of the row record
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ] }); grid.on("rowDataBound", function (e, $row, id, record) { alert("rowDataBound is fired for row with id=" + id + "."); }); </script>
rowSelect
Event fires on selection of row
Properties:
Name Type Description
e object event data
$row object the row presented as jquery object
id string the id of the record
record object the data of the row record
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox" }); grid.on("rowSelect", function (e, $row, id, record) { alert('Row with id=' + id + ' is selected.'); }); </script>
rowUnselect
Event fires on un selection of row
Properties:
Name Type Description
e object event data
$row object the row presented as jquery object
id string the id of the record
record object the data of the row record
Example
Edit this example
<table id="grid"></table> <script> var grid = $("#grid").grid({ dataSource: "../Demos/GetPlayers", columns: [ { field: "ID" }, { field: "Name" }, { field: "PlaceOfBirth" } ], selectionMethod: "checkbox" }); grid.on("rowUnselect", function (e, $row, id, record) { alert('Row with id=' + id + ' is unselected.'); }); </script>