JSFiddle - React, Tailwind, and code Playground

by ArtVandelay

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<script src="http://www.class.pm/files/jquery/jquery.contextmenu/demo/js/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="http://www.class.pm/files/jquery/jquery.contextmenu/demo/css/jquery.contextmenu.css">
<h1>KendoGrid/ContextMenu Demo</h1>
<p>Right click grid to open menu</p>
<p>First click triggers OnClick, but no postback. Second click triggers onClick and Postback. Why the difference?</p>
<div id="grid"></div>
<div id="menu">
<ul>
    <li><a href="" onclick='alert("clicked")'>Menu Item 1</a></li>
    <li><a href="" onclick='alert("clicked")'>Menu Item 2</a></li>
</ul>    
</div>

CSS

.fake{color:red}.k-reset{margin:0;padding:0;border:0;outline:0;text-decoration:none;font-size:100%;list-style:none}.k-floatwrap:after,.k-slider-items:after,.k-grid-toolbar:after{content:"";display:block;clear:both;visibility:hidden;height:0;overflow:hidden}.k-floatwrap,.k-slider-items,.k-grid-toolbar{display:inline-block}.k-floatwrap,.k-slider-items,.k-grid-toolbar{display:block}.k-button,.k-header,.k-grid-header,.k-toolbar,.k-grouping-header,.k-tooltip,.k-pager-wrap,.k-tabstrip-items .k-item,.k-link.k-state-hover,.k-autocomplete,.k-dropdown-wrap,.k-picker-wrap,.k-numeric-wrap,.k-autocomplete.k-state-hover,.k-dropdown-wrap.k-state-hover,.k-picker-wrap.k-state-hover,.k-numeric-wrap.k-state-hover,.k-draghandle{background-repeat:repeat-x;background-position:0 center}.k-tabstrip,.k-menu-vertical,.k-editor,.k-tooltip,.k-state-hover,.k-state-focused,.k-state-selected{background-position:0 -258px}.k-widget,.k-input[type="text"],.k-input[type="number"],.k-textbox,.k-picker-wrap .k-input,.k-button,.k-draghandle{font-size:100%;font-family:inherit;border-style:solid;border-width:1px;-webkit-appearance:none}.k-widget{line-height:normal}.k-button{display:inline-block;margin:0;padding:2px 7px 2px;font-family:inherit;line-height:1.66em;text-align:center;cursor:pointer;outline:0;text-decoration:none}a.k-button{-webkit-user-select:none;-moz-user-select:none;user-select:none}.k-button:-moz-any(input[type="submit"],input[type="button"],input[type="reset"]){padding-bottom:.37em;padding-top:.37em}*+html .k-button{overflow:visible;margin-right:4px}*+html a.k-button{line-height:1.6;padding-left:7px;padding-right:7px}*+html .k-button-expand{margin-left:0;margin-right:0}button.k-button::-moz-focus-inner,input.k-button::-moz-focus-inner{padding:0;border:0}a.k-button-expand{display:block}button.k-button-expand,input[type="submit"].k-button-expand,input[type="button"].k-button-expand,input[type="reset"].k-button-expand{width:100%}body .k-button-icon{padding-left:4px;padding-right:4px}*+html...

JavaScript

$(document).ready(function() {
    var items = [{
        "id" : "1",
        "name" : "Item 1"    
        }, {
        "id" : "2",
        "name" : "Item 2"    
        }, {
        "id" : "3",
        "name" : "Item 3"   
        }, {
        "id" : "4",
        "name" : "Item 4"   
        }, {
        "id" : "5",
        "name" : "Item 5"  
        }]; 
    
    var dataSource = new kendo.data.DataSource({
        pageSize: 10,
        data: items,
        autoSync: true,
        schema: {
            id: "id",
            fields: {
                id: { type: "number", editable: false },
                name: { type: "string", editable: false }
            }            
        }
    });
        
    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 300,
        columns: [
            { field: "id", title: "ID" },
            { field: "name", title: "Name" }
        ],
        editable: "inline"
    });
    
    $("#grid").contextMenu({ menu: 'menu' });
});