This is a migrated thread and some comments may be shown as answers.

Grid grouping problem when using row template (bug?)

5 Answers 835 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Drew
Top achievements
Rank 1
Drew asked on 16 Jan 2012, 03:21 PM
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,

5 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 16 Jan 2012, 03:36 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Drew
Top achievements
Rank 1
answered on 16 Jan 2012, 04:40 PM
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.
0
Nikolay Rusev
Telerik team
answered on 17 Jan 2012, 10:25 AM
Hello Drew,

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

All the best,
Nikolay Rusev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Levi
Top achievements
Rank 1
answered on 25 Jul 2012, 08:43 PM
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!
0
Henry Lee
Top achievements
Rank 2
answered on 08 May 2013, 03:48 PM
How do I make this work in case I am using other templating engine like Handlebars?
Tags
Grid
Asked by
Drew
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Drew
Top achievements
Rank 1
Levi
Top achievements
Rank 1
Henry Lee
Top achievements
Rank 2
Share this question
or