Getting familiar with client-side API

Table of Contents

At a glance
Installation and deployment
DNN
Licensing
Already using the control
Functional overview
ASP.NET 2.0 Features
Getting Started
Grid columns
Grid rows
Defining Structure
Visible/Enabled conventions
Populating the control with data
AJAX
Sorting
Paging
Scrolling
Grouping
Filtering
Selecting grid items
Insert/Update/Delete records
Hierarchical grid types and Load modes
Design-time support
Controlling visual appearance
Localization/Accessibility
RadGrid export
The control lifecycle
Performance tips and tricks
Getting familiar with server-side API
Getting familiar with client-side API
Telerik RadGrid inheritance
How-to
Troubleshooting
Integration with other controls
Client-side API Reference
API Reference
Need for help

Glossary Item Box

Client-side Object Model

Telerik RadGrid provides the following objects on the client-side:

Object	Description
RadGrid	This is the main class. You can use it to access the whole grid object. See Rad Grid Class Overview for details.
MasterTableView	This is an object of type RadGridTable. This object is used to access the root table in hierarchical structures.
DetailTablesCollection	This collection represents the detail tables when you have a hierarchical structured grid. Every table is of type RadGridTable.
RadGridTable	Client-side object for RadGridTable. Each RadGridTable has TableColumn and TableRow objects for manipulating the Rows and Columns client-side.
RadGridTable.Columns	These are objects of type TableColumn - the client-side object for MasterTableView/DetailTablesView columns.
RadGridTable.Rows	These are objects of type TableRow
Error	This object is for handling errors.

Note: For performance reasons, the RadGridTable.Rows collection is available only when you enable specific client features/events for the rows in the grid (such AllowRowResize, AllowRowSelect, OnRowClick, etc.).

Client-side Events

RadGrid events

Event	Description
OnGridCreating	This event is fired before the grid is created.
OnGridCreated	This event is fired after the grid is created.
OnGridDestroying	This event is fired when the Telerik RadGrid object is destroyed, i.e. on each window.onunload
OnError	You can handle this event if you need to have your code executed when an error occurs in Telerik RadGrid.
OnRequestStart	Handle RadGrid.OnRequestStart to execute code that should perform any operations before the AJAX request has started. Those can be - cleanup operations, check if the request can be performed at this moment to prevent any loss of user data, etc.
OnRequestEnd	RadGrid.OnRequestEnd can be used to recreate any javascript objects related to RadGrid, execute scripts related to the initial load state of the control.

MasterTableView events

Event	Description
OnMasterTableViewCreating	This event is fired before the MasterTableView is created.
OnMasterTableViewCreated	This event is fired after the MasterTableView is created.

MasterTableView, DetailTables events

Event

Description

Table Creation

OnTableCreating

This event is fired before the table is created.

OnTableCreated

This event is fired after the table is created.

OnTableDestroying

This event is fired when table object is destroyed.

Column Creation

OnColumnCreating

This event is fired before column is created on client-side.

OnColumnCreated

This event is fired after a column is created on client-side.

OnColumnDestroying

This event is fired when a column object is destroyed.

Column Resizing

Each time you have

	Copy Code
grid.MasterTableView.ResizeColumn(columnIndex, newWidth) or respectively

	Copy Code
grid.DetailTableView.ResizeColumn(columnIndex, newWidth)

executed, and where grid is the client-side RadGrid object, following events are fired:

OnColumnResizing

This event is fired before a column is resized.

OnColumnResized

This event is fired after a column is resized.

Columns Ordering

OnColumnSwaping

This event is fired before two columns are swapped.

OnColumnSwaped

This event is fired after two columns are swapped.

OnColumnMovingToLeft

This event is fired before a column is moved to the left.

OnColumnMovedToLeft

This event is fired after a column is moved to the left.

OnColumnMovingToRight

This event is fired before a column is moved to the right.

OnColumnMovedToRight

This event is fired after a column is moved to the right.

Row Creation

OnRowCreating

This event is fired before a row available client-side is created.

OnRowCreated

This event is fired after a row available client-side is created.

OnRowDestroying

This event is fired when a row object is destroyed.

Row Resizing

Each time you have

	Copy Code
grid.MasterTableView.ResizeRow(rowIndex, newWidth)

or respectively

	Copy Code
grid.DetailTableView.ResizeRow(rowIndex, newWidth)

executed, and where grid is the client-side RadGrid object, following events are fired:

OnRowResizing

This event is fired before a row is resized.

OnRowResized

This event is fired after a row is resized.

Row Selection

OnRowSelecting

This event is fired before row selection.

OnRowSelected

This event is fired after row selection.

OnRowDeselecting

This event is fired before row deselection.

OnRowDeselected

This event is fired after row deselection.

OnClick and OnDblClick Events

OnRowClick

This event is fired when a row is clicked.

OnRowDblClick

This event is fired when a row is double-clicked.

OnColumnClick

This event is fired when a column is clicked.

OnColumnDblClick

This event is fired when a column is double-clicked.

Mouse Events

OnRowMouseOver

This event is fired when the mouse hovers over a row.

OnRowMouseOut

This event is fired when the mouse leaves a row.

OnColumnMouseOver

This event is fired when the mouse hovers over a column.

OnColumnMouseOut

This event is fired when the mouse leaves a column.

Context Menus

OnColumnContextMenu

This event is fired when the context menu for a column is called.

OnRowContextMenu

This event is fired when the context menu for a row is called.

Column Visibility

OnColumnHiding

This event is fired before a column is hidden.

OnColumnHidden

This event is fired after a column is hidden.

Row Visibility

OnRowHiding

This event is fired before a row is hidden.

OnRowHidden

This event is fired after a row is hidden.

Row Deletion

OnRowDeleting

This event is fired before a row is deleted (client-side delete).

OnRowDeleted

This event is fired after a row is deleted (client-side delete).

Obtaining RadGridTable properties

Property	Description
RadGridTable.Control	Returns the real HTML table (<table>) in the document
RadGridTable.ClientID	Returns the ID of the real HTML table in the document
RadGridTable.Columns	Returns a collection of columns (columns Array)
RadGridTable.Rows	Returns a collection of rows (rows Array)
RadGridTable.ColGroup	Returns the <colgroup> object of the real HTML table (of type Array)

Obtaining table elements

You can further refer to the elements of the RadGridTable using the functions below:

RadGridTable.Columns[n].Control = the real HTML table column for the n-th column (<th> for the header cell)
RadGridTable.Rows[n].Control = the real HTML table row for the n-th row (will be <tr> for the header cell)

Manipulating RadGridTable elements

Telerik RadGrid provides means for client-side manipulation of the table elements.

Working with table rows

Method	Description
ResizeRow (index, height)	Sets a new height for the row at index index. The new height will be height.

Working with Columns

Method	Description
ResizeColumn (index, width)	Resizes the column at the specified index, to the given width.
SwapColumns (columnIndex1, columnIndex2)	Swaps the row at index specified by columnIndex1 with the row at index specified by columnIndex2.
MoveColumnToLeft (index)
MoveColumnToRight (index)

RadGrid for ASP.NET