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

Display Frozen Rows in Grids


Product Progress Kendo UI Grid
Progress Kendo UI version 2017.3.913


How can I display frozen rows in a Kendo UI Grid based on a condition or a value from the model?


If you only want to display particular rows at the top of the Grid, even after scrolling:

  1. Clone the rendered records.
  2. Append the rendered records to the header of the Grid.

The following example demonstrates the full implementation of this approach and uses a value from the model to determine whether or not to add the records to the header.

        .customHeaderRowStyles td{
            background: #bde0ed!important;
            background-image: none;
<div id="example">
    <div id="grid"></div>
        $(document).ready(function () {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//"
                    pageSize: 20
                height: 350,
                sortable: true,
                dataBound: function (e) {
            var items = e.sender.items();
              var row = $(this);
              var dataItem = e.sender.dataItem(row);
              if(dataItem.ContactTitle == "Marketing Manager"){
                  var item = row.clone();                
                  var thead = e.sender.element.find(".k-grid-header table thead");
                    e.sender.element.height(e.sender.element.height() + row.height());                

                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                columns: [{                 
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
In this article
Not finding the help you need? Improve this article