Question

当我使用其他“可分组”行模板在kendo网格中不起作用时但是在没有问题之前，现在如何使用行模板的分组

我把我写的代码放在评论中

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>

Answer 1

您可以使用此主题中发布的技巧在您自己的模板中执行此操作：http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug

其中包含此JSFiddle：http://jsfiddle.net/THRQV/

这是来自那个小提琴的代码。

标记

<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"
         }
     ]
});

基本上，您传入数据源，在其上调用group（），并在适用时注入组单元格。

Answer 2

对单元格进行分组时，KendoUI会在现有单元格前面插入一个新单元格，但这只针对标准模板，而不是模板。

我的建议是切换到每个单元格的模板。基本上您的列定义将变为：

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;" }
],

此外，您只需将网格HTML占位符定义为：

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

您的JSFiddle在此修改：http://jsfiddle.net/OnaBai/Dyb9Y/10/

kendo Grid分组与行模板不兼容

2 个答案: