Display Hidden Column Values in Detail Template
Environment
Product Version | 2018.2.620 |
Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I display the hidden columns values in the detail template of the rows in the Kendo UI Grid?
Solution
- Implement a
detailTemplate
. - Use media queries to show and hide the desired data in the detail template.
<style>
.k-hierarchy-col,
.k-hierarchy-cell{
display: none;
}
.k-grid-header .k-hierarchy-cell+th{
border-left-width: 0;
}
.grid-name,
.grid-age{
display: none;
}
@media only screen and (max-width: 749px){
.k-hierarchy-col{
display: table-column;
}
.k-hierarchy-cell{
display: table-cell;
}
.k-grid-header .k-hierarchy-cell+th{
border-left-width: 1px;
}
.grid-age{
display: block;
}
}
@media only screen and (max-width: 499px){
.grid-name{
display: block;
}
}
</style>
<div id="grid"></div>
<script id="detail-template" type="text/x-kendo-template">
<div class='grid-name'>
Name: #: name #
</div>
<div class='grid-age'>
Age: #: age #
</div>
</script>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name", width: 250, minScreenWidth: 500 },
{ field: "age", width: 250, minScreenWidth: 750 }
],
dataSource: [
{ id: 1, name: "Jane Doe", age: 31, city: "Boston" },
{ id: 2, name: "John Doe", age: 55, city: "New York" }
],
detailTemplate: kendo.template($("#detail-template").html()),
columnShow: function(e){
if(window.innerWidth>=750){
e.sender.collapseRow(".k-master-row");
}
}
});
</script>