JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<script src="http://cdn.kendostatic.com/2011.2.804/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.2.804/styles/kendo.kendo.min.css">
<div id="grid"></div>

JavaScript

$(document).ready(function(){
     //simulate request to retrieve columns info
   $.ajax({
             url: "http://services.odata.org/Northwind/Northwind.svc/Orders?$format=json&$callback=callback&$top=1",
             dataType: "jsonp",
             jsonpCallback: "callback",
             jsonp: false,
             success: function(data){
                 var columns = [],
                     name, idx = 0;
                 for(name in data.d[0]) {
                     if(name != "__metadata" && idx++ < 3) {
                         columns.push(name);
                     }
                 }    
                 buildGrid(columns);
             }
        });
    });
    function buildGrid(profile) {        
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://services.odata.org/Northwind/Northwind.svc/Orders"
                },
                pageSize: 10,
                serverPaging: true
            },
            pageable: true,
            columns: profile
        });
    }