Kendo Grid Sticky Row Example

This article is an example of the Kendo Grid Component with a sticky row. The framework used is the Kendo UI for jQuery. In this example, we are tasked to make a particular row stick to the header so that it is always shown when the grid is scrolled. This is particularly useful when an important row is associated to something else shown on the screen that you want to highlight.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

On dataBaound, we find the row we want to be sticky and add the necessary CSS to it. That's all there is to it.

For this example, Reference 003 is the important row. At the start, you will see something like this:

Kendo Grid Sticky Row in the Middle

 

After scrolling fully up, the important row sticks to the header and is always shown, like so:

Kendo Grid Sticky Row at the Top

There you have it. A quick and simple example of how to use the Kendo Grid with a sticky row.