Transpose Grid Data

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	Windows 10 64bit
Browser	IE For PC

Description

How can I flip the axis of the Kendo UI Grid, so that its rows become columns and vice versa?

Solution

Modify the shape of the data.

    <style>
        tbody td:first-child{
        background-color:#d5d5d5;
        }
    </style>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>

    <div id="example">
        <div id="grid"></div>
        <script>

        var rawData,
            data = [],
            model = {},
            length,
            dataLength,
            propertiesLength;

        $(document).ready(function() {
            rawData = createRandomData(5);

            dataLength = rawData.length;
            propertiesLength = Object.keys(rawData[0]).length;

            for(var i=0; i <propertiesLength; i+=1){
            data[i] = {};
            for(var j =0; j < dataLength; j+=1 ){
                var currentItem = rawData[j]
                var property = Object.keys(currentItem)[i];
                if(j === 0){
                data[i]["Property"] = property;
                }
                data[i][currentItem.FirstName] = currentItem[property]
            }
            }

            $("#grid").kendoGrid({
            dataSource: {
                data: data,
                pageSize: 20,
            },
            scrollable:true
            });
        });
        </script>
    </div>