Grid grouping problem when using row template (bug?)

[Drew]

I have a grid with a row template.  I have 'Grouping' enabled for the grid, however when attempting to group by a certain column for columns are not re-spaced correctly (having the group column removed normally automatically re-spaces the other columns to keep the data under the column headers).  Without the template the spacing works as it should, but with the template the data rows align themselves to the left, meaning many items will now be under the wrong column header.

Here's my code.

The row template, the coloured css classes just change the back colour, and can be removed for testing:

<script id="WorkOrderGridRowTemplate" type="text/x-kendo-template">

                    <tr>

                        <td>

                            ${workorderreference}

                        </td>

                        <td>

                            ${clientdestination}

                        </td>

                        <td>

                            ${productreference}

                        </td>

                        <td>

                            ${orderquantity}

                        </td>

                        <td>

                            ${unitofmeasure}

                        </td>

                        <td>

                            ${releasedate}

                        </td>

                        <td>

                            ${quotedduedate}

                        </td>

                        <td>

                            ${currentsequenceindex}

                        </td>

                        <td>

                            # if (bufferpenetrationpercentage > 100) { #

                                <span class="bufferPenetrationBlack">${bufferpenetrationpercentage}</span>

                            # } else if (bufferpenetrationpercentage > 66) { #

                                <span class="bufferPenetrationRed">${bufferpenetrationpercentage}</span>

                            # } else if (bufferpenetrationpercentage > 33) { #

                                <span class="bufferPenetrationYellow">${bufferpenetrationpercentage}</span>

                            # } else if (bufferpenetrationpercentage > 0) { #

                                <span class="bufferPenetrationGreen">${bufferpenetrationpercentage}</span>

                            # } else if (bufferpenetrationpercentage <= 0) { #

                                <span class="bufferPenetrationBlue">${bufferpenetrationpercentage}</span>

                            # } else { #

                                ERROR: ${ bufferpenetrationpercentage }

                            # } #

                        </td>

                    </tr>

    </script>

The grid code:

$("#divWorkOrderGrid").kendoGrid({

                dataSource: {

                    data: <%= _JsWorkOrderRecords %>

                },

                rowTemplate: kendo.template($("#WorkOrderGridRowTemplate").html()),

                height: "auto",

                scrollable: false,

                sortable: true,

                groupable: true,

                pageable: false,

                columns: [

                    {

                        field: "workorderreference",

                        title: "W/O Ref."

                    },

                    {

                        field: "clientdestination",

                        title: "Client/Destination"

                    },

                    {

                        field: "productreference",

                        title: "Product Ref."

                    },

                    {

                        field: "orderquantity",

                        title: "Order Quantity"

                    },

                    {

                        field: "unitofmeasure",

                        title: "UoM"

                    },

                    {

                        field: "releasedate",

                        title: "Release Date"

                    },

                    {

                        field: "quotedduedate",

                        title: "Quoted Due Date"

                    },

                    {

                        field: "currentsequenceindex",

                        title: "Current Sequence Index"

                    },

                    {

                        field: "bufferpenetrationpercentage",

                        title: "Buffer Penetration (%)"

                    }

                ]

            });

Here's some example data:
[{"workorderreference": "100036628","clientdestination": "MTA","productreference": "2CIN5319/012","orderquantity": 237600,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "23/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036629","clientdestination": "MTA","productreference": "2C3612/001","orderquantity": 231000,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "23/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036630","clientdestination": "CUSTOMER","productreference": "15504710","orderquantity": 215638.2,"unitofmeasure": "M2","releasedate": "13/01/2012","quotedduedate": "19/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 40},{"workorderreference": "100036762","clientdestination": "CUSTOMER","productreference": "2C0388/030","orderquantity": 371950,"unitofmeasure": "M2","releasedate": "13/02/2012","quotedduedate": "22/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -340},{"workorderreference": "100036763","clientdestination": "CUSTOMER","productreference": "15504497","orderquantity": 10100,"unitofmeasure": "KG","releasedate": "13/02/2012","quotedduedate": "22/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -340},{"workorderreference": "100037089","clientdestination": "CUSTOMER","productreference": "2C0008/012","orderquantity": 273969.52,"unitofmeasure": "M2","releasedate": "26/01/2012","quotedduedate": "05/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -140},{"workorderreference": "100037090","clientdestination": "CUSTOMER","productreference": "15504960","orderquantity": 4251.84,"unitofmeasure": "KG","releasedate": "26/01/2012","quotedduedate": "05/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -140},{"workorderreference": "100037251","clientdestination": "CUSTOMER","productreference": "15505006","orderquantity": 16760.16,"unitofmeasure": "KG","releasedate": "10/02/2012","quotedduedate": "19/02/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": -388},{"workorderreference": "100037503","clientdestination": "CUSTOMER","productreference": "2C0610/084","orderquantity": 74655,"unitofmeasure": "M2","releasedate": "23/12/2011","quotedduedate": "29/12/2011","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 500},{"workorderreference": "100037504","clientdestination": "CUSTOMER","productreference": "15501905","orderquantity": 70778.82,"unitofmeasure": "KG","releasedate": "28/12/2011","quotedduedate": "04/01/2012","currentsequenceindex": "UNRELEASED","bufferpenetrationpercentage": 300}]

I've reproduced this on Firefox, Chrome, Safari and IE8 and 9.  IE9 has another quirky issue, with random rows appearing out of sync with their column header when trying to display the ungrouped grid, but I'll leave that for the time being,

[Nikolay Rusev]

Hell Drew,

See the following jsFiddle for more details on how you should implement your template:
http://jsfiddle.net/THRQV/

Greetings,
Nikolay Rusev
the Telerik team

[Drew]

Nice one, works like a charm.

I assume there isn't going to be an easy way to incorporate the alt-row styling using this method is there?  It's not that important if there isn't a way.

[Nikolay Rusev]

Hello Drew,

Except the rowTemplate you can also define altRowTemplate for the Grid.

All the best,
Nikolay Rusev
the Telerik team

[Levi]

It seems like this doesn't work correctly when I have a detailTemplate specified.

Well, after playing around with it this morning I somehow got it to work correctly.  I have no idea how, but it works for me now!

[Henry Lee]

How do I make this work in case I am using other templating engine like Handlebars?