Grid grouping problem when using row template (bug?)

6 posts, 1 answers
  1. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 16 Jan 2012 Link to this post

    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,
  2. Answer
    Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 16 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Drew
    Drew avatar
    18 posts
    Member since:
    Dec 2011

    Posted 16 Jan 2012 Link to this post

    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.
  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 17 Jan 2012 Link to this post

    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!
  6. Levi
    Levi avatar
    14 posts
    Member since:
    Mar 2011

    Posted 25 Jul 2012 Link to this post

    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!
  7. Henry Lee
    Henry Lee avatar
    3 posts
    Member since:
    Oct 2009

    Posted 08 May 2013 Link to this post

    How do I make this work in case I am using other templating engine like Handlebars?
Back to Top
Kendo UI is VS 2017 Ready