Kendo UI Grid in angularjs

Question

I have a JSON data structure that I need to bind to Kendo UI grid . The data is something like below.There will be no header fields / columns.I believe kendo UI expects columnns not sure how to bind data to grid without column headers ? I see lot of examples with column headers but could not find any without headers.Any help would be highly appreciated.

["1 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
 "2 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
 "3 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
 "4 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
 "5 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
 "6 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"]

Thanks in Advance

Answer 1

You need to format the data in order to make it suitable for the Kendo dataSource as follows:

var dataArr = ["1 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
                   "2 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
                   "3 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
                   "4 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
                   "5 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999",
                   "6 ABCDEFGHIJKL 44444444444444444 555555555555555555 67777777777777777 333333333333333  99999999999"];


var formattedData = [];
$.each(dataArr, function(index, value) {
    formattedData.push({value});  
});

Once you have this formattedData , you can initialise the dataSource and associated kendoGrid :

var dataSource = new kendo.data.DataSource({
    data: formattedData
});
$("#grid").kendoGrid({
    autoBind: true,
    dataSource: dataSource
});

And finally, you can hide the column header as per your requirement, using the following:

$(".k-grid .k-grid-header").hide();

Or optionally, using CSS:

.k-grid .k-header {
   display: none;
}

I have made a Dojo example to demonstrate the above.