kendo Grid grouping incompatibility with row template -
when i'm using other "groupable" row template doesn't work in kendo grid before there no problem , how use grouping of row template
i put code wrote in review do
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>
when group cells, kendoui inserts new cell in front of existing done standard template, not templates.
my recommendation switching template each cell. column definition 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: " " } ], in addition, define grid html placeholder as:
<div class="table"></div> your jsfiddle modified here: http://jsfiddle.net/onabai/dyb9y/10/
Comments
Post a Comment