Populating JSON data in HTML table using Kendo Grid
Question
I'm reading a sample JS object array and binding the information to the Kendo UI Grid as shown below
var sites = [{
sitename: "HTS_SITE_001",
address: "HTS Orion",
contact: "john.smith@telerik.com",
status: "70",
persons: "5"
},
{
sitename: "HTS_SITE_002",
address: "Smith",
contact: "john.smith@telerik.com",
status: "70"
},
{
sitename: "HTS_SITE_003",
address: "Smith",
contact: "john.smith@telerik.com",
status: "70"
},
{
sitename: "HTS_SITE_004",
address: "Smith",
contact: "john.smith@telerik.com",
status: "70"
}];
$("#grid").kendoGrid({
columns: [{ title: "Site Name", field: "sitename" },
{ title: "Site Address", field: "address"},
{ title: "Contact", field: "contact" },
{ title: "Status", field: "status" }],
pageable: true,
sortable: true,
navigatable: true,
dataSource: sites
});
However, the styling of the grid is not what I expect. I want to populate the data in the HTML table which has the pre-defined styling as shown below. How do I achieve this using Kendo Grid,
<div class="box-body">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th data-field="sitename">Sites</th>
<th data-field="address">Address</th>
<th data-field="status">Status</th>
<th data-field="contact">Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">HTS_SITE_001</a></td>
<td>#24, Pirmasenserstrasse</td>
<td>In progress</td>
<td>joe.simon@google.de</td>
</tr>
</tbody>
</table>
</div>
</div>
2 answers
solution1
0 ACCPTED 2016-03-22 16:47:27
You can just iterate the JSON array and add the rows to the table. For convenience give the table an ID (in my example, "theTable")
$(document).ready(function(){
html = '';
for (var i=0; i<sites.length; i++){
html += '<tr>';
html += '<td><a href="pages/examples/invoice.html">' + sites[i].sitename + '</a></td>';
html += '<td>' + sites[i].address + '</td>';
html += '<td>' + sites[i].status + '</td>';
html += '<td>' + sites[i].contact + '</td>';
html += '</tr>';
}
$("#theTable tbody").empty().append(html);
});
DEMO
solution2
0 2016-03-24 17:33:58
You can also use Kendo to populate local data like so:
$(document).ready(function(){
var table = $("#theTable").kendoGrid({
dataSource: sites
});
});
And inside your html you just need to do this to your table:
<body>
<div class="box-body">
<div class="table-responsive">
<table class="table no-margin" id="theTable">
<thead>
<tr>
<th data-field="sitename" data-template="<a href='pages/examples/invoice.html' target='_blank'>#=sitename#</a>">Sites</th>
<th data-field="address">Address</th>
<th data-field="status">Status</th>
<th data-field="contact">Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="pages/examples/invoice.html">HTS_SITE_001</a></td>
<td>#24, Pirmasenserstrasse</td>
<td>In progress</td>
<td>joe.simon@google.de</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.