问题
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: " " }
],
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.
来源：https://stackoverflow.com/questions/17589017/kendo-grid-grouping-incompatibility-with-row-template