劍道網與分組的行模板，不兼容

當我使用其他「可分組」的行模板，在劍道電網不工作，但之前有沒有問題，現在如何使用行模板一起分組劍道網與分組的行模板，不兼容

我把我在評論中寫的代碼做

的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>

來源

2013-07-11 Martin

這一次並不那麼容易。分組時（對於每個新組），您的模板應該添加一個額外的單元格。你可以使用每個單元格的模板而不是行來避免這個問題？ – OnaBai

當您對單元格進行分組時，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修改這裏：

來源

2013-07-19 11:42:15 OnaBai

非常感謝你解決了我的問題。 – Martin

你可以在你自己做模板與此線程中發佈的技巧：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" 
     } 
    ] 
});

基本上要傳遞在數據源，在其上調用組（），並注入當組電池適用。

來源

2014-05-06 22:37:47 Chris

劍道網與分組的行模板，不兼容

回答

相關問題