Display Grid Columns Vertically

4 posts, 0 answers
  1. Sasanka
    Sasanka avatar
    2 posts
    Member since:
    Jun 2020

    Posted 13 Dec 2020 Link to this post

    Hi All,

    I need a feature to implement to transpose a grid (i.e. displaying tabular data in the flip axis so rows becomes columns and vice versa).

    Can I know whether KendoUI provides such functionality to show the grid vertically as the example?

    Name             Age      City
    Marius            35         Kristiansand
    Brian              37         Grimstad
    Tom                38         Arendal

    And show it as:

    Name    Marius           Brian       Tom
    Age       35                  37            38
    City       Kristiansand  Grimstad  Arendal

  2. Georgi Denchev
    Admin
    Georgi Denchev avatar
    111 posts

    Posted 15 Dec 2020 Link to this post

    Hello Sasanka,

    There is no built-in method that provides this functionality, however we do have a Knowledge Base article that describes how this can be achieved.

    If you want to hide the header from the example, you can add the following style to the page:

      <style>
      .k-grid .k-header {
         display: none;
       }
      </style>

    Let me know if this works for you.

    Best Regards,
    Georgi Denchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Sasanka
    Sasanka avatar
    2 posts
    Member since:
    Jun 2020

    Posted 06 Jan in reply to Georgi Denchev Link to this post

    Hi Georgi Denchev,

    Thanks a lot for your update. I was trying the knowledge base article as above example.

    Please see the attached image or for sample : https://dojo.telerik.com/ibaHEnAt

    some of the kendo default behaviors are not working after transpose:

    1. paging: still paging apply for row level not for column level.
    2. filterable: kendo default filter icons does not appear on first column(Eg. Filter by Age, Is greater than 70).
    3. sortable: kendo default sorting icon does not appear on first column(Eg. Sorting by Age can not achieved).
    4. selectable: select rows instead of columns. 

    Would this kendo grid's default features/behaviors  be possible to achieve in transpose mode too? 

  4. Georgi Denchev
    Admin
    Georgi Denchev avatar
    111 posts

    Posted 07 Jan Link to this post

    Hi Sasanka,

    The example provided in the article demonstrates how to transpose the initially loaded data. The grid itself does not have a transposing functionality, thus any operations related to the grid won't work in this scenario.

    Generally speaking it is possible to use widgets such as the filter and the pager, and connect them to a transposed grid. You can create 2 separate DataSources, one connected to the grid and one connected to the filter for example. When you apply filter/paging/sorting to the filterDataSource the change event is triggered. Inside the change event you can transpose the data and assign it to your grid's DataSource.

    For the selection, you can handle the change event of the grid which is triggered any time a row is selected. Prevent the default behavior and instead apply selection to each of the column cells.

    For the sorting you can follow the same principle as with the filter and the pager, although there is no available sort widget. You can use javascript to detect which cell(header) has been clicked and then apply a sort to the filterDataSource based on the value of the header.

    You can also have a look at our Professional Services which offer customization for our products based on the client's needs.

    Best Regards,
    Georgi Denchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top