JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<button id="data">Get Data</button>

<div id="grid"></div>

JavaScript

var data = [
    { id: 1, text: "text 1", category: 1},
    { id: 2, text: "text 2", category: 2},
    { id: 3, text: "text 3", category: 1}
]

var categories = [
	{value: 1, text: "Cars"},
  {value: 2, text: "Persons"}
]


    
var dataSource = new kendo.data.DataSource({
        data: data,        
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    text: { type: "string" },
                    category: { type: "number" }
                }
            }
        }
    });
    
var dataSource2 = new kendo.data.DataSource({
			data: categories,
      schema: {
          model: {
							id: "value",
              fields: {
              		value: { type: "number" },
                  text: { type: "string" }
              }
          }
      }
});

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,  
    scrollable: false,    
    columns: [
    	{ field: "id" },
      { field: "text" },
      { field: "category", values: dataSource2 }
      ]            
}).data("kendoGrid");

$('#data').on('click', function(){
    console.log(JSON.stringify(dataSource.data()));
    console.log(JSON.stringify(dataSource2.data()));
});