Class: Grid

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>

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>