Display Grid Columns Vertically

[Sasanka]

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

[Georgi Denchev]

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

[Sasanka]

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? 

[Georgi Denchev]

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