JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
   <script id="DetailsTemplate" type="text/x-kendo-template">        
        <div id="grd"></div>
        <script type="text/javascript">           
            var tmpData = jQuery.parseJSON('#= kendo.stringify(data) #');
                        
            $("\#grd").kendoGrid
            ({
                dataSource: tmpData.ValArray,
                columns: [
                    { "title": "My ID", "field": "ID" },
                    { "title": "My Value", "field": "Value" }
                    //if you take out the line below this it works.
                    ,{ "title": "Alert", "template": "This has a value field = #=Value#" }
                ]
            });
        </script>
    </script>

    <div id="main"></div>

<div id="grdWorks"></div>

JavaScript

$(document).ready(function() {
    var masterData = {
        "ValArray": [{
            ID: 1,
            Value: "Test 1"},
        {
            ID: 2,
            Value: "Test 2"}]
    };
    
    //working example of the load that is placed in the template
    $("#grdWorks").kendoGrid
            ({
                dataSource: masterData .ValArray,
                columns: [
                    { "title": "My ID", "field": "ID" },
                    { "title": "My Value", "field": "Value" }
                    ,{ "title": "Alert", "template": "This has a value field = #=Value#" }
                ]
            });

    var detailsTemplate = $("#DetailsTemplate").html();
    var template = kendo.template(detailsTemplate )

    var main = $('#main');
    main.append(template(masterData));
});