Kendo MVC Grid Transpose Columns using HTML Helper

[Priya]

Hi,

I'm trying to figure out how to transpose columns in a Kendo Grid using the Html helper. 

I see that there's this small piece of documentation for jQuery (https://docs.telerik.com/kendo-ui/knowledge-base/transposed-grid), but would ideally like to do it on the helper itself.

Is anyone aware of how to do this? 

Any help is much appreciated!

[Mihaela]

Hello Priya,

Indeed, you can use the same approach when usng HtmlHelper Grid:

• Within the $(document).ready() function,  trigger an Ajax request to get all of the data and transpose it, as described in the KB article. Then, create a new DataSource instance with jQuery and assing the transposed data collection to it. use the setDataSource() method to set the new DataSource to the Grid.
• It is important to point out that the declaration of the columns in the Grid should not be set.

@(Html.Kendo().Grid<OrderViewModel>()    
    .Name("grid")
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
)

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

$(document).ready(function() {
    // AJAX request to retrieve the data
    ...

    // trnaspose the data
    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]
        }
    }

    var dataSource = new kendo.data.DataSource({
        data: data,
        pageSize: 20
    });

    var grid = $("#grid").data("kendoGrid");
    grid.setDataSource(dataSource); // set the DataSource instance
});
</script>

If you have any other queries, you are more than welcome to let me know.

Regards,
Mihaela
Progress Telerik

[Priya]

Hi Mihaela,

Many thanks for your response. Ah, I understand - you apply the jQuery after you establish the grid in the page.

One issue I was getting was related to dataLength.

Instead, I had to reference 'Data' property of rawData:

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

Also, what's going on here cos I'm getting an error that 'Quarter' doesn't exist:

data[i][currentItem.FirstName] = currentItem[property]

For reference, this is what my grid looks like:

Thank you,

Priya

 

[Priya]

I figured it out!

Because I added ClientTemplate to my Quarter column, it was reading incorrectly.

Just going to do some touch ups now.

[Mihaela]

Thank you for your update, Priya, It is great that you managed to resolve the issue.

On a separate note, I would like to mention that you can instantiate a trial license, particularly for the Telerik UI for ASP.NET MVC suite. This will enable you to receive timely support and open separate ticket threads that will be processed through our internal support system as well. 

If you have any questions or concerns, please let me know.

Best,
Mihaela