JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link
      rel="stylesheet"
      href="https://kendo.cdn.telerik.com/themes/9.0.0/default/default-ocean-blue.css"
    />

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.3.1015/js/kendo.all.min.js"></script>
  </head>
  <body>
    <h2>Step 2: Reorder the default columns selected in Step 1</h2>
    <h4>
      Below are the default selected columns from step 1 loaded in alphabetical
      order
    </h4>
    <select id="listBoxA">
      <option>Business Status</option>
      <option>Contract Value</option>
      <option>Created By</option>
      <option>Created Date</option>
      <option>Name</option>
      <option>Status</option>
    </select>
    <br />
    <br />
    <button onclick="step3();">
      Save
    </button>
    <br />
    <br />
    <div id="dvReordered"></div>
    <script>
      $("#listBoxA").kendoListBox({
        draggable: true,
      })

      function step3() {
        var listBox = $("#listBoxA").data("kendoListBox");
        var items = listBox.items();
        console.log(items)
      }
    </script>
  </body>
</html>