Collection of sample projects using Kendo UI Builder for OpenEdge.
Existing projects can be imported into Kendo UI Builder using the Import App option in Kendo UI Builder. For projects from a previous version can be migrated to the new version by selecting the project from the main page in Kendo UI Builder. This will update the metadata. Custom code should be migrated manually.
Kendo UI Builder apps can be run in several ways:
Notes:
The Data Provider information in Kendo UI Builder is read-only. However, if you want to change the Data Provider used by a sample app to use your own OpenEdge backend, you could manually modify the corresponding JSON file in the meta/dataProviders folder in the project. (Change serviceUri and catalogUris to change the location.)
This example shows a form with navigation, CRUD capabilities, and also implements server paging. It is an extension of the form-with-crud app, but specifies server paging for its DataSource with a pagesize set to 5.
The Age combobox uses a local datasource.
Note:
This example shows a form with various types of controls with navigation and CRUD capabilities. A single row is displayed at a time and updates can be performed on the row. Navigation takes advantage of paging support of the datasource by setting pagesize to 1. In this way, binding between the datasource's row, the model, and the control is done automatically.
The Age combobox uses a local datasource.
Note:
This example shows how to filter a grid by multiple fields using a single search text-box.
This is done by specifying a function in the "Change Event Function" property of the search text-box in the Component Properties pane.
The function itself is specified in the app/src/modules/
Access to the data is done using the dsService helper class.
This example shows a view with grid component. One of the columns on the display data found in a related table. Another view shows a grid component where one of the columns uses a DropDownList to input values from a related table.
This example shows how to display a static image on a grid using a row template function defined in app/src/modules/
The static images are located in app/src/images.
This example shows a grid component and a form with CRUD capabilities. The JSON Filter Pattern (JFP) is used to provide server paging, filtering and sorting for the Customer grid.
This example showcases a Salesrep Drop Down List using data from data source specified for the view. The view also shows a Country Drop Down List using local data from a data source created programmatically.
This example uses a list view and a form to provide CRUD operations.
This example shows how to provide a more complex template for items in a list view.
This is done by specifying an HTML-based template in the app/src/modules/
This example also showcases validation on form fields.
The validation is implemented with code in app/src/modules/
Access to the data is done using the dsService helper class.