JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<ul id="test">
        <li class="k-state-active">
            <span class="k-link k-state-selected">Item 1</span>
            <div>
                <div class="span2"><input type="text" value="input 1" /></div>
                <div class="span2"><input type="text" value="input 2" /></div>
            </div>
        </li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>

JavaScript

(function($, undefined) {
    var kendo = window.kendo,
        ui = kendo.ui;

    var MyPanelBar = ui.PanelBar.extend({
        init: function(element, options) {
            var that = this,
                expand = {
                    expand: function(e) {
                        setTimeout(function() {
                            $("input:first", e.item).focus();
                        }, 1);
                    }
                }

                ui.PanelBar.fn.init.call(that, element, $.extend(options, expand));

            element = that.element;
            options = that.options;

        },
        options: {
            name: "MyPanelBar"
        }
    });

    kendo.ui.plugin(MyPanelBar);
})(jQuery);


$("#test").kendoMyPanelBar();