Telerik UI for Windows 8 HTML

This article describes the events fired by RadGrid, their usage and most notable event arguments.

Event Name

Description

Arguments

change

Fires when the grid selection has changed.

e.target - The RadGrid instance.

columnhide

Fires when a column in RadGrid is hidden.

e.column - The hidden column object.

e.target - The RadGrid instance.

columnshow

Fires when a column in RadGrid is shown.

e.column - The shown column object.

e.target - The RadGrid instance.

columnreorder

Fires when a column in RadGrid is reordered.

e.column - The reordered column object.

e.newindex - The new column index.

e.oldindex - The previous column index.

e.target - The RadGrid instance.

columnresize

Fires when a column in RadGrid is resized.

e.column - The resized column object.

e.newWidth - The new column width.

e.oldWidth - The old column width.

e.target - The RadGrid instance.

databinding

Fires when the grid is about to receive data from the data source.

e.items - The data items to which RadGrid is about to bind.

e.target - The RadGrid instance.

databound

Fires when the grid is about to receive data from the data source.

e.target - The RadGrid instance.

detailCollapse

Fires when a grid detail row is collapsed.

e.detailRow - The jQuery element representing detail row.

e.masterRow - The jQuery element representing master row.

e.target - The RadGrid instance.

detailExpand

Fires when a grid detail row is expanded.

e.detailRow - The jQuery element representing detail row.

e.masterRow - The jQuery element representing master row.

e.target - The RadGrid instance.

detailInit

Fires when the grid detail table is initialized.

e.data - The data for the master row.

e.detailCell - The jQuery element representing detail cell

e.detailRow - The jQuery element representing detail row.

e.detailTable - The detail table object.

e.masterRow - The jQuery element representing master row.

e.parentTable - The master table object.

e.target - The RadGrid instance.

edit

Fired when the user edits or creates a data item.

e.container - The jQuery object representing the container element. That element contains the editing UI.

e.model - The data item which is going to be edited. Use its isNew method to check if the data item is new (created) or not (edited).

e.target - The RadGrid instance.

remove

Fires when the user deletes a row.

e.model - The data item to which the table row is bound.

e.row - The jQuery object representing the current table row.

e.target - The RadGrid instance.

save

Fired when a data item is saved.

e.model - The data item to which the table row is bound.

e.row - The jQuery object representing the current table row.

e.target - The RadGrid instance.

e.values - The values entered by the user. Availabe only when the editable.mode option is set to "cell" or "cellBatch".

savechanges

Fired when the user saves all changes he made in RadGrid. In cell batch mode, this happens when the "Save changes" button in the service column is pressed. In cell and row edit mode, the event is raised after each edit.

e.target - The RadGrid instance.

The following example shows how to use the detailExpand event to display information about the last expanded master row:

Attaching the Event Handler Copy imageCopy
<div id="myGrid" data-win-control="Telerik.UI.RadGrid" data-win-options="{
    dataSource: Sample.categories,
    columns: [
        { field: 'ID', width: 40 },
        { field: 'Name', title: 'Category' }
    ],
    detailTable: {
        dataSource: Sample.data,
        parentRelation: {
            masterField: 'ID',
            detailField: 'CategoryID'
        },
        columns: [
            { field: 'ID', width: 40 },
            { field: 'Name' },
            { field: 'Price'}
        ]
    },
    ondetailexpand: Sample.detailExpand
}">
</div>
<p id="gridInfo" style="color: #336699"></p>
Handling the detailExpand Event Copy imageCopy
WinJS.Namespace.define("Sample", {
    detailExpand: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var dataItem = e.dataItem;
        document.getElementById("gridInfo").innerHTML = "Last expanded row ID:" + e.masterRow.find("td:nth-child(2)").text();
    }),
    data: data,
    categories: categories
});

Handling Events in a Hierarchical Grid

If you want to have an event attached to all levels of a hierarchical RadGrid (using declarative relations), you need to declare the event handler in all detail table definitions. Note that e.target will return the table view, corresponding to the current child table. However, you can extract information from it the same way as you would from the RadGrid instance, since it exposes identical properties and methods.