Kendo Grid Row Grouping Not Working

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.