JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
    <div class="order">
        <div class="k-grid" data-id="${GroupId}"></div>
    </div>        
</script>

<div id="listView"></div>

JavaScript

$("#listView").kendoListView({
    dataSource: new kendo.data.DataSource({
        data: [{"GroupId":1}, {"GroupId":2}]
    }),
    template: kendo.template($("#template").html()),
    dataBound: function() {
        $(".k-grid", this.element).each(function() {
             var dom = $(this);           
             dom.kendoGrid({
                dataSource: new kendo.data.DataSource({
                    data: [
                            {"GroupId":1,"UnitCaption":"VAC Desktop, Serial No. V2009852"},
                            {"GroupId":2,"UnitCaption":"Apple Tablet, Serial No. APP123"}
                        ],
                    filter: { field: "GroupId", operator: "eq", value: dom.data("id") }
                }),                    
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [ "GroupId", "UnitCaption"]
            });                    
        });
    }            
});