JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<title>W2UI Demo: combo-2</title>
    <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.3.2.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.3.2.min.js"></script>
</head>
<body>

<div id="main" style="width: 100%; height: 400px;">
    </div>

JavaScript

// widget configuration
var config = {
    layout: {
        name: 'layout',
        padding: 4,
        panels: [
            { type: 'main', size: '50%', resizable: true, minSize: 300 }
        ]
    },
    grid: { 
        name: 'grid',
        show: {
            toolbar            : true,
            toolbarDelete    : true
        },
        columns: [
            { field: 'recid', caption: 'Account No', size: '100%', sortable: true },		   
            { field: 'accountname', caption: 'Account Name', size: '100%',searchable: true },
            { field: 'receipt',type:'float',id:'receipt',caption: 'Receipt',size:'100%',render:'float',editable:{type:'float'}},
            { field: 'payment',type:'int',id:'payment', caption: 'Payment',size:'100%',sortable:true,render:function(record){
            return '<a href="'+record.link+'">'+record.payment+'</a>'
            }
            
            },
            	
            
        ],
        records: [
{ recid: 1, accountname: 'ABC',receipt: '35.8',payment:14874,link:'http://www.google.com'},
            
{ recid: 2, accountname: 'DCB',receipt: '250.50',payment:14875,link:'http://www.google.com'},
      
{ recid: 3, accountname: 'ABC',receipt: '35.8',payment:1530,link:'http://www.google.com'},
   
       
{ recid: 4, accountname: 'ABC',receipt: '35.8',payment:2974,link:'http://www.google.com'},
            
        ],
        onClick: function(event) {
            var grid = this;
            var form = w2ui.form;
            console.log(event);
            event.onComplete = function () {
                var sel = grid.getSelection();
                console.log(sel);
                if (sel.length == 1) {
                    form.recid  = sel[0];
                    form.record = $.extend(true, {}, grid.get(sel[0]));
	                    form.refresh();
					func();
					
                } else {
                    form.clear();
                }
            }
        }
    },

}

$(function () {
    //...