Kendo UI grid system

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

    Posted 05 Aug 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
    8330 posts

    Posted 09 Aug 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.
  3. Kendo UI is VS 2017 Ready
Back to Top