JSFiddle - React, Tailwind, and code Playground

by Denis Pavlov

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
Select Sort Column:
<br>
<select id="choice">
  <option>OrderID</option>
  <option>ShipName</option>
  <option>ShipCity</option>
</select>
<br><br><br>
<button id="link" class="k-button" id="get">LOAD INIT SORT</button>
<br><br><br>
<div id="grid"></div>

JavaScript

$("#choice").kendoDropDownList();

var getKendoDataSource = function (sidx, sord) {
  return new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    pageSize: 10,
    serverPaging: true,
    serverSorting: true,
    sort: {
      field: sidx ? sidx : "",
      dir: sord ? sord : ""
    }
  });
};

var myKendoGrid = $("#grid").kendoGrid({
  columns: [
    { field: "OrderID" },
    { field: "ShipName" },
    { field: "ShipCity" }
  ],
  dataSource: null,
  pageable: {
    pageSizes: [10, 20, 50, 100, 200]
  },
  resizable: true,
  scrollable: false,
  sortable: {
    allowUnsort: false
  }
});

$("#link").click(function () {
  myKendoGrid.data("kendoGrid").setDataSource(getKendoDataSource($("#choice").val(), "asc"));
});