Grid template with column grouping

[Patrick Rioux]

When you combine column grouping and a grid template, as soon as you group a column the remaining columns grid are out of sync.
Anyone as a solution for this or this is a bug?

[Alexander Valchev]

Hello Patrick,

Probably there is something wrong with the implementation of the template. In this forum thread you can find a working example showing the correct approach in action. Note the template declaration and use of jQuery's proxy function in grid's settings.

I hope this will help you to solve the problem.

All the best,
Alexander Valchev
the Telerik team

[Patrick Rioux]

Column grouping is working very well with local data (as part of the sample) but when you use Server-Side paging the column is moved to the top (great) but the column in the grid are no longer matching the title.

Here my code:
<!--Row Template Definition-->
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr class="k-alt">
         <td>
             ${SalesrepId}
</td>
<td>
${SalesrepName}
</td>
            <td>
                ${StartDate}
            </td>
            <td>
                ${StreetName}
            </td>
            <td>
                ${State}
            </td>
            <td style="text-align: right;">
                ${YearSalesTarget.toFixed(2)} $
            </td>
            <td style="text-align: center;">
                <a href="javascript:alert('Editing Salesrep...'+${SalesrepId})">Edit</a>
            </td>
        </tr>
   </script>

    <!--To create random data for the grid: W ##class(dt.common.ui.samples.data.Salesrep).Populate(1000) -->
<script type="text/javascript">
function createGrid() {
$("#grid").kendoGrid({
                 dataSource: {
                    type: "odata",
                    // Filter always empty with odata ?
                    serverFiltering: true,
                    filter: [{
                        field: "YearSalesTarget",
                        operator: "gte",
                        value: 1000},
                        {
                        field: "YearSalesTarget",
                        operator: "lte",
                        value: 10000}],
                    transport: {
                        // $select would fetch only the necessary columns. Must match columns:[]
                        // $formatdate=long
                        read: "csp/mediapool/public/dt.common.odata.RequestServer.cls?$select=SalesrepId,SalesrepName,StartDate,StreetName,State,YearSalesTarget&$formatdate=long&$tablename=dt_common_ui_samples_data.Salesrep"
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true
                },
                theme: sessionStorage.getItem("kendoSkin") || "kendo",
                selectable: "multiple",
                scrollable: false,
                sortable: true,
                pageable: true,
                groupable: true,
                change: onChange,
                dataBound: onDataBound,
                rowTemplate: kendo.template($("#rowTemplate").html()),
                columns: [{field:"SalesrepId",title:"Salesrep"},
                          {field:"SalesrepName",title:"Salesrep Name"},
                          {field:"StartDate",title:"Start Date"},
                          {field:"StreetName",title:"Street"},
                          {field:"State",title:"State"},
                          {field:"YearSalesTarget",title:"Year Sales $"},
                          {title:"Edition"}]
            });
          }
          
$(document).ready(function() {
     createGrid();
        });
</script>

[Alexander Valchev]

Hi Patrick,

The rowTemplate defines the structure of the whole table row. When you are grouping, the number of table cells in the table's header is changed, that is the reason for mismatching between the titles and the values. In order to avoid that, you can use the following code in your template.

#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #

It will add the necessary amount of empty <td> cells in the row template.
Please check the attached demo page or the previously mentioned jsFiddle example, they both show the approach in action.

Kind regards,
Alexander Valchev
the Telerik team

[Patrick Rioux]

Thank you very much, you example fixed my issue.

I have simply replaced the built-in dataSource configuration and by the ds variable and it start to work.
Just adding the code below was not enough. In my version of the code, this is good but this.group() doesn't exist.

#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #

Just don't understand why my initial definition doesn't work but creating the dataSource first from your sample worked.
Maybe using the proxy is the key here. Anyway, thank you very much for you help and your code sample.

$("#grid").kendoGrid({
                 dataSource: ds,
                 /*Old code replaced.
                 {
                    type: "odata",
                    // Filter always empty with odata ?
                    serverFiltering: true,
                    filter: [{
                        field: "YearSalesTarget",
                        operator: "gte",
                        value: 1000},
                        {
                        field: "YearSalesTarget",
                        operator: "lte",
                        value: 10000}],
                    // Filter always empty with odata ?
                    transport: {
                        // $select would fetch only the necessary columns. Must match columns:[]
                        // $formatdate=long
                        read: "csp/mediapool/public/dt.common.odata.RequestServer.cls?$select=SalesrepId,SalesrepName,StartDate,StreetName,State,YearSalesTarget&$formatdate=long&$tablename=dt_common_ui_samples_data.Salesrep"
                    },
                    schema: {
                                model: {
                                    fields: {
                                        SalesrepId: { type: "number"},
                                        SalesrepName: { type: "string" },
                                        StartDate: { type: "date" },
                                        StreetName: { type: "string" },
                                        State: { type: "string" },
                                        YearSalesTarget: { type: "number" }
                                    }
                                }
                            },
                    pageSize: 10,
                    serverPaging: true,
                    serverSorting: true
                },*/

[Patrick Rioux]

This code below combined with the proxy syntax fixed the issue. Thanks.

#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #