JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<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.blueopal.min.css">
<div id="listview"></div>


<script id="template" type="text/x-kendo-tmpl">
    <div data-type="${name}">
        ${name}
    </div>
</script>

JavaScript

var data1 = {
    "Automobiles": 1234,    
    "Cars": [
        {
        "Toyota": [
            "Lexus",
            "Camry",
            "Corolla"
            ]},
    {
        "Honda": [
            "Civic",
            "Accord",
            "Acura"
            ]}
    ],
    "Bikes": [
        {
        "Yamaha": [
            "Ex",
            "Dx",
            "Lx"
            ]},
    {
        "Suzuki": [
            "1x",
            "2x",
            "3x"
            ]}
    ]
};

var type = [
    { name: "Cars" },
    { name: "Bikes" }
];

var manufacturers = {
    Cars: [{
        name: "Toyota"
    },
    { 
        name: "Honda"
    }],
    Bikes: [{
        name: "Yamaha"
    },
    { 
        name: "Suzuki"
    }]
};

$("#listview").kendoListView({ 
    dataSource: type,    
    template: kendo.template($("#template").html()),
    selectable: true,
    change: function() {
        var type = this.select().data("type");
        
        this.dataSource.data(manufacturers[type]);
    }
});