How to Use Kendo UI Widgets in Rollbase


Rollbase, the most flexible low code application development platform lets you build responsive and adaptive applications in a snap. There may be cases you wish to visualize your business needs with advanced widgets such as Pivot Grid, Spreadsheet, Graphs, Diagrams so that end user can easily understand your application better. Rollbase lets you customize its user interface with advanced Kendo UI widgets.
In this blog you will see how Rollbase can be easily augmented to tackle problems that are not traditionally solved by RAD platforms. We will see how you can integrate advanced Kendo UI widgets to solve difficult business use cases by demonstrating usages of Kendo UI widget in Rollbase object pages and portals.

Kendo UI

Kendo UI is an HTML5 user interface framework for building interactive and high-performance websites and applications. The framework comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, built-in MVVM (Model-View-ViewModel) library. See examples of Kendo UI components here . In following section, we will see how we can integrate Kendo UI in Rollbase.

Adding a Kendo UI component to an application page

Most of the Kendo UI widget works with Kendo DataSource, so the only thing you have to do is populate a Kendo DataSource from Rollbase Object data. For this sample, we will use local mode of Kendo DataSource by making data available locally using Rollbase client side (AJAX) API. Refer the kendo datasource documentation for more details. There are multiple Rollbase client side APIs available to read data from records in JavaScript. I recommend using the following APIs, which should cover most use cases:

 Rollbase API’s used to query data:
  • rbf_selectQuery() – This function runs a SQL SELECT query on the server and returns results as a 2D-array to the callback function.
  • rbf_getRelatedFields() – To get value of your related fields. For external objects (such as those mapped to external tables, to OpenEdge Service objects, or through a D2C connection), you can use the method rbf_getRelatedFields2().
  • rbf_selectQuery2() – This works same as rbf_selectQuery() except that you can pass starting row number to this method where as rbf_selectQuery() fetch always from first row.

Refer to the Rollbase documentation for more details.

Organizing Data for Kendo DataSources

After you fetch data from Rollbase using the above APIs, organize your data into a format that can be fed to Kendo DataSources. Let’s look at an example visualizing a Kendo Diagram with data from the Rollbase application Organization Management.

1) Fetching required data

First step would be querying a data from Rollbase, decide fields that you wish to display inside a kendo diagram, form your select query and run it using rbf_selectQuery() method, refer below code snippet

Select Query Callback and process Employee records:

Handling and displaying images

Rollbase doesn’t provide a direct API to access your image URL. So if you want to display an image from a Rollbase object record there is a work around.

You can add a widget to the Record List page and hook into the Kendo Grid dataBound event() using the Rollbase client Side SDK. Refer to the following code to replace the actual image URL for each employee record.

Add Kendo Listener and Create Diagram by replacing actual Image URL

Following code snippet shows how to replace actual image URL in employee reocord


Note: This is handled differently for portal pages. Refer to the portal section for more details.

2) Building kendo Datasource with data fetched from previous step

Next step is build Kendo DataSource with employees’ array, since we are going to render employee details as Hierarchical way we should use Kendo HierarchicalDataSource


3) Create Kendo UI Component using Datasource built on previous step

Now you can use this Kendo DataSource with any Kendo UI widget, we want to create a Kendo dataviz diagram to display employee details, let’s create a kendo diagram

// Method to create a visual template for shapes. You can change this method according to your need.

Following code is responsible to Create a Kendo Diagram using Datasource that we created in Previous step 


Save and Preview

Add a script component to Rollbase page and add scripts that we explained and save it, and you are all set. As you can see in below screenshot we added custom Kendo widget to Rollbase to display employee details.

Along with cards:

Adding a Kendo UI component to a portal page

1) Create Portal by enabling Kendo UI

You can include Kendo UI professional edition in portal pages by selecting a check box when creating a portal as you shown in the screen below. You need to enable the correct permissions to allow portal users to view objects. See the Rollbase documentation for information about portal security.

2) Enabling permission for portal user to access object

For instance, let’s try to integrate above employee management kendo diagram into a portal page. First, we’ll grant the Portal Guest role permission to view the Employee Management application and its objects. We click Portal Guest Permissions on the portal’s setup page:

This takes us to the Permission page for the Portal Guest role. Click Select All Related Permissions next to the Employee Management application as shown in the screen below and save your change.

3) Add script to render kendo UI

Now we’ll edit the portal page where we want to display the diagram and add a script component to it. We’ll add the script from the previous section to the script component. Because portal pages do not use the New UI, we add the script inside $(document).ready()

How to get Image URL in Portal Pages:

Because there is no Kendo Grid available in Portal pages, we need to write custom jquery code to get the image URL and replace it in actual data before we bind to the Kendo Datasource. We’ll add the code shown below in the replaceImage() function to replace actual image URL. We’ll call this function in the employeeRecords() function before calling createDiagram().



Now portal guests will see the Kendo diagram for employee hierarchies on our portal page as shown in the screen below.


Rollbase platform gives you lot of flexibility to customize application with the power of Kendo UI. Advantages of using Rollbase is once you design the application by Rollbase platform same can be viewed well in different devices. If you’d like to give it a try for yourself, sign up to give Rollbase a try

Comments are closed.