New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Client-Side Programming Overview

Getting the client-side object

All the API properties and methods are accessible via the registered JavaScript objects for each control. The following code snippet shows how to get reference to the client-side object of RadGrid:

ASP.NET
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" MasterTableView-Name="MainTable"></telerik:RadGrid>

<telerik:RadButton runat="server" ID="RadButton1" Text="GetClientRef" AutoPostBack="false" OnClientClicked="onClientClicked" />
<script>
    function onClientClicked(sender, args) {
        var grid = $find('<%= RadGrid1.ClientID %>');
        alert(grid.get_id()); // alert with the ID of the control
        var masterTable = grid.get_masterTableView();
        alert(masterTable.get_name()); //alert with the name of the MasterTableView
        console.log(masterTable.get_element()); //log the HTML wrapper element of the Master table in the console
    }
</script>

You can find more detailed instructions of how to get client reference to a Telerik AJAX control on Get Client-side Reference to a Control Object.

For Client side approach to access Cells, Values, Controls and more in RadGrid check out the: Accessing Values and Controls article.

Client-side Object Model

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

Classes/propertiesDescription
RadGridThis 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 across 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).
GridTableViewClass 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.

For performance reasons, the .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.).

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

EventDescription
Grid Creation
OnGridCreatingThis event is fired before the grid is created.
OnGridCreatedThis event is fired after the grid is created.
OnGridDestroyingThis event is fired when the RadGrid object is destroyed, (i.e. on each window.onunload ).
OnMasterTableViewCreatingThis event is fired before the MasterTableView is created.
OnMasterTableViewCreatedThis event is fired after the MasterTableView is created.
Table Creation
OnTableCreatingThis event is fired before the table is created.
OnTableCreatedThis event is fired after the table is created.
OnTableDestroyingThis event is fired when table object is destroyed.
Column Creation
OnColumnCreatingThis event is fired before column is created on client-side.
OnColumnCreatedThis event is fired after a column is created on client-side.
OnColumnDestroyingThis event is fired when a column object is destroyed.
Column Resizing
OnColumnResizingThis event is fired before a column is resized.
OnColumnResizedThis event is fired after a column is resized.
Columns Ordering
OnColumnSwapingThis event is fired before two columns are swapped.
OnColumnSwapedThis event is fired after two columns are swapped.
OnColumnMovingToLeftThis event is fired before a column is moved to the left.
OnColumnMovedToLeftThis event is fired after a column is moved to the left.
OnColumnMovingToRightThis event is fired before a column is moved to the right.
OnColumnMovedToRightThis event is fired after a column is moved to the right.
Row Creation
OnRowCreatingThis event is fired before a row available client-side is created.
OnRowCreatedThis event is fired after a row available client-side is created.
OnRowDestroyingThis event is fired when a row object is destroyed.
Row Resizing
OnRowResizingThis event is fired before a row is resized.
OnRowResizedThis event is fired after a row is resized.
Row Selection
OnRowSelectingThis event is fired before row selection.
OnRowSelectedThis event is fired after row selection.
OnRowDeselectingThis event is fired before row deselection.
OnRowDeselectedThis event is fired after row deselection.
OnClick and OnDblClick Events
OnRowClickThis event is fired when a row is clicked.
OnRowDblClickThis event is fired when a row is double-clicked.
OnColumnClickThis event is fired when a column is clicked.
OnColumnDblClickThis event is fired when a column is double-clicked.
Mouse Events
OnRowMouseOverThis event is fired when the mouse hovers over a row.
OnRowMouseOutThis event is fired when the mouse leaves a row.
OnColumnMouseOverThis event is fired when the mouse hovers over a column.
OnColumnMouseOutThis event is fired when the mouse leaves a column.
Context Menus
OnColumnContextMenuThis event is fired when the context menu for a column is called.
OnRowContextMenuThis event is fired when the context menu for a row is called.
Column Visibility
OnColumnHidingThis event is fired before a column is hidden.
OnColumnHiddenThis event is fired after a column is hidden.
Row Visibility
OnRowHidingThis event is fired before a row is hidden.
OnRowHiddenThis event is fired after a row is hidden.
Row Deletion
OnRowDeletingThis event is fired before a row is deleted (client-side delete).
OnRowDeletedThis event is fired after a row is deleted (client-side delete).
Hierarchy Expansion
OnHierarchyExpandingThis event is fired when the hierarchy is being expanded.
OnHierarchyExpandedThis event is fired when the hierarchy has been expanded.
OnHierarchyCollapsingThis event is fired when the hierarchy is being collapsed.
OnHierarchyCollapsedThis event is fired when the hierarchy has been collapsed.
Group Expansion
OnGroupExpandingThis event is fired when the group is being expanded.
OnGroupExpandedThis event is fired when the group has been expanded.
OnGroupCollapsingThis event is fired when the group is being collapsed.
OnGroupCollapsedThis event is fired when the group has been collapsed.
PopUp
OnPopUpShowingThis event is fired when the pop-up edit form is being shown.
Column Showing
OnColumnShowingThis event is fired before a column is shown.
OnColumnShownThis event is fired after a column is shown.
Row Showing
OnRowShowingThis event is fired before a row is shown.
OnRowShownThis event is fired when the row is shown.
Row Drag and Drop
OnRowDraggingThis event is fired repetitively when a row is being dragged.
OnRowDragStartedThis event is fired when a row is about to be dragged.
OnRowDroppingThis event is fired before a row is dropped.
OnRowDroppedThis event is fired after a row is dropped.
Active Row Changing
OnActiveRowChangingThis event is fired before the active row is changed.
OnActiveRowChangedThis event is fired after the active row is changed.
Filter Menu
OnFilterMenuShowingThis event is fired before the filtering menu is rendered.
Data Binding
OnRowDataBoundThis event is fired when a row is about to be bound on the client.
OnDataBindingThis event is fired when the grid is about to be bound on the client.
OnDataBoundThis event is fired right after the grid is bound on the client.
Bating Editing
OnBatchEditOpeningThis event is fired when a cell is opening for edit.
OnBatchEditOpenedThis event is fired after a cell is opened for edit.
OnBatchEditClosingThis event is fired when a cell is closing.
OnBatchEditClosedThis event is fired after the cell is closed.
OnBatchEditCellValueChangingThis event is fired when a cell's value is being changed.
OnBatchEditCellValueChangedThis event is fired once a cell has been edited.
OnBatchEditGetCellValueThis 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 ).
OnBatchEditSetCellValueThis 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 ).
OnBatchEditSetEditorValueThis 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 ).
OnBatchEditGetEditorValueThis 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
OnScrollThis event is fired when you scroll the grid.
Command
OnCommandThis event is fired for each grid command which is about to be triggered (sorting, paging, filtering, editing, etc.) before postback/ajax request .
OnUserActionThis event is fired for some of the grid commands in an earlier stage of their execution.

Obtaining GridTableView Elements

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

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

  • .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 various methods and properties which you can use for execution additional logic.

See Also