Kendo UI Builder provides custom sections to further customize the UI of views.

For example, you can use this approach to add a chart component to a view created using the Data Grid template or a Stacked Data Grids template.

Depending on the view type, the following custom section files are available:

  • topSection.html
  • topParentSection.html
  • topChildSection.html
  • middleSection.html
  • bottomSection.html

HTML components and Kendo UI components can be added to the various custom sections.

Components such as the following can be added:

  • input kendo-combo-box
  • button kendo-button
  • kendo-grid
  • div kendo-chart

For each component HTML options you can specify "id"

Please refer to the Kendo UI with AngularJS documentation for samples on the tags and the widget HTML options using the "k-" prefix:

Use the following steps to use this functionality:

  • Define UI component in custom section file.
  • Define options for component in controller.public.js file.


Define UI component in custom section file

Add the following definition to custom section file topSection.html for the view:

<button kendo-button k-options="vm.buttonOptions">Test</button>

Define options for component in controller.public.js file

Add the following code after the call to "super($scope, $injector);" in the controller.public.js file for the view:

this.buttonOptions = {
click: function(e) {
console.log("DEBUG: click: ");
The definition of the event handlers via the controller.public.js file allows you to easily access methods in the controller.