Issue with Kendo Grid Grouping

[Aditya]

Hi,

I'm able to perform column level grouping over the datasource with the below syntax.

var products = [

                { "id": 1, "type": "fruits", "name": "apple" },

                { "id": 2, "type": "fruits", "name": "banana" },

                { "id": 3, "type": "fruits", "name": "grapes" },

                { "id": 4, "type": "vegetables", "name": "carrot" },

                { "id": 5, "type": "vegetables", "name": "tomato" },

                { "id": 6, "type": "vegetables", "name": "brinjal" }

            ];

  

$("#grid").kendoGrid({ 

    dataSource: { 

        data: products, 

        group: { 

            field: "type" 

        } 

    } 

});

But the output I require is ln this format.

------------------------------
Type                Name
------------------------------
Fruits               Apple
                        Banana
                        Grapes
Vegetables      Carrot
                        Tomato
                        Brinjal

Could you please suggest in how do I proceed further? Is a grid required in the first place or should I use a list view?

Thanks in advance..