Kendo Grid Row Grouping Not Working - html

Question

I am using Kendo for the first time and am attempting to convert an HTML table to a Kendo grid. Upon initialization, I want the table to be grouped by a specific column and not be groupable by any other column. Below is a contrived example of a table of cars to be grouped by the car's make which demonstrates how I am attempting to group by a specific column upon initialization.
This attempt does not cause the table to be grouped. I know the kendoGrid call is working, because if I set groupable to true I am able to group by any column via drag and drop, but the initial grouping still does not occur. I suspect that somehow the group field "make" is not being tied to my make column, but examples I've seen seem to indicate this can be accomplished using data-field as I have done.
<table id="carsGrid">
<thead>
<tr>
<th>Year</th>
<th>Color</th>
<th data-field="make">Make</th>
</tr>
</thead>
<tbody>
<tr>
<td>2010</td>
<td>Red</td>
<td>Dodge</td>
</tr>
<tr>
<td>2014</td>
<td>Blue</td>
<td>Ford</td>
</tr>
<tr>
<td>2016</td>
<td>Black</td>
<td>Dodge</td>
</tr>
</tbody>
</table>
And in the document's ready function:
$('#carsGrid').kendoGrid({
datasource: { group: { field: "make" } },
groupable: false //I do not want grouping on other columns
});

Answer 1

I found some solution for your problem: Check this example http://dojo.telerik.com/OhEta
You should add data-groupable="false" attribute in <th> element:
<thead>
<tr>
<th data-field="year" data-groupable="false">Year</th>
<th data-field="color" data-groupable="false">Color</th>
<th data-field="make">Make</th>
</tr>
</thead>

Answer 2

Instead of using an html <table> you can setup the columns and their values in the javascript.
First you can replace your entire <table></table> section with:
<div id="grid"></div>.
Then in your document's ready function, you can throw your values for each column into an array:
var productsArray = [{Year: 2010, Color: "Red", Make: "Dodge"},
{Year: 2014, Color: "Blue", Make: "Ford"},
{Year: 2016, Color: "Black", Make: "Dodge"}]
And update where you set the kendo grid with:
$("#grid").kendoGrid({
dataSource: {
data: productsArray,
group: {field: "Make"}
},
columns: [
{ field: "Year" },
{ field: "Color" },
{ field: "Make" }
]
});
Click Here for a working example that you can test with.