PALv4 Template

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-kendo/0.9.8/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<button onClick="$('#test').show();$('#grid').data('kendoGrid').refresh();">Show Grid</button>
<button onClick="HideDynColumnsOnPageLoad">Hide Grid</button>
<div id="test" style="display:none">
  <div id="grid"></div>
</div>

JavaScript

$(document).ready(function() {
 debugger;
   $("#grid").kendoGrid({
     dataSource: {
       type: "odata",
       transport: {
         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
       },
       schema: {
         model: {
           fields: {
             OrderID: {
               type: "number"
             },
             ShipCountry: {
               type: "string"
             },
             ShipName: {
               type: "string"
             },
             ShipCity: {
               type: "string"
             },
             ShipAddress: {
               type: "string"
             }
           }
         }
       },
       pageSize: 30
     },
     height: 540,
     sortable: true,
     reorderable: true,
     groupable: true,
     resizable: true,
     filterable: true,
     columnMenu: true,
     pageable: true,
     columns: [{
       field: "OrderID",
       title: "Order ID",
       locked: true,
       lockable: false,
       width: 150
     }, {
       field: "ShipCountry",
       title: "Ship Country",
       width: 300
     }, {
       field: "ShipCity",
       title: "Ship City",
       width: 300
     }, {
       field: "ShipName",
       title: "Ship Name",
       locked: true,
       width: 300
     }, {
       field: "ShipAddress",
       lockable: false,
       width: 400
     }],
     dataBound: function(e) {
       $("button").show();
     }
   });

   function HideDynColumnsOnPageLoad() {
     debugger;
     var gridObj = $("#grid").data("kendoGrid");
     var cols = gridObj.columns;
     for (let i = 1; i <= 4; i++) {
       cols[i].hidden = true;

     }
     gridObj.setOptions({
       columns: cols
     });

   }
 });