Create Rollbase Custom Grids with Kendo UI

October 24, 2016 Data & AI

Adding a Kendo UI Grid as a widget to any Rollbase page is easy. In this blog, we'll show you how to generate a responsive grid that fits any screen size.

Rollbase provides out-of-the-box, no-code rendering for lists of objects using Kendo UI Grids. That is, as soon as you declare an object using point-and-click, drag-and-drop methodology, you get an auto-generated UI with very powerful grid control. But how would you go about showing a Kendo UI Grid containing, for example, data from multiple objects or a grid that you would like to tailor to your custom needs? 

In this post, we'll show you how to easily add a Kendo UI Grid as a widget in any Rollbase page. You will also see the additional benefits you get out of the box when the custom grid is part of the page cells.

Programming a Kendo UI Grid

Let’s assume we have a Rollbase object with the following student data: student name, class and age. To make the example more interesting, we will configure the grid so end users can group the data by any columns' class or age.

Here is how we need to proceed, we will do the work from the page designer:

  1. Drag and drop an HTML element in the location where you want to render the grid and specify a unique div id (line 1 below)—we will bind the grid to that element.
  2. Drag and drop a script component:
    1. Do a select query via the Rollbase client-side API to get at the data from the server (line 41 below)
    2. Populate data source from the result of the select query (Line 4 to 15 below)
    3. Bind configured grid (line 21)

That's all there is to it. Here is the JavaScript code to achieve this:

01.<div id="grid" style="width:100%;"></div>
02.<script>
03.rb.newui.util.addEventListener("rbs_pageRender", function () {
04.    function buildData(values) {
05.        var gridData = [];
06.        if (values) {
07.            for (var i = 0; i < values.length; i++) {
08.                var data = {
09.                    name: values[i][0],
10.                    class: values[i][1],
11.                    age: values[i][2]
12.                }
13.                gridData.push(data);
14.            }
15.            generateKendoGrid(gridData);
16.        }
17.    }
18.
19.    function generateKendoGrid(gridData) {
20.        var dataSource = new kendo.data.DataSource({data: gridData});
21.        var kendoGrid = $('#grid').kendoGrid({
22.            columns: [{
23.                field: 'name',
24.                title: 'Name',
25.                groupable: false //Let's make this field not groupable
26.            }, {
27.                field: 'age',
28.                title: 'Age'
29.            }, {
30.                field: 'class',
31.                title: 'Class'
32.            }],
33.
34.            groupable: { messages:
35.                  {empty: "Drag and Drop Age or Class Columns here for grouping"}},
36.            dataSource: dataSource
37.        });
38.    }
39.
40.    // Access the data -> on callback, we will build data source
41.    rbf_selectQuery("SELECT name,Class,Age FROM Students", 200, buildData);
42.});
43.</script>

Now here is how it renders (with Material Black theme):


Even on a smartphone, the grid rendering looks good:




Additional Benefits

It is worth noting that since the Kendo UI Grid belongs to a section cell, we get a lot of benefits out of the box:

  1. We can use the page designer to place the grid anywhere on the page canvas
  2. We can add additional widgets to the side of the grid—for example, a gauge showing the number of elements in the grid or a chart showing the number of items per group
  3. The grid automatically participates in the no-code responsive UI, so it will render as it should—regardless of whether it's on a large desktop or a small tablet
  4. With the click of a button, we can change the grid theme

Here is an example where we have a responsive section with two columns. The left column has the student grid and the second column features a chart showing the number of students per class.

On desktop:

On tablet:




In summary, we saw how easy it is to render a Kendo UI Grid and add it to the no-code responsive system. We can apply the same technique to any widget and construct very creative and innovative pages, thanks to the rich set of Kendo UI widgets available. Stay tuned, we will write more blogs showing how to use other widgets like pivot grids and Gantt charts.

Check this blog for more details on how to create custom dashboards using Kendo UI Charts.

JavaScript jQuery Kendo UI rapid application development Rollbase

Thierry Ciot

Thierry Ciot is a Software Architect on the Corticon Business Rule Management System. Ciot has gained broad experience in the development of products ranging from development tools to production monitoring systems. He is now focusing on bringing Business Rule Management to Javascript and in particular to the serverless world where Corticon will shine. He holds two patents in the memory management space.