Kendo Grid locked column drag

by Nicking

HTML

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/column-virtualization">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/jquery.min.js"></script>
   
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>


</head>
<body>
    <div id="example">
    <div id="grid"></div>
 
</div>



</body>
</html>

SCSS

th:nth-child(odd) {
  background-color: lightgray;
}

th:nth-child(even) {
  background-color: orange;
}

.k-grid-header-locked {  
  th {
    background-color: red;
    color: white;
  }
}

JavaScript

$(function() {
            let columns = [];
            let data = [];
            let numberOfColumns = 5;
            let numberOfRows = 10;
            let row, field, props;
               
            for (let i = 1; i <= numberOfColumns; i++) {
                field = ("Field" + i);
              	props = { field: field, title: field, width: 200 };
                
                if(i == 1){
                	props.locked = true;
                  props.headerTemplate = "<b>Locked</b>"
                }
                              
                columns.push(props);
            }
            
            for (let i = 1; i <= numberOfRows; i++) {
                row = {};
                
                for (let j = 1; j <= numberOfColumns; j++) {
                    field = ("Field" + j);
                    row[field] = "R" + i + ":C" + j;
                }
                
                data.push(row);
            }

           let dataSource = new kendo.data.DataSource({
               pageSize: 10,
               data: data
           });
           
           $("#grid").kendoGrid({
               dataSource: dataSource,
               resizable: true,
               width: 1000,
               columns: columns
           });
           
        });