JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="tabstrip">
    <ul>
        <li class="k-state-active">Tab 1</li>
        <li>Tab 2</li>
        <li>Grid</li>
        <li id="tab3">Tab 4</li>
    </ul>
    <div>Tab 1 content</div>
    <div>
        <div>
            <button id="populateGridAuto" class="k-button">Populate Grid Auto Select Grid Tab </button>(Activate event does not fire)<br /><br />
            <button id="populateGridManual" class="k-button">Populate Grid Manually Select Grid Tab</button>(click button then manually select the Grid tab, grid displays properly)
        </div>
    </div>
    <div>
        <div id="results"></div>
    </div>
    <div>
        <div>Tab 3 content</div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: hidden
}
#tabstrip, #results {
    height: 100%;
}

JavaScript

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
        lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
        cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
        titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
            "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
        birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

    function createRandomData(count) {
        var data = [],
            now = new Date();
        for (var i = 0; i < count; i++) {
            var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
                lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
                city = cities[Math.floor(Math.random() * cities.length)],
                title = titles[Math.floor(Math.random() * titles.length)],
                birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
                age = now.getFullYear() - birthDate.getFullYear();

            data.push({
                Id: i + 1,
                FirstName: firstName,
                LastName: lastName,
                City: city,
                Title: title,
                BirthDate: birthDate,
                Age: age
            });
        }
        return data;
    }

    function resizeAll() {
        var tabStripElement = $("#tabstrip");
        tabStripElement.children(".k-content").height(tabStripElement.innerHeight() -...