Telerik UI for Windows 8 HTML

This article describes the events of the DataSource component and their most notable event arguments.


Event Name




Fires when the underlying data is changed. The DataSource control instance.


Fires when an error occurs during data retrieval. The DataSource control instance.

e.errorThrown: an object containing information about the thrown error. It includes: description, message, number and stack properties.

e.status: a string describing the type of the error.

e.xhr: The xhr object of the request.


If schema.errors is specified and the server response contains that field then the error event will be raised. The errors field of the event argument will contain the errors returned by the server.


Fires before a data request to the remote service is made. The DataSource control instance.


Fires after a data request to the remote service is made. The DataSource control instance.

e.requestType: The type of the request. Could be "create", "read", "update" or "destroy".

e.response: The response returned by the finished request.

In the examples below, the requestStart and requestEnd events are used to inform the user about the data retrieval process by populating a "div" HTML element with messages.

You can attach event handlers on initialization, as shown below:

JavaScript Copy imageCopy
var dataSource = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "",
            dataType: "json"
    schema: {
        data: "value"
    onrequeststart: function (e) {
        loadingInfo.innerHTML = "Fetching Data ... ";
    onrequestend: function (e) {
        loadingInfo.innerHTML = "Data Fetched!";

If you need to add the event handler dynamically, you could assign a handler function, as shown below:

JavaScript Copy imageCopy
dataSource.onrequeststart = function (e) {
    var loadingInfo = document.getElementById("loadingInfo");
    loadingInfo.innerHTML = "Fetching Data ... ";

dataSource.onrequestend = function (e) {
    loadingInfo.innerHTML = "Data Fetched!";

// OR

dataSource.onrequeststart = requestStartHandler;
dataSource.onrequestend = requestEndHandler;

function requestStartHandler(e) {
    loadingInfo.innerHTML = "Fetching Data ... ";

function requestEndHandler(e) {
    loadingInfo.innerHTML = "Data Fetched!";