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" })
  .success(function(result){
    var dataSource = new kendo.data.DataSource({
      data: result.data
    });
    $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.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">

<div ng-app="app" ng-controller="MyCtrl">
  <select kendo-drop-down-list k-options="customOptions" k-ng-delay="customOptions.dataSource"></select>
</div>
<script>
  angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope, $http) {
    $http({method: "GET", url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"})
      .success(function(result){
        $scope.customOptions.dataSource = new kendo.data.DataSource({
          data: result.d
        });
      });
    $scope.customOptions = {
      dataTextField: "ProductName",
      dataValueField: "ProductID"
    };
  });
</script>

See Also

In this article