PALv4 Template

by Kishore Sahasranaman

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">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id='container'>
  <div id="grid"></div>
</div>

CSS

.popout {
      position: absolute;
      top: -23px;
      right: 1px;
      height: 25px;
      width: 25px;
      display: none;
      border: 1px gray solid;
    }

JavaScript

var grid1 = $("#grid").kendoGrid({
     dataSource: {
       data: products,
       schema: {
         model: {
           fields: {
             ProductName: {
               type: "string"
             },
             UnitPrice: {
               type: "number"
             },
             UnitsInStock: {
               type: "number"
             },
             Discontinued: {
               type: "boolean"
             }
           }
         }
       },
       pageSize: 20
     },
     height: 550,
     scrollable: true,
     sortable: true,
     filterable: true,
     resizable : true,
     reorderable : true,
     pageable: {
       input: true,
       numeric: false
     },
     columns: [
       "ProductName", {
         field: "UnitPrice",
         title: "Unit Price",
         format: "{0:c}",
         width: "130px"
       }, {
         field: "UnitsInStock",
         title: "Units In Stock",
         width: "130px"
       }, {
         field: "Discontinued",
         width: "130px"
       }
     ]
   });
       // var gridData = grdItems.find(".k-grid-content table tbody tr"); 
        var dt = this.requiredbyDate(); 
        gridData.each(function (e) { 
            var rowItem = $("#requisitionItemsgrid").data().kendoGrid.dataSource.data()[e]; 
            if ($(this).find('input[name=chkGridRow]').is(':checked')) { 
                rowItem.set('requiredBefore', dt); 
            } 
        });