Kendo UI grid system

2 posts, 0 answers
  1. Olga
    Olga avatar
    1 posts
    Member since:
    Jun 2016

    Posted 05 Aug 2016 Link to this post

    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?

     

     

     

     

     

     

     

  2. Dimo
    Admin
    Dimo avatar
    8353 posts

    Posted 09 Aug 2016 Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top