kendo网格分组与行模板不兼容 [英] kendo Grid grouping incompatibility with row template
问题描述
当我使用其他可分组"行模板在kendo网格中不起作用时 但是以前没有问题，现在如何将行模板的分组一起使用
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:
<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>
推荐答案
对单元进行分组时，KendoUI在现有单元的前面插入一个新单元，但这仅针对 standard 模板完成为您的模板.
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: " " }
],
此外，您只需将网格HTML占位符定义为:
In addition, you simply define the grid HTML placeholder as:
<div class="table"></div>
您的JSFiddle在此处进行了修改: http://jsfiddle.net/OnaBai/Dyb9Y/10/
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/
这篇关于kendo网格分组与行模板不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
