Sticky Column In Kendo Grid

Introduction

Sticky column helps to display the specific column at all the times when the user scrolls the grid horizontally. The sticky column position will be fixed to left/right when it reaches left/right grid border. 

Sticky column

To enable the sticky column just set sticky Boolean property of the column to true. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
</head>
<body>
    <h4>Kenod Grid with Search box</h4>
    <div id="grid"></div>
    <script>
$("#grid").kendoGrid({

  columns: [
        {
          field: "name", title: "Name", width: 550, sticky: true, },
        { field: "age", title: "Age" , width:300},
        { field: "country", title: "Country", width:500 },
        {field:"address", title:"Address", width:200}
  ],
   toolbar: ["search"],
  search: {
                    fields: [
                        { name: "age", operator: "eq" },
                        { name: "name", operator: "contains" },

                    ]
  },
  dataSource: {
    data: [
      { name: "Alexa", age: 29, country:"United States", address:"#123" },
          { name: "Siri", age: 30, country: "United States", address: "#123"},
          { name: "Shaaniya", age: 30, country: "India", address: "#123" },
          
    ]
  }
});
    </script>
</body>
</html>

You can observe when you scroll to right the Name column is sticked and its always displayed.

Conclusion

We have seen how to work with sticky column in the kendo grid. You can explore more about kendo grid here

Happy Coding !!!

Click here to get the source code.


Next Recommended Reading Auto Fit Column In Kendo Grid