Kendo UI grid system

[Olga]

Hi,

First, I am a bit confused about terminology. I've always  thought that a classic grid system is like this:

http://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471

A good example is Altair template:

http://preview.themeforest.net/item/altair-admin-material-design-uikit-template/full_screen_preview/12190654?_ga=1.221847640.132173243.1461239472

Kendo grid, in my opinion, is a table. Grid and table are totally different things.

http://demos.telerik.com/kendo-ui/grid/index

I use Kendo UI Pro with AngularJS. I have to implement grid functionality like in Altair template. As I mentioned, "classical" grid and Kendo grid (table) are totally different things. So I am looking for a proper solution.

1. I can use Twitter Bootstrap - Kendo integration. Here is a nice example:

http://demos.telerik.com/kendo-ui/bootstrap

But -

2. Can I use Kendo UI only? It seems that Kendo has its own grid system, for example in Theme builder:

http://demos.telerik.com/kendo-ui/themebuilder/

Which solution is better? 1 or 2?

 

 

 

 

 

 

 

[Dimo]

Hi Olga,

"Grid system" is an HTML/CSS technique that achieves a column-based (table-like) layout without using HTML <table> elements.

"Grid" does not necessarily imply a "grid system". Often it is used to signify a table-based component that displays tabular data.

The Kendo UI Grid is by no means designed to be a "grid system". The Kendo UI library itself does not feature a grid system of its own, but you can use any other third-party library for that. Here is documentation about how to use Bootstrap and Kendo UI together:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

Pay special attention to:

http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap#nest-widgets-and-bootstrap-grid-layout

The "grid system" on the ThemeBuilder page is pretty basic and represents the classic way to achieve column-based layouts via CSS floats. You can use a similar approach if it fits your requirements.

.column {
  width: 29%;
  padding: 0 2%;
  margin: 0 0 2em;
  float: left;
}

#example:after {
  content: "";
  display: block;
  clear: both;
}

Regards,
Dimo
Telerik by Progress