Kendo Grid: Column Freezing on Horizontal Scrolling

Introduction

Sometimes, we have lots of columns in a kendo grid with a Horizontal Scrollbar. In that case, sometimes we need some column to be fixed (not affected by the horizontal scrolling) for easier viewing of the data.

The column freezing functionality is included in the latest version of kendoUI. If we are using the older version of Kendo UI, then there is no built in feature for freezing columns on horizontal scrolling.

Here is a way in which we can achieve the same using CSS and Jquery:

1. First, we have to divide the grid structure into 2 grids, one for the frozen columns and other for the scrollable columns.
2. Add some CSS to the Freezable columns grid so that they can't be scrolled.
3. We need to have some JS logic so that on vertically scrolling of non frozen column, automatically the frozen column will also be scrolled.

Here is the code for the same.

HTML

<div id="divFreezableEmployeeDetails"></div>
<div id="divScollableEmployeeDetails"></div>

Jquery

var freezedGridId = $("#divFreezableEmployeeDetails");

var ScollableGridId = $("#divScollableEmployeeDetails");


//Initialize and populate the grids

GetDatasource( function (dataSource) {

            if (dataSource != null) {
                InitializeFreezableEmployeeDetails(freezedGridId, dataSource );

                InitializeScollableEmployeeDetails(ScollableGridId , dataSource );            }
        });


//initialize the FreezedEmployeeDetails

function InitializeFreezableEmployeeDetails(gridId, source) {


        gridId.kendoGrid({
            dataSource: {
                data: source,
                schema: {
                    model: {
                        fields:
                        {
                            EmployeeId: { type: "int" },
                            Name: { type: "string" }
                        }
                    }
                }
            },


             height: 700,
            sortable: true,
            resizable: true,
            scrollable: true,
            width: 1700,
            columns: [
                {
                    title:"EmployeeId"
                    field: "EmployeeId"
                    width: 90
                },

                {
                    title:"Name"
                    field: "Name"
                    width: 90
                },

  }
            ]
        });



//initialize the ScollableEmployeeDetails

function InitializeScollableEmployeeDetails(gridId, source) {


        gridId.kendoGrid({
            dataSource: {
                data: source,
                schema: {
                    model: {
                        fields:
                        {
                            Age: { type: "int" },
                            Address: { type: "string" },

                            Exp:{type:"string"},

                            Dob:{type:"string"},

                            Skill:{type:"string"}
                        }
                    }
                }
            },


             height: 700,
            sortable: true,
            resizable: true,
            scrollable: true,
            width: 1700,
            columns: [
                {
                    title:"Age"
                    field: "Age"
                    width: 90
                },

                {
                    title:"Address"
                    field: "Address"
                    width: 90
                },

               {
                    title:"Exp"
                    field: "Exp"
                    width: 90
                },

                {
                    title:"Dob"
                    field: "Dob"
                    width: 90
                },

                {
                    title:"Skill"
                    field: "Skill"
                    width: 90
                },

  }
            ]
        });


//Make the Freezable grid vertically scrollable on vertical scrolling of Scrollable grid

$("#divScollableEmployeeDetails .k-grid-content").on("scroll", function(e) {
  $("#divFreezableEmployeeDetails .k-grid-content").scrollTop($(e.currentTarget).scrollTop());
});

#divFreezableEmployeeDetails{
  width: 100px;
  border-right: none;
  float:left
}
#divScollableEmployeeDetails {
  width: 200px;
  float:left
}
#divFreezableEmployeeDetails .k-grid-header {
  padding-right: 0 !important;
}
#divFreezableEmployeeDetails .k-grid-content{
  overflow-x: scroll;
  overflow-y: hidden;
}