New to Kendo UI for jQuery? Start a free 30-day trial

Transport

configuration

The configuration used to load and save the data items. A data source is remote or local based on the way it retrieves data items.

Remote data sources load and save data items from and to a remote end-point (also known as remote service or server). The transport option describes the remote service configuration - URL, HTTP verb, HTTP headers, and others. The transport option can also be used to implement custom data loading and saving.

Local data sources are bound to a JavaScript array via the data option.

transport

Object

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/products"
    }
  }
});
dataSource.fetch(function() {
  var products = dataSource.data();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(products[0].ProductName); // displays "Chai"
});
</script>

transport.batch

Object

Configurable for the odata-v4 data source type in batch mode.

The object can contain all the available jQuery.ajax options.

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  type: "odata-v4",
  batch: true,
  transport: {
    read: {
      url: "https://services.odata.org/V4/OData/OData.svc/Products"
    },
    batch: {
      url: "https://services.odata.org/V4/OData/OData.svc/$batch",
      contentType: "multipart/mixed"
    }
  },
  schema: {
    model: {
      id: "ID",
      fields: {
        ID: { type: "number" },
        Name: { type: "string" }
      }
    }
  }
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  editable: true
});
</script>

transport.cache

Boolean

Specifies if the transport caches the result from read requests. The query parameters are used as a cache key and if the key is present in the cache, a new request to the server is not executed. The cache is kept in memory and, thus, cleared on page refresh.

Default: false

<script>
var dataSource = new kendo.data.DataSource({
  type: "odata-v4",
  transport: {
    read: "https://demos.telerik.com/service/v2/odata/Orders",
    cache: true
  },
  schema: {
    model: {
      fields: {
        OrderID: { type: "number" },
        Freight: { type: "number" },
        ShipName: { type: "string" },
        OrderDate: { type: "date" },
        ShipCity: { type: "string" }
      }
    }
  },
  pageSize: 20,
  serverPaging: true,
  serverFiltering: true,
  serverSorting: true
});
dataSource.fetch(function() {
  dataSource.page(2);
  dataSource.page(1); //a new request is not executed
});
</script>

transport.create

Object|String|Function

The configuration used when the data source saves newly created data items. Those are items added to the data source via the add or insert methods.

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.create is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.create except the success and error callback functions which are used by the transport.

If the value of transport.create is a function, the data source invokes that function instead of jQuery.ajax. Check the jQuery documentation for more details on the provided argument.

If the value of transport.create is a string, the data source uses this string as the URL of the remote service.

The remote service must return the inserted data items and the data item field configured as the id must be set. For example, if the id of the data item is ProductID, the "create" server response must be [{ "ProductID": 79, "AnotherProperties": "value"}] including the ID and the other properties of the data items.

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    create: {
      url: "https://demos.telerik.com/service/v2/core/products/create",
      type: "POST",
      contentType: "application/json"
    },
    parameterMap: function(data, type) {
      if (type == "create") {
        // send the created data items as the "models" service parameter encoded in JSON
        return kendo.stringify(data.models);
      }
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
// create a new data item
dataSource.add( { ProductName: "New Product" });
// save the created data item
dataSource.sync(); // server response is [{"ProductID":78,"ProductName":"New Product","UnitPrice":0,"UnitsInStock":0,"Discontinued":false}]
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      /* implementation omitted for brevity */
    },
    create: function(options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products/create",
        type: "POST",
        contentType: "application/json",
        data: kendo.stringify(options.data.models),
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

transport.destroy

Object|String|Function

The configuration used when the data source destroys data items. Those are items removed from the data source via the remove method.

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.destroy is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.destroy except the success and error callback functions which are used by the transport.

If the value of transport.destroy is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.destroy is a string, the data source uses this string as the URL of the remote service.

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/products"
    },
    destroy: {
      url: "https://demos.telerik.com/service/v2/core/products/destroy",
      type: "POST",
      contentType: "application/json"
    },
    parameterMap: function(data, type) {
      if (type == "destroy") {
        // send the destroyed data items as the "models" service parameter encoded in JSON
        return kendo.stringify(data.models)
      }
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  // remove the first data item
  dataSource.remove(products[0]);
  // send the destroyed data item to the remote service
  dataSource.sync();
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products",
        success: function(result) {
          options.success(result);
        }
      });
    },
    destroy: function (options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products/destroy",
        type: "POST",
        contentType: "application/json",
        data: kendo.stringify(options.data.models),
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var products = dataSource.data();
  dataSource.remove(products[0]);
  dataSource.sync();
});
</script>

transport.parameterMap

Function

The function which converts the request parameters to a format suitable for the remote service. By default, the data source sends the parameters using jQuery conventions.

The parameterMap method is often used to encode the parameters in JSON format.

The parameterMap function will not be called when using custom functions for the read, update, create, and destroy operations.

If a transport.read.data function is used together with parameterMap, remember to preserve the result from the data function that will be received in the parameterMap arguments. An example is provided below. Generally, the parameterMap function is designed to transform the request payload, not to add new parameters to it.

pseudo

transport: {
  read: {
    url: "my-data-service-url",
    data: function () {
      return {
        foo: 1
      };
    }
  },
  parameterMap: function (data, type) {
    // if type is "read", then data is { foo: 1 }, we also want to add { "bar": 2 }
    return kendo.stringify($.extend({ "bar": 2 }, data));
  }
}

Parameters:dataObject

The parameters which will be sent to the remote service. The value specified in the data field of the transport settings (create, read, update or destroy) is included as well. If batch is set to false, the fields of the changed data items are also included.

data.aggregateArray

The current aggregate configuration as set via the aggregate option. Available if the serverAggregates option is set to true and the data source makes a "read" request.

data.groupArray

The current grouping configuration as set via the group option. Available if the serverGrouping option is set to true and the data source makes a "read" request.

data.filterObject

The current filter configuration as set via the filter option. Available if the serverFiltering option is set to true and the data source makes a "read" request.

data.modelsArray

All changed data items. Available if there are any data item changes and the batch option is set to true.

data.pageNumber

The current page. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.pageSizeNumber

The current page size as set via the pageSize option. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.skipNumber

The number of data items to skip. Available if the serverPaging option is set to true and the data source makes a "read" request.

data.sortArray

The current sort configuration as set via the sort option. Available if the serverSorting option is set to true and the data source makes a "read" request.

data.takeNumber

The number of data items to return (the same as data.pageSize). Available if the serverPaging option is set to true and the data source makes a "read" request.

typeString

The type of the request which the data source makes.

The supported values are:

"create"
"read"
"update"
"destroy"

Returns:Object

—The request parameters converted to a format required by the remote service.

<script>
var dataSource = new kendo.data.DataSource({
  type: "odata-v4",
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/odata/Orders",
      cache: true
    },
    parameterMap: function(data, type) {
      if (type == "read") {
        // send take as "$top" and skip as "$skip"
        return {
          $top: data.take,
          $skip: data.skip
        }
      }
    }
  },
  schema: {
    data: "value"
  },
  pageSize: 20,
  serverPaging: true // enable serverPaging so take and skip are sent as request parameters
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "20"
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    create: {
      url: "https://demos.telerik.com/service/v2/core/products/create",
      type: "POST",
      contentType: "application/json"
    },
    parameterMap: function(data, type) {
      return kendo.stringify(data);
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.add( { ProductName: "New Product" });
dataSource.sync();
</script>

transport.push

Function

The function invoked during transport initialization which sets up push notifications. The data source will call this function only once and provide callbacks which will handle push notifications (data pushed from the server).

Parameters:callbacksObject

An object containing callbacks for notifying the data source of push notifications.

callbacks.pushCreateFunction

A function that should be invoked to notify the data source about newly created data items that are pushed from the server. Accepts a single argument - the object pushed from the server which should follow the schema.data configuration.

callbacks.pushDestroyFunction

A function that should be invoked to notify the data source about destroyed data items that are pushed from the server. Accepts a single argument - the object pushed from the server which should follow the schema.data configuration.

callbacks.pushUpdateFunction

A function that should be invoked to notify the data source about updated data items that are pushed from the server. Accepts a single argument - the object pushed from the server which should follow the schema.data configuration.

<script>
  $.when(
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"),
  ).done(function () {
    var hubUrl = "https://demos.telerik.com/service/v2/signalr/products";
    var hub = new signalR.HubConnectionBuilder()
      .withUrl(hubUrl, {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets
      })
      .build();

    var hubStart = hub.start()
      .then(function (e) {
        /* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Hub started");
      })
      .catch(function (err) {
        return console.error(err.toString());
      });

    var dataSource = new kendo.data.DataSource({
      type: "signalr",
      autoSync: true,
      push: function (e) {
        /* The result can be observed in the DevTools(F12) console of the browser. */
        console.log("Push", e);
      },
      schema: {
        model: {
          id: "ID",
          fields: {
            "ID": { editable: false, nullable: true },
            "CreatedAt": { type: "date" },
            "UnitPrice": { type: "number" }
          }
        }
      },
      sort: [{ field: "CreatedAt", dir: "desc" }],
      transport: {
        signalr: {
          promise: hubStart,
          hub: hub,
          server: {
            read: "read",
            update: "update",
            destroy: "destroy",
            create: "create"
          },
          client: {
            read: "read",
            update: "update",
            destroy: "destroy",
            create: "create"
          }
        }
      }
    });

    dataSource.fetch(() => {
      /* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Data fetched", dataSource.view());
    })
  });
</script>

transport.read

Object|String|Function

The configuration used when the data source loads data items from a remote service.

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.read is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.read except the success and error callback functions which are used by the transport.

If the value of transport.read is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.read is a string, the data source uses this string as the URL of the remote service.

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
        url: "https://demos.telerik.com/service/v2/core/products"
    }
  }
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "77"
});
</script>

<input value="2" id="search" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    type: "odata-v4",
    read: {
      url: "https://demos.telerik.com/service/v2/core/products",
      data: function() {
          return {
              skip: 0,
              take: $("#search").val() // send the value of the #search input to the remote service
          };
      }
    }
  }
});
dataSource.fetch();
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products",
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });
    }
  }
});
dataSource.fetch(function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(dataSource.view().length); // displays "77"
});
</script>

transport.signalr

Object

The configuration used when type is set to "signalr". Configures the SignalR settings - hub, connection promise, server, and client hub methods.

A live demo is available at demos.telerik.com/kendo-ui.

It is recommended to get familiar with the SignalR JavaScript API and ASP.NET Core SignalR.

    <script>
    $.when(
        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.7/signalr.min.js"),
    ).done(function () {
        var hubUrl = "https://demos.telerik.com/service/v2/signalr/products";
        var hub = new signalR.HubConnectionBuilder()
        .withUrl(hubUrl,{
            skipNegotiation: true,
            transport: signalR.HttpTransportType.WebSockets
        })
        .build();

        var hubStart = hub.start()
            .then(function (e) {
                console.log("SignalR Hub Started!");
            })
            .catch(function (err) {
                return console.error(err.toString());
            });

       
    var dataSource = new kendo.data.DataSource({
    type: "signalr",
    schema: {
      model: {
        id: "ID",
        fields: {
          ID: { editable: false, nullable: true },
          CreatedAt: { type: "date" },
          UnitPrice: { type: "number" },
        },
      },
    },
    transport: {
      signalr: {
        promise: hubStart,
        hub: hub,
        server: {
          read: "read",
          update: "update",
          destroy: "destroy",
          create: "create",
        },
        client: {
          read: "read",
          update: "update",
          destroy: "destroy",
          create: "create",
        },
      },
    },
  });

  dataSource.fetch(function () {
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(dataSource.data());
  });
    });
</script>

transport.submit

Function

A function that will handle create, update and delete operations in a single batch when custom transport is used, that is, the transport.read is defined as a function.

The transport.create, transport.update, and transport.delete operations will not be executed in this case.

pseudo

    <div id="grid"></div>
    <script>
    var dataSource = new kendo.data.DataSource({
      transport: {
        read: function(e) {
          // Custom read implementation
          $.ajax({
            url: "/api/data",
            success: function(result) {
              e.success(result);
            }
          });
        },
        submit: function(e) {
          // Handle all CRUD operations in batch
          var models = e.data.models;
          var operations = [];
          
          for (var i = 0; i < models.length; i++) {
            var model = models[i];
            if (model.isNew()) {
              operations.push({ type: "create", data: model });
            } else if (model.dirty) {
              operations.push({ type: "update", data: model });
            }
          }
          
          // Send batch operations to server
          $.ajax({
            url: "/api/batch",
            type: "POST",
            data: JSON.stringify(operations),
            contentType: "application/json",
            success: function() {
              e.success();
            }
          });
        }
      }
    });
    
    $("#grid").kendoGrid({
      dataSource: dataSource,
      editable: true
    });
    </script>

This function will only be invoked when the DataSource is in its batch mode.

Parameters:e.dataObject

An object containing the created (e.data.created), updated (e.data.updated), and destroyed (e.data.destroyed) items.

e.successFunction

A callback that should be called for each operation with two parameters - items and operation. See example below.

e.errorFunction

A callback that should be called in case of failure of any of the operations.

transport.update

Object|String|Function

The configuration used when the data source saves updated data items. Those are data items whose fields have been updated.

The data source uses jQuery.ajax to make an HTTP request to the remote service. The value configured via transport.update is passed to jQuery.ajax. This means that you can set all options supported by jQuery.ajax via transport.update except the success and error callback functions which are used by the transport.

If the value of transport.update is a function, the data source invokes that function instead of jQuery.ajax.

If the value of transport.update is a string, the data source uses this string as the URL of the remote service.

All transport actions (read, update, create, destroy) must be defined in the same way, that is, as functions or as objects. Mixing the different configuration alternatives is not possible.

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read:  {
      url: "https://demos.telerik.com/service/v2/core/products"
    },
    update: {
      url: "https://demos.telerik.com/service/v2/core/products/update",
      type: "POST",
      contentType: "application/json"
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync(); 
});
</script>

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      /* implementation omitted for brevity */
    },
    update: function(options) {
      $.ajax({
        url: "https://demos.telerik.com/service/v2/core/products/update",
        // send the updated data items as the "models" service parameter encoded in JSON
        data: kendo.stringify(options.data.models),
        success: function(result) {
          // notify the data source that the request succeeded
          options.success(result);
        },
        error: function(result) {
          // notify the data source that the request failed
          options.error(result);
        }
      });
    }
  },
  batch: true,
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  dataSource.sync();
});
</script>

Related Members