可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

When I'm using other "groupable" row template doesn't work in the kendo grid But before there was no problem and now how to use the grouping together of row template

I put the code I wrote in a review do

jsfiddle :

Click here to check with jsfiddle

 <script>
    $(document).ready(function () {

        var ds = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/api/clientssnapshot',
                    dataType: 'json',
                    type: 'get'
                }
            }
        });

        $('.table').kendoGrid({
            dataSource: ds,
            sortable: true,
            groupable: true,
            selectable: true,
            navigatable: true,
            height: 500,
            scrollable: true,
            rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
            altRowTemplate: kendo.template($("#client-row-template").html()),//@class="k-alt"@
            dataBound: function () {
                $('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
                //$('.spark').each(function (i, e) {
                //    var $this = $(this);
                //    //console.info($this.attr('data-inrate'));
                //    var arr = eval('[' + $this.attr('data-inrate') + ']');
                //    console.log(this);

                //    $this.sparkline(arr);
                //});

            }

        });

    });
</script>
<body class="menu_hover">

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

  <tr role="row" class="k-alt">

             <td role="gridcell" >#=   Mac #</td>
             <td role="gridcell" >#=   RadioName #</td>

             <td role="gridcell" >  <a href="http://#= ApIp #" target="_blank">#=ApName#</a>   </td>
             <td role="gridcell" >  <a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>   </td>

             <td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
             <td role="gridcell" >#=  TX #</td>
             <td role="gridcell" >#=  RX #</td>
              <td role="gridcell" >#= Signal #</td>
              <td role="gridcell" >#= Uptime #</td>
              <td role="gridcell">
                     <span class="spark" data-inrate="#= InRateHistory #"  >   </span>
                 </td>
    </tr>
</script>

            <div class="span6 box gradient main_stting">
                <div class="dataTables_filter" id="txtSearch">
                    <label>
                        Search:
                        <input type="text" aria-controls="DataTables_Table_0"></label>
                </div>

                <div class="title">
                    <h3></h3>
                </div>
                <div class="content">

                    <table class="table">
                        <colgroup>
                            <!-- Mac           -->
                            <col style="width: 170px">
                            <col style="width: 150px">
                            <col style="width: 80px">
                            <col style="width: 160px">
                            <col style="width: 130px">
                            <col style="width: 44px">
                            <col style="width: 50px">
                            <col style="width: 50px">
                            <col style="width: 78px">
                            <!-- Usage         -->
                            <!--                 <col style="width: 100px" />-->
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Mac</th>
                                <th>Radio</th>
                                <th>AP</th>
                                <th>Remote IP</th>
                                <th>Name</th>
                                <th>TX</th>
                                <th>RX</th>
                                <th>Signal</th>
                                <th>Uptime</th>
                                <th>Usage</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>


</body></html>

回答1:

When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.

My recommendation is switching to a template for each cell. Basically your column definition would become:

columns : [
    { field: "Mac", title: "Mac", width: 170 },
    { field: "RadioName", title: "Radio", width: 150 },
    { field: "ApName", title: "Ap", width: 80, template: '<a href="http://#= ApIp #" target="_blank">#=ApName#</a>' },
    { field: "RemoteIp", title: "Remote IP", width: 160, template: '<a href="http://#= RemoteIp #" target="_blank">#=RemoteIp#</a>' },
    { field: "AccountingName", title: "Name", width: 130, template: '<a href="#= AccountingId #" target="_blank"> #= AccountingName # </a>' },
    { field: "TX", title: "TX", width: 44  },
    { field: "RX", title: "RX", width: 50 },
    { field: "Signal", title: "Signal", width: 50 },
    { field: "Uptime", title: "Uptime", width: 78},
    { field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #">   </span>'  },
    { command: [ "edit" ], title: "&nbsp;" }
],

In addition, you simply define the grid HTML placeholder as:

<div class="table"></div>

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/

回答2:

You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug

Which contains this JSFiddle: http://jsfiddle.net/THRQV/

Here's the code from that fiddle.

Markup

<table id="grid" style="width: 100%;">
</table>

<script id="rowTemplate" type="text">             
     <tr>         
         #= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
         <td>${Id}</td>
         <td>${StatusText}</td>
         <td>${CommissionTypeText}</td>
     </tr>
</script>

Javascript

var localData = [
    {Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
    {Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
    {Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];

var dataSource = new kendo.data.DataSource( {
     data: localData,
     schema: {
         model: {
             fields: {
                 Id: { type: "number" },
                 StatusText: { type: "string" },
                 CommissionTypeText: { type: "string" }
             }
         }
     }
});

$("#grid").kendoGrid({
     dataSource: dataSource,
     rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
     scrollable: true,
     height: 500,
     sortable: true,
     filterable: true,
     groupable: true,
     pageable: true,
     columns: [
         {
             field: "Id",
             title: "Id",
             filterable: false
         },
         {
             field: "StatusText",
             title: "StatusText"
         },
         {
             field: "CommissionTypeText",
             title: "CommissionTypeText"
         }
     ]
});

Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.