Display Frozen Rows in Grids

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2017.3.913

Description

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

Solution 1

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.

	<style>
		.customHeaderRowStyles td{
			background: #bde0ed!important;
			background-image: none;
		}
	</style>
<div id="example">
    <div id="grid"></div>
    <script>
    	$(document).ready(function () {
    		$("#grid").kendoGrid({
    			dataSource: {
    				transport: {
    					read: "https://demos.telerik.com/service/v2/core/Customers"
    				},
    				pageSize: 20
    			},
    			height: 350,
    			sortable: true,
    			dataBound: function (e) {
    				e.sender.element.find(".customHeaderRowStyles").remove();
            var items = e.sender.items();
            e.sender.element.height(e.sender.options.height);   
            items.each(function(){
              var row = $(this);
              var dataItem = e.sender.dataItem(row);
              if(dataItem.ContactTitle == "Marketing Manager"){
                  var item = row.clone();                
                  item.addClass("customHeaderRowStyles");
                  var thead = e.sender.element.find(".k-grid-header table thead");
                  thead.append(item);
                	e.sender.element.height(e.sender.element.height() + row.height());                
                  row.hide();
              }
            })

    			},
    			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
    			}]
    		});
    	});
    </script>
</div>

Solution 2

To dynamically pin and unpin / freeze and unfreeze rows you can:

1. Create a context menu over the grid rows
2. On select pin or unpin the item from the thead

	<style>
      .customHeaderRowStyles td{
        background: #bde0ed!important;
        color:black;
        background-image: none;
      }
    </style>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>

    <div id="example">
      <h4>Use the Kendo UI ContextMenu over the grid rows to pin and unpin rows on the fly</h4>
      <div id="grid"></div>
      <ul id="context-menu">
        <li id="pin">Pin to top</li>
        <li id="unPin">Unpin</li>
      </ul>
      <script>
          var grid = $("#grid").kendoGrid({
            dataSource: {
              data: createRandomData(100),
              pageSize: 30,
              schema: {
                model: {
                  id: "Id",
                  fields: {
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    City: { type: "string" },
                    Age: { type: "number" },
                    BirthDate: { type: "date" }
                  }
                }
              }
            },
            height: 500,
            selectable: true,
            pageable:true,
            persistSelection:true,
            navigatable: true,
            columns: [ {
              field: "FirstName",
              width: 120,
              title: "First Name"
            } , {
              field: "LastName",
              width: 120,
              title: "Last Name"
            } , {
              width: 120,
              field: "City"
            } , {
              field: "BirthDate",
              title: "Birth Date",
              template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
            } , {
              width: 80,
              field: "Age"
            }]
          }).data("kendoGrid");

          $("#context-menu").kendoContextMenu({
            target: "#grid",
            filter: "td",
            select: function(e) {
              var selectedMenuItem = e.item.id;
              var row = $(e.target).closest("tr");
              grid.element.height(grid.options.height);  
              var thead = grid.element.find(".k-grid-header table thead");

              switch (selectedMenuItem) {
                case "pin":
                  var item = row.clone();                
                  item.addClass("customHeaderRowStyles");
                  thead.append(item);
                  grid.element.height(grid.element.height() + row.height());                
                  row.hide();
                  break;
                case "unPin":
                  if(row.parent().is("thead")){
                    var rowUid = row.data("uid");
                    grid.element.height(grid.element.height() - row.height()); 
                    row.remove();
                    $("tr[data-uid='" + rowUid + "' ]").show();
                  }
                  break;                
                default:
                  break;
              };
            }
          });
      </script>      
    </div>