5

I am using Kendo Ui Grid in my MVC application. I wish to display statistical data for multiple countries in my grid. The way I retrieve data from the database, my grid would show data a bit like the following:

Country    Area       Population    GDP      GDP Growth
India      3288000    1220200000    1.848    6.8
USA        9827000    314686189     15.09    1.7

But instead of the format above, I wish it show like the following:

Country          India         USA            
Area             3288000       9827000        
Population       1220200000    314686189
GDP              1.848         15.09    
GDP Growth       6.8           1.7

How could I achieve this transposition?

giparekh
  • 307
  • 5
  • 26
  • 1
    I don't think that's supported out of the box. Furthermore, I can see serious performance issues when you have many countries in your db. – Andrei V Sep 30 '15 at 09:16
  • Could we achieve it if Grid is read only(No edit/delete/insert required)? – giparekh Sep 30 '15 at 10:02
  • I'm having a hard time imagining the configuration of the grid. I'm not saying it won't work but if it can, you probably need some serious workaround. You probably need to do it all in JavaScript. I'd start with defining the type of each cell as `string` (since the type is defined at _column_ level...) and set the first column ("Country") as fixed. – Andrei V Sep 30 '15 at 10:19
  • 1
    Any suggestion on alternate to kendo grid with signalr having many columns to display? – giparekh Oct 03 '15 at 20:01
  • this is good but fake. 1 because export to excel not transposed . 2 because when we use kendo grid as datasource for another grid when user select cells (show that row and col in grid2) . this preview in real not trasposed . 3 grid2 as preview for user then export to excel then draw another amcharts (when data is valid). so we cant do that. is there any way to actual transpose by create another array for coll and transpose data by this https://stackoverflow.com/q/17428587/308578 – saber tabatabaee yazdi Jun 12 '17 at 11:59

1 Answers1

4

If any one will stumble upon this issues, most important you need to set td property display: block, and tr - display: inline-block. td they will fall on top of each other and tr will be next to each other. 

    #grid .k-grid-header { float: left; padding: 0 !important; }
    #grid .k-grid-content { width: 1000px; height: 300px !important}
    #grid table {width: auto; white-space: nowrap; }
    #grid tr { display: inline-block; }
    #grid thead tr { display: inline; }
    #grid th, #grid td { display: block; border: 1px solid black; height: 30px; padding:15px;}

And working dojo fiddle.

Mantas Čekanauskas
  • 2,218
  • 6
  • 23
  • 43
  • 1
    It works but shows content columns below the header column instead of displaying the columns side by side. The dojo fiddle also has the same issue here. What could be the issue here? – giparekh May 16 '17 at 09:35
  • 1
    Grid is not designed to have horizontal flow. You just need to find which css properties to override. To get you started - http://dojo.telerik.com/edajo/16 – Mantas Čekanauskas May 16 '17 at 12:56
  • It works fine. I have made minor changes to the grid style as #grid .k-grid-header { float: left; padding: 0 !important; } #grid table { display: block; } #grid tr { display: inline-block; } #grid thead tr { display: inline; } #grid th, #grid td { display: block; overflow: hidden; border-style: solid; border-width: 0 0 1px 1px; padding: .5em .6em .4em .6em; white-space: nowrap; text-overflow: ellipsis; text-align: left; height: 2em; width: auto; font-size: 11px; } – giparekh Jun 12 '17 at 11:58
  • Thanks, your css was a great starting point to do a transpose on my own grid. Really surprised kendo doesn't support this naturally – NiallMitch14 Sep 09 '20 at 15:49