Multi-Row Header Kendo Grid

<!DOCTYPE html>
<html>

  <head>
    <link data-require="kendoUI@2016.2.504" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
    <link data-require="kendoUI@2016.2.504" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />
    <script data-require="kendoUI@2016.2.504" data-semver="2016.2.504" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="kendoUI@2016.2.504" data-semver="2016.2.504" src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
  </head>

  <body>
    <div id="grid"></div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

// Code goes here

function onDataBound(arg) {
  var myElem = document.getElementById('trParentHeader');
  if (myElem === null) {
    $("#grid").find("th.k-header").parent().before("<tr id='trParentHeader'>  <th colspan='2' class='k-header'><strong>Products + Unit Price</strong></th>  <th scope='col' class='k-header'><strong>Single Units in Stock</strong></th></tr>");
  }
}


$(document).ready(function() {
  $("#grid").kendoGrid({
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      },
      pageSize: 20
    },
    height: 550,
    dataBound: onDataBound,
    selectable: "multiple cell",
    pageable: true,
    sortable: true,
    columns: [{
      field: "ProductName",
      title: "Product Name"
    }, {
      field: "UnitPrice",
      title: "Unit Price",
      format: "{0:c}"
    }, {
      field: "UnitsInStock",
      title: "Units In Stock"
    }]
  });
});

/* Styles go here */