ClientEvents Class Members
There are several ways to attach handler to a client-side event of RadGrid.
Attach command string to event
<telerik:RadGrid ID="RadGrid1" runat="server">
<ClientSettings>
<ClientEvents OnGridCreating="alert('Creating RadGrid')" />
</ClientSettings>
</telerik:RadGrid>
Attach function to event
<telerik:RadGrid ID="RadGrid1" runat="server">
<ClientSettings>
<ClientEvents OnGridCreating="GridCreating" />
</ClientSettings>
</telerik:RadGrid>
<script type="text/javascript">
function GridCreating(sender, eventArgs){
alert("Creating grid with ClientID: " + sender.get_id());
}
</script>
Attach handlers dynamically
<telerik:RadGrid ID="RadGrid1" runat="server">
</telerik:RadGrid>
// Load handler for the Web Application
function f() {
// Get reference to the Grid
var grid = $find('<%= RadGrid1.ClientID %>');
// Attach the event
grid.add_eventName(eventHandler);
// Sys.Application.remove_load(f);
}
// Attached Load event listener to the Web Application
Sys.Application.add_load(f);
// RadGrid event's handler
function eventHandler(sender, args) {
//...
}
Here eventName is formed from the names in the table below by removing On and starting with a small letter. For example, attaching an event handler for OnRowContextMenu will look in the following way:
<telerik:RadGrid ID="RadGrid1" runat="server">
<ClientSettings>
<ClientEvents OnGridCreating="GridCreating" />
</ClientSettings>
</telerik:RadGrid>
function GridCreating(sender, args) {
var grid = sender;
grid.add_rowContextMenu(onRowContextMenuHandler);
}
function onRowContextMenuHandler(sender, args) {
// execute logic
}
Please note that the grid and its structure should be created when the event handlers are attached. That is why you cannot attach handlers for the OnXXXCreating and OnXXXCreated events dynamically.
Detach events dynamically
In case event handlers were attached to RadGrid but they are not needed at some point, they can be detached dynamically. For example, having the "OnRowClick" attached in the markup like this:
<telerik:RadGrid ID="RadGrid1" runat="server">
<ClientSettings>
<ClientEvents OnRowClick="rowClickHandler" OnGridCreated="gridCreatedHandler" />
</ClientSettings>
</telerik:RadGrid>
Detaching the "OnRowClick" event once the Grid finished rendering
// function to be executed when clicking on a row
function rowClickHandler(sender, args) {
// logic for row click
}
// function to be executed when the Grid has finished rendering
function gridCreatedHandler(sender, args) {
var grid = sender;
//detatch RowClick event handler, so that the function "rowClickHandler" will not be executed when clickin on a row
grid.remove_rowClick(rowClickHandler);
}
Inside each RadGrid client-side 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. They are listed in the separate help topics linked in the next paragraph.
OnActiveRowChanging | String |
---|---|
OnActiveRowChanged | String |
OnCellDeselecting | String |
OnCellDeselected | String |
OnCellSelecting | String |
OnCellSelected | String |
OnColumnClick | String |
OnColumnContextMenu | String |
OnColumnCreating | String |
OnColumnCreated | String |
OnColumnDblClick | String |
OnColumnDestroying | String |
OnColumnHiding | String |
OnColumnHidden | String |
OnColumnMouseOut | String |
OnColumnMouseOver | String |
OnColumnMovingToLeft | String |
OnColumnMovedToLeft | String |
OnColumnMovingToRight | String |
OnColumnMovedToRight | String |
OnColumnResizing | String |
OnColumnResized | String |
OnColumnShowing | String |
OnColumnShown | String |
OnColumnSwapping | String |
OnColumnSwapped | String |
OnCommand | String |
OnDataBinding | String , meaningful only when RadGrid is bound client-side |
OnDataBindingFailed | String , meaningful only when RadGrid is bound client-side |
OnDataBound | String , meaningful only when RadGrid is bound client-side |
OnDataSourceResolved | String , meaningful only when RadGrid is bound client-side |
OnFilterMenuShowing | String |
OnGridCreating | String |
OnGridCreated | String |
OnGridDestroying | String |
OnGroupCollapsing | String, meaningful only when GroupLoadMode="Client" |
OnGroupCollapsed | String, meaningful only when GroupLoadMode="Client" |
OnGroupExpanding | String, meaningful only when GroupLoadMode="Client" |
OnGroupExpanded | String, meaningful only when GroupLoadMode="Client" |
OnHeaderMenuShowing | String |
OnHierarchyCollapsing | String, meaningful only when HierarchyLoadMode="Client" |
OnHierarchyCollapsed | String, meaningful only when HierarchyLoadMode="Client" |
OnHierarchyExpanding | String, meaningful only when HierarchyLoadMode="Client" |
OnHierarchyExpanded | String, meaningful only when HierarchyLoadMode="Client" |
** OnKeyPress ** | String |
OnMasterTableViewCreating | String |
OnMasterTableViewCreated | String |
OnPopUpShowing | String |
OnRowClick | String |
OnRowContextMenu | String |
OnRowCreating | String |
OnRowCreated | String |
OnRowDataBound | String |
OnRowDblClick | String |
OnRowDeleting | String , meaningful only when GridClientDeleteColumn is used for deleting |
OnRowDeleted | String , meaningful only when GridClientDeleteColumn is used for deleting |
OnRowDeselecting | String |
OnRowDeselected | String |
OnRowDestroying | String |
OnRowDragging | String |
OnRowDragStarted | String |
OnRowDropping | String |
OnRowDropped | String |
OnRowHiding | String |
OnRowHidden | String |
OnRowMouseOut | String |
OnRowMouseOver | String |
OnRowResizing | String |
OnRowResized | String |
OnRowSelecting | String |
OnRowSelected | String |
OnRowShowing | String |
OnRowShown | String |
OnTableCreating | String |
OnTableCreated | String |
OnTableDestroying | String |
OnScroll | String |
OnUserAction | String |
When the ClientIDMode property of the RadGrid control is set to Static , all row specific client-side events would not fire.