Version Q3 2012
Kendo UI Comprehensive HTML5, JavaScript framework for modern web and mobile app development. Dozens of reusable components built to provide navigation, alerts, popovers, and more.
IOUI contains all current 19 Web widgets as well as the DataWiz components for creating rich, interactive, touch-enabled charts.
Official website » Check out all Kendo UI Web demos » Check out all Kendo UI DataWiz demos »
Grid
The Grid widget displays tabular data and offers rich support for interacting with data; including paging, sorting, grouping, and selection.
| Rank | Rating | Title | Year |
|---|---|---|---|
| 1 | 9.2 | The Shawshank Redemption | 1994 |
| 2 | 9.2 | The Godfather | 1972 |
| 3 | 9 | The Godfather: Part II | 1974 |
| 4 | 8.9 | Il buono, il brutto, il cattivo. | 1966 |
| 5 | 8.9 | Pulp Fiction | 1994 |
| 6 | 8.9 | 12 Angry Men | 1957 |
| 7 | 8.9 | Schindler's List | 1993 |
| 8 | 8.8 | One Flew Over the Cuckoo's Nest | 1975 |
| 9 | 8.8 | Inception | 2010 |
| 10 | 8.8 | The Dark Knight | 2008 |
Responsive Grid using the No More Tables technique
This Grid widget uses the No More Tables technique to alter the table completely. To change a Kendo Grid requires setting the "data-title" as an attribute on you columns and adding some extra CSS to hide Kendos headers.
Refer to the code below on how this Grid is configured.
| Rank | Rating | Title | Year |
|---|---|---|---|
| 1 | 9.2 | The Shawshank Redemption | 1994 |
| 2 | 9.2 | The Godfather | 1972 |
| 3 | 9 | The Godfather: Part II | 1974 |
| 4 | 8.9 | Il buono, il brutto, il cattivo. | 1966 |
| 5 | 8.9 | Pulp Fiction | 1994 |
| 6 | 8.9 | 12 Angry Men | 1957 |
| 7 | 8.9 | Schindler's List | 1993 |
| 8 | 8.8 | One Flew Over the Cuckoo's Nest | 1975 |
| 9 | 8.8 | Inception | 2010 |
| 10 | 8.8 | The Dark Knight | 2008 |
<div class="kendo-responsive-grid-content">
<table id="responsive-grid">
<thead>
<tr>
<th data-field="rank">Rank</th>
<th data-field="rating">Rating</th>
<th data-field="title">Title</th>
<th data-field="year">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>9.2</td>
<td>The Shawshank Redemption</td>
<td>1994</td>
</tr>
<tr>
<td>2</td>
<td>9.2</td>
<td>The Godfather</td>
<td>1972</td>
</tr>
<tr>
<td>3</td>
<td>9</td>
<td>The Godfather: Part II</td>
<td>1974</td>
</tr>
<tr>
<td>4</td>
<td>8.9</td>
<td>Il buono, il brutto, il cattivo.</td>
<td>1966</td>
</tr>
<tr>
<td>5</td>
<td>8.9</td>
<td>Pulp Fiction</td>
<td>1994</td>
</tr>
<tr>
<td>6</td>
<td>8.9</td>
<td>12 Angry Men</td>
<td>1957</td>
</tr>
<tr>
<td>7</td>
<td>8.9</td>
<td>Schindler's List</td>
<td>1993</td>
</tr>
<tr>
<td>8</td>
<td>8.8</td>
<td>One Flew Over the Cuckoo's Nest</td>
<td>1975</td>
</tr>
<tr>
<td>9</td>
<td>8.8</td>
<td>Inception</td>
<td>2010</td>
</tr>
<tr>
<td>10</td>
<td>8.8</td>
<td>The Dark Knight</td>
<td>2008</td>
</tr>
</tbody>
</table>
</div>
@media only screen and (max-width: 1020px) {
/* Ensure headers are hidden and styled properly */
.kendo-responsive-grid-content .k-grouping-header {
display: none;
}
.kendo-responsive-grid-content .k-grid-header {
border-bottom: none;
}
/* Align numbers to the right */
.kendo-responsive-grid-content .k-grid-content table td.numeric, .kendo-responsive-grid-content .k-grid-content table th.numeric {
text-align: right;
}
/* Hide table headers (but not display: none;, for accessibility) */
.kendo-responsive-grid-content .k-grid-header-wrap thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Hide the scrollbar */
.kendo-responsive-grid-content .k-grid-content {
overflow-y: hidden;
}
/* Force table to not be like tables anymore */
.kendo-responsive-grid-content .k-grid-content table {
table-layout: auto;
}
.kendo-responsive-grid-content .k-grid-content table table,
.kendo-responsive-grid-content .k-grid-content table thead,
.kendo-responsive-grid-content .k-grid-content table tbody,
.kendo-responsive-grid-content .k-grid-content table th,
.kendo-responsive-grid-content .k-grid-content table td,
.kendo-responsive-grid-content .k-grid-content table tr {
display: block;
}
.kendo-responsive-grid-content .k-grid-content table td {
/* Behave like a "row" */
border: none;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
.kendo-responsive-grid-content .k-grid-content table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
/* Label the data */
content: attr(data-title);
}
}
$("#responsive-grid").kendoGrid({
dataSource: {
pageSize: 5
},
columns: [
{
field: "rank",
attributes: {
"data-title": "Rank",
"class": "numeric"
}
},
{
field: "rating",
attributes: {
"data-title": "Rating",
"class": "numeric"
}
},
{
field: "title",
attributes: {
"data-title": "Title"
}
},
{
field: "year",
attributes: {
"data-title": "Year",
"class": "numeric"
}
}
],
sortable: true,
pageable: {
refresh: true,
pageSizes: true
}
});
Remote Grid with inline editing
The Grid widget displays tabular data and offers rich support for interacting with data; including paging, sorting, grouping, and selection.
Note that you can’t save any changes since it is not implemented in Kendos sample service .
Editor
The Editor allows users to create rich text content by means of a WYSIWYG interface. The generated widget value is comprised of XHTML markup.
Heads up! The editor currently has known issues with Firefox 17+. Hopefully this will be resolved in the near future. More info here
DataViz
Rich, interactive, touch-enabled charts for your application.
View all DataViz widgetsPie Charts
Show the relative quantitative value or percentage of items with respect to the total.