New to Kendo UI for jQuery? Download free 30-day trial

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>
In this article