Adding a default grouping field in kendo ui grid causes column headers to disappear

Question

I am creating a kendo grid that is built out by calling an remote data source. I have enabled grouping, which works as expected, but I would like to default grouping and leave the user the option of adding/changing the groupings. I added the group parameter to the data source and this adds the desired group by default, but it also causes all column headers to disappear which prevents the end user from having the ability to add/change the groupings and also makes it a bit harder to read the displayed data. Google has failed me, so I submit myself to the mercy of stack overflow.

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

<script>
    var remoteDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "https://localhost:44387/api/values",
                dataType: "json"
            }
        },
        pageSize: 8
        ,group: { field: "State" }
    });

    $("#grid").kendoGrid({
        toolbar: ["excel", "pdf"],
        groupable: true,
        sortable: true,
        pageable: {
            pageSize: 5,
            buttonCount: 10,
            pageSizes: true
        },
        excel: {
            allPages: true
        },
        pdf: {
            allPages: true,
            landscape: true
        },
        selectable: {
            mode: "multiple, row"
        },
        reorderable: {
            columns: true
        },
        dataSource: remoteDataSource,
        height: 800,
        width: 2000
    });
</script>

Without default grouping:No Default Group

With default grouping: With Default Group

Answer 1

The reason is because you're allowing the grid to implicitly create the columns. If you explicitly define them, then they will show up.

See this example with the implicit column definition: https://dojo.telerik.com/AMucoVav versus this example with the explicit column definitions: https://dojo.telerik.com/EjeGeHAJ