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

Delayed Widget Initialization

Specific scenarios may require you to postpone the creation of a widget until some asynchronously loaded data becomes available.

For example, initializing a Grid when you load the column definitions from the server as the Grid does not support re-defining columns after the widget is instantiated.

Using the k-ng-delay Attribute

To delay the initialization of a widget, use the special k-ng-delay attribute.

The following example demonstrates that the Grid is created only when the gridOptions variable becomes available.

// In the controller.
$http({ method: "GET", url: "customers.json" })
    var dataSource = new{
    $scope.gridOptions = {
      dataSource: data,
      columns: result.columns,

<!-- in HTML: -->
<div kendo-grid k-options="gridOptions" k-ng-delay="gridOptions"></div>

Using HTTP Calls

You can load the widget data with a $http call and initialize the widget when the data is available.

<div ng-app="app" ng-controller="MyCtrl">
  <select kendo-drop-down-list k-options="customOptions" k-ng-delay="customOptions.dataSource"></select>
  angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope, $http) {
    $http({method: "GET", url: ""})
        $scope.customOptions.dataSource = new{
          data: result.d
    $scope.customOptions = {
      dataTextField: "ProductName",
      dataValueField: "ProductID"

See Also

In this article