Top Tips for Getting the Most out of Kendo UI Grid for Angular

We've collected a list of our favorite tips for you, showing how to use some of the best built-in features of the Kendo UI grid in Angular.

Grids have a long history in web development, and this isn't the first time we've shared or top tips with you to help make your lives easier. Today however, we want to focus specifically on the Kendo UI Grid for Angular and give you some tips on how you can use it optimally in your apps.

Use Data-Binding Directives 

The Grid makes very limited assumptions on how you retrieve and process data. But flexibility inevitably brings complexity. The state of the Grid must be tracked externally for the Paging, Sorting and Grouping features to work. 

All of this boilerplate code can be eliminated by encapsulating the state tracking into a reusable component. This is exactly what the [kendoGridBinding] directive does. The default implementation serves the data from memory, but it can also be extended to query a remote service. See Custom Remote Directives for an example on how to implement such a directive. 

Another built-in directive is the specialized [kendoGridGroupBinding] directive. It adds support for Virtual Scrolling of grouped data. This particular combination requires maintaining a very complex state and demands that all the data is available in memory. 

Use Editing Directives 

Configuring Editing is usually quite involved due to the sheer number of possible configurations.

The built-in Editing directives take care of the boilerplate code in most common scenarios, leaving you more time to work on your business problems. 

Expand Content to Span Multiple Columns 

You can use Spanned Columns to combine multiple cells, similar to how a colspan works on a regular table. A little extra space can go a long way in making tables less boring. 

Hide Non-Essential Columns on Small Screens 

The modern device landscape means that your application needs to adapt to many different screen sizes. The Grid comes with a set of Responsive Features to help you deliver the best possible experience to everyone.  Columns can be configured to be visible only at certain display sizes by using a common CSS Media Query syntax. For example, <kendo-grid-column media="(min-width: 680px)"> will only display a column on devices with large screens. 

Try it Out

Curious to try this out on Kendo UI for yourself? You can get started with a free trial today.

Try Kendo UI