Telerik UI for ASP.NET AJAX

Client-side Object Model

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

Classes/properties

Description

RadGrid

This is the main class. You can use it to access the whole grid object.

.get_masterTableView()

This is an object of type GridTableView. Use this object to access the root table in hierarchical structures.

.get_masterTableViewHeader()

Returns the master table header instance for the respective grid client object.

.get_masterTableViewFooter()

Returns the master table footer instance for the respective grid client object.

.get_detailTables()

This collection represents the detail tables when you have a hierarchical structured grid. Every table is of type GridTableView.

.get_editItems()

This property retrieves all GridDataItem objects that are in edit mode accross all grid tables.

.get_allowMultiRowSelection()

This property is of type Boolean. When set to true, you can select multiple rows on the client.

.set_activeRow()

Property which marks the row passed as an argument as active and highlighted.

.get_element()

Property that returns the DOM element of the grid div.

.get_id()

Property that returns the id of the grid client object.

.get_selectedItems()

Property that returns an array of the grid rows selected on the client (and all sub-levels in the hierarchical grid structure).

.get_headerMenu()

Property that returns the client object of the grid header context menu. Useful when you would like to customize the items in it on the client (see the JavaScript logic at the top of this help topic for reference).

.get_allowActiveRow()

Property that returns the value for the respective server property of the control (ClientSettings -> KeyboardNavigationSettings -> AllowActiveRowCycle).

.get_visible()

Property that determines whether the grid is visible on the client or not (style="display:none").

.set_visible()

Property that sets the grid as visible or not on the client (changing the style-> display value of the grid div).

GridTableView

Class that wraps the client-side features of the GridTableView object. Each GridTableView client instance has GridColumn and GridDataItem objects for manipulating the grid's items and columns client-side.

.get_allowMultiColumnSorting()

Returns a Boolean value indicating whether multi-column sorting is enabled for the grid instance.

.set_allowMultiColumnSorting()

Sets whether multi-column sorting is enabled for the grid instance.

.get_owner()

This property is of type RadGrid and presents the parent of the current object.

.get_element()

Returns the HTML table that represents the respective table for the GridTableView object rendered on the client.

.get_dataItems()

A collection that holds all data items (objects of type GridDataItem) in the respective table.

.get_selectedItems()

A collection which holds all selected items (objects of type GridDataItem) in the respective table. This collection will include the selected items from the table's child tables (meaningful in a hierarchical grid only).

.get_editItems()

This property retrieves the GridDataItem objects of the current table view that are in edit mode.

.get_insertItem()

This property retrieves the HTML element of the currently inserted item.

.get_columns()

A collection that holds objects of type GridColumn (the client-side objects) in the respective table.

.get_name()

String that represents the Name property (set on the server) for the corresponding GridTableView client object. It can be used to identify a table in a grid hierarchy on the client-side.

.get_isItemInserted()

A Boolean property. It gets a value indicating if the GridTableView is currently in insert mode.

.get_pageSize()

Returns the page size for the respective GridTableView object.

.set_pageSize()

Sets the page size for the respective GridTableView object.

.get_currentPageIndex()

Returns the current page index for the respective GridTableView object.

.set_currentPageIndex()

Sets the current page index for the respective GridTableView object.

.get_pageCount()

Returns the page count for the respective GridTableView object.

.get_clientDataKeyNames()

A one-dimensional array that holds the key fields set through the ClientDataKeyNames property of GridTableView on the server. To extract the key values you can use the eventArgs.getDataKeyValue inside any row-related client event handler of RadGrid.

.get_parentView()

If called from a nested table view, it returns the parent table view (of type GridTableView) in the grid hierarchy; it returns null if called from the MasterTableView.

.get_parentRow()

If called from a nested table view, it returns the parent row (HTML table row - <tr>) for the current nested hierarchical table view; it returns null if called from the MasterTableView.

.get_virtualItemCount()

Gets the virtual item count value for the respective GridTableView object. Applies to client-side bound grid only.

.set_virtualItemCount()

Sets the virtual item count value for the respective GridTableView object. Applies to client-side bound grid only.

Note

For performance reasons, the <GridTableViewInstance>.get_dataItems() collection will be available only when you enable specific client features/events for the rows in the grid (such as AllowRowResize, AllowRowSelect, OnRowClick, etc.).

Note

If you want to reference the client object of a grid row inside a client event handler of RadGrid, make sure that you attach the RowCreated event of the control specifying an empty event handler,

otherwise eventArgs.get_gridDataItem() will return null. This is due to performance reasons (avoiding the client serialization of grid items by default).

An alternative method to reference a grid row client-side is through the get_dataItems() collection.

Client-side Events

Inside each RadGrid client event handler the first argument passed (sender) will point to the grid client object. The second argument (eventArgs) will hold reference properties/objects dependable on the respective client event.

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 RadGrid object is destroyed, (i.e. on each window.onunload).

OnMasterTableViewCreating

This event is fired before the MasterTableView is created.

OnMasterTableViewCreated

This event is fired after the MasterTableView is created.

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

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

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

Hierarchy Expansion

OnHierarchyExpanding

This event is fired when the hierarchy is being expanded.

OnHierarchyExpanded

This event is fired when the hierarchy has been expanded.

OnHierarchyCollapsing

This event is fired when the hierarchy is being collapsed.

OnHierarchyCollapsed

This event is fired when the hierarchy has been collapsed.

Group Expansion

OnGroupExpanding

This event is fired when the group is being expanded.

OnGroupExpanded

This event is fired when the group has been expanded.

OnGroupCollapsing

This event is fired when the group is being collapsed.

OnGroupCollapsed

This event is fired when the group has been collapsed.

PopUp

OnPopUpShowing

This event is fired when the pop-up edit form is being shown.

Column Showing

OnColumnShowing

This event is fired before a column is shown.

OnColumnShown

This event is fired after a column is shown.

Row Showing

OnRowShowing

This event is fired before a row is shown.

OnRowShown

This event is fired when the row is shown.

Row Drag and Drop

OnRowDragStarted

This event is fired when a row is about to be dragged.

OnRowDropping

This event is fired before a row is dropped.

OnRowDropped

This event is fired after a row is dropped.

Active Row Changing

OnActiveRowChanging

This event is fired before the active row is changed.

OnActiveRowChanged

This event is fired after the active row is changed.

Filter Menu

OnFilterMenuShowing

This event is fired before the filtering menu is rendered.

Data Binding

OnRowDataBound

This event is fired when a row is about to be bound on the client.

OnDataBinding

This event is fired when the grid is about to be bound on the client.

OnDataBound

This event is fired right after the grid is bound on the client.

Bating Editing

OnBatchEditOpening

This event is fired when a cell is opening for edit.

OnBatchEditOpened

This event is fired after a cell is opened for edit.

OnBatchEditClosing

This event is fired when a cell is closing.

OnBatchEditClosed

This event is fired after the cell is closed.

OnBatchEditCellValueChanging

This event is fired when a cell's value is being changed.

OnBatchEditCellValueChanged

This event is fired once a cell has been edited.

OnBatchEditGetCellValue

This event is fired when the grid obtains the value from the editor in order to later set in in the HTML(Should be handled handled when multiple controls which contain an input element are placed inside the EditItemTemplate of a GridTemplateColumn).

OnBatchEditSetCellValue

This event is fired when the grid obtains the value from the editor in order to later set in in the HTML(Should be handled handled when multiple controls which contain an input element are placed inside the EditItemTemplate of a GridTemplateColumn).

OnBatchEditSetEditorValue

This event is fired when the grid obtains the value from the editor in order to later set in in the HTML(Should be handled handled when multiple controls which contain an input element are placed inside the EditItemTemplate of a GridTemplateColumn).

OnBatchEditGetEditorValue

This event is fired when the grid obtains the value from the editor in order to later set in in the HTML(Should be handled handled when multiple controls which contain an input element are placed inside the EditItemTemplate of a GridTemplateColumn).

Scrolling

OnScroll

This event is fired when you scroll the grid.

Command

OnCommand

This event is fired for each grid command which is about to be triggered (sorting, paging, filtering, editing, etc.) before postback/ajax request .

Obtaining GridTableView Elements

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

  • <GridTableViewInstance>.get_columns()[n].get_element() -> the real HTML table column for the n-th column(<th> for header cell)

  • <GridTableViewInstance>.get_dataItems()[n].get_element() -> the real HTML table row for the n-th row (<tr> element)

Manipulating GridTableView Elements

In the list below you can find links to the GridTableView, GridColumn and GridDataItem class members articles that list the varioust methods and properties which you can use for execution additional logic.