Menu
I have posted this question on kendo forum too and waiting for response.
I am using kendo grid for my ui and paging/sorting work fine until i add multiple rows (tr:2 and tr:3) in my thead. how can i fix this? is there a way around? I am not doing any grouping just simple rows.
<table>
<thead>
<tr>
<th data-field="firstname">First Name</th>
<th data-field="surname">Surname</th>
<th>Class</th>
<th>Current Age</th>
@foreach (MapDetail geMapDetail in Model.mapDetails)
{
<th [email protected]>Growth</th>
}
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<!--get from mapdetails-->
@foreach (MapDetail geMapDetail in Model.mapDetails)
{
<th id="Year-Sem-Term">@geMapDetail.year</th>
}
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<!--get from mapdetails-->
@foreach (MapDetail geMapDetail in Model.mapDetails)
{
<th>@geMapDetail.shortDescription</th>
}
</tr>
</thead>
<tbody></tbody>
<table/>
my jquery script
$("#MapDetails").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 5
},
pageable:true,
resizable: true,
columns: [{
field: "firstname",
width: 150,
locked: false
}
]
}
);
928
I don't think the Grid support multiple header rows (except the so-called multi-column headers), especially when it is created from an existing table. As far as I can see, a JavaScript error occurs in such cases.
What I can suggest is injecting the additional table rows in the header after Grid initialization. Alternatively, you can try the multi-column headers and have only one child column per parent column.
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>535d</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>320d</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2007</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Peugeot</td>
<td>407</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>159</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Nissan</td>
<td>Almera</td>
<td>2001</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Mitsubishi</td>
<td>Lancer</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Opel</td>
<td>Vectra</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>Q7</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2012</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2013</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Nissan</td>
<td>Qashqai</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Mercedez</td>
<td>B Class</td>
<td>2007</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
<tr>
<td>Lancia</td>
<td>Ypsilon</td>
<td>2006</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
sortable: true,
pageable: true,
dataSource: {
pageSize: 5
}
});
$("#grid").data("kendoGrid").thead.append('<tr><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th></tr>');
});
</script>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
