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

1. Implement a detailTemplate.
2. 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>