Hello, i'm new, how can i enable Header filtering in a Row Template grid.
I'm using, an exemple i found in this forum ....
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<table id="grid">
<colgroup>
<col class="photo" />
<col class="details"/>
<col/>
</colgroup>
<thead>
<tr>
<th>
Picture
</th>
<th>
Details
</th >
<th data-field="EmployeeID">
ID
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="photo">
image
</td>
<td class="details">
<span class="title">#: Title #</span>
<span class="description">Name : #: FirstName# #: LastName#</span>
<span class="description">Country : #: Country# </span>
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
<style scoped>
.photo {
width: 140px;
}
.details {
width: 400px;
}
.title {
display: block;
font-size: 1.6em;
}
.description {
display: block;
padding-top: 1.6em;
}
.employeeID {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 50px;
font-weight: bold;
color: #898989;
}
td.photo, .employeeID {
text-align: center;
}
.k-grid-header .k-header {
padding: 10px 20px;
}
.k-grid td {
}
</style>
</div>
</body>
</html>
I'm using, an exemple i found in this forum ....
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<table id="grid">
<colgroup>
<col class="photo" />
<col class="details"/>
<col/>
</colgroup>
<thead>
<tr>
<th>
Picture
</th>
<th>
Details
</th >
<th data-field="EmployeeID">
ID
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td class="photo">
image
</td>
<td class="details">
<span class="title">#: Title #</span>
<span class="description">Name : #: FirstName# #: LastName#</span>
<span class="description">Country : #: Country# </span>
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
<style scoped>
.photo {
width: 140px;
}
.details {
width: 400px;
}
.title {
display: block;
font-size: 1.6em;
}
.description {
display: block;
padding-top: 1.6em;
}
.employeeID {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-size: 50px;
font-weight: bold;
color: #898989;
}
td.photo, .employeeID {
text-align: center;
}
.k-grid-header .k-header {
padding: 10px 20px;
}
.k-grid td {
}
</style>
</div>
</body>
</html>
3 Answers, 1 is accepted
0
Hello Pascal,
Here is a short example which demonstrates how to combine filtering and row template. A few things to notice - The table does not contain a thead tag, the Grid has a columns configuration and the dataSource has a schema.model configuration for the fields. The same approach could be used, when the Grid is initialized from a div.
Dimiter Madjarov
Telerik
Here is a short example which demonstrates how to combine filtering and row template. A few things to notice - The table does not contain a thead tag, the Grid has a columns configuration and the dataSource has a schema.model configuration for the fields. The same approach could be used, when the Grid is initialized from a div.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
John
Top achievements
Rank 2
Rank 2
answered on 08 Jul 2015, 02:05 PM
Dimiter,
I also have a need to filter on a grid cell that has been created using a row template. In the example you provided the filter only works on the the field on which the column is based (in this example the title and id fields). Is there a way to filter on any/all of the the text in the column cell that was created using the row template?
Thanks!
John Meyer
0
Hello John,
The current requirement is not supported. The dataSource is not aware of the fields that are displayed in the templates. The only field that will be filtered is the one that the column is bound to. If you want, you could implement a custom filtering outside of the Grid and use the filter method of the dataSource API.
Regards,Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!