Create Rollbase Custom Grids with Kendo UI

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:

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.