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.