JSFiddle - React, Tailwind, and code Playground

by jumbalia

HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <!-- KENDO -->
    <link href="../styles/kendo.common.min.css" rel="stylesheet" type="text/css" /><link href="../styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/kendo.all.min.js" type="text/javascript"></script>

    <!-- KENDO -->

</head>
<body>
    <form method="post" action="jobsView.aspx?Location=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTM3MzU5MTQ5NA9kFgICAw9kFgICAQ9kFgICAQ8WAh4LXyFJdGVtQ291bnQCAhYEZg9kFgJmDxUHATIMU2hlbGYgVGFsa2VyCXNmc2ZkZ2ZzZAtTdXR0ZXIgSG9tZQNOZXcPSmVyZW15IExpYmVydG9yATJkAgEPZBYCZg8VBwEyDFNoZWxmIFRhbGtlcglzZnNmZGdmc2QKRmluZSBXaW5lcwNOZXcPSmVyZW15IExpYmVydG9yATJkZN0/8jIoEoKXS0lnGp8UabzOH6hbIPM4OhOO5/vgsNPt" />
</div>

        <h1>New Jobs</h1>

        


     <!-- Define the HTML table, with rows, columns, and data -->

     <table class="jobsGrid">
      <thead>
          <tr>
              <th data-field="title">Job #</th>
              <th data-field="Type">Type of Project</th>
              <th data-field="Desc">Description</th>
              <th data-field="Brand">Brand</th>

              <th data-field="Milestone">Next Milestone</th>
              <th data-field="Location">Job Location</th>
              <th data-field="Sub">Submitter</th>
              <th data-field="move"></th>
          </tr>
      </thead>
      <tbody>

   
          
            <tr>
              <td>2</td>
  ...

JavaScript

function refreshGrid() {
        //alert("I will try to refresh the grid");
        var grid = $(".jobsGrid").data("kendoGrid");
        grid.refresh();
    }

    //MOVE WINDOW
    $(document).ready(function () {

        $(".jobsGrid").kendoGrid();

        $(".moveLink").click(function () {
            var href = $(this).data("url");
            var title = $(this).attr("title");
            var myWin = $(".moveWindow");

            if (!myWin.data("kendoWindow")) {
                // window not yet initialized
                myWin.kendoWindow({
                    width: "auto",
                    height: "auto",
                    modal: true,
                    resizable: true,
                    title: title,
                    content: href,
                    close: refreshGrid
                });
            } else {
                // reopening window
                myWin.data("kendoWindow")
                .content("Loading...") // add loading message
                .center()
                .refresh(href) // request the URL via AJAX
                .open(); // open the window
            }

            return false;
        });
    });