unable to show data on the grid when have multiple header

[Austin]

is there a way to solve this problem where i wanted to maintain the structure of the grid.

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

var data = [
{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quanity":12},
{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quanity":10},
{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quanity":5},
{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quanity":9}];


var grid = $("#grid").kendoGrid({
    columns   :[
    {title:"test",
        columns:[
        {field:"_type", title:"Type"},
        {field:"Discount", title:"Discount"},
        {field:"OrderId", title:"Order Id"},
        {field:"ProductId", title:"Product Id"},
        {field:"UnitPrice", title:"Unit Price"},
        {field:"quanity", title:"Quanity"}]
        }],

        dataSource:{
            data:data
        },
        height:400,
        scrollable: true,
        pageable:true,
        columnMenu: true,
        sortable:{
            mode:"multiple"
        }
});

[Austin]

i able to solve the problem where i doesn't include the correct jquery and kendo script