Summary

Support for Custom Templates was introduced in Kendo UI Builder 2.0.1.

With this functionality, you can write custom views and components templates to use in the designer and generate code into a KUIB app.

Use the following steps to use this functionality:

  • Copy the templates folder from the KUIB install folder into your project folder.
  • Customize the the sample template(s). Changes to the custom templates are available after starting Kendo UI Builder.
  • Open Kendo UI Builder and create a new view that uses the custom template(s).

The templates folder contains a sample set of custom templates that you can modify to meet your actual requirements.

Customizing a template improves productivity when using Kendo UI Builder. For example, default values can be changed, access to Kendo UI properties and code use to override functionality, can be specified via a template so that the customization is available to every view created using the custom template.

The templates/Readme.txt provides information on getting starter.

You can remove the sub-directories for the templates that you do not need.

This article provides information on customizing a data-grid template by changing some of its properties and code generation.

Sample Customizations

Changing the default value for the pageSize property

Steps:

  • Change value of "default" property for the pageSize property in custom-data-grid.json.

Example changing default from 20 to 10:

    "pageSize": {
      "type": "integer",
      "title": "Page-Size",
      "description": "The number of data items which will be displayed in the grid.",
      "minimum": 1,
      "default": 10,
      "order": 7
    },

Adding autoBind property to designer and generated options

The autoBind property of the Kendo UI Grid can be set to false to disable the initial read.

Links:

Steps:

  • Add autoBind property to custom-data-grid.json.
  • Add autoBind usage to options.json.ejs in the design-time and angularjs folders.

Excerpt from custom-data-grid.json:

    "autoBind": {
        "type": "boolean",
        "title": "Auto Bind",
        "description": "If set to false, the Grid will not bind to the data source during initialization.",
        "default": true,
        "order": 7
      },

Place this property prior to the pageSize property in the JSON file.

Excerpt from options.json.ejs:

options: {
         "autoBind": <%= autoBind %>,

Place this code after the options object in options.json.ejs.

Enabling keyboard navigation on the Kendo UI Grid as default

Keyboard navigation can be enabled for a Kendo UI Grid by setting its selectable and navigatable properties.

Links:

Steps:

  • Add navigatable: true to the options.json.ejs file in the angularjs folder.

The source template already includes selectable: true.

Excerpt from options.json.ejs:

        selectable: true,
        navigatable: true,

Resources:

  • https://documentation.progress.com/output/kuib/oeov/#page/oe%2Fcustom-templates.html