Get Started

Prior to version 2.0, w2ui dependented on jQuery. With the latest version of w2ui jQuery is optional, but if you choose to use it, you can download the new w2ui.js and w2ui.css from the /dist folder of the master branch. It will register all core components as globals, just like it was with 1.5 and if jQuery is found, it will register jQuery plugins for backward compatibility.

Below is the example how to use w2ui v2.0 with jQuery (same way as it was with v1.5). You can find more examples in /demos folder of w2ui-1.5 branch. You should use an older version of w2ui (v1.5) if you need your application to work with older browsers (IE 11 and prior).

Download W2UI 1.5 Open GitHub Project

What is Included

The following JavaScript components are included:

Grid - the most feature complete grid in existance
Forms - declarative forms, auto-generated HTML
Layout - user full "real estate" available
Toolbars - check/radio/regular buttons, drop menu, checkboxes, etc.
Sidebars - navigation and sub-navigation
Tree - sidebar can function as a tree
Tabs - modern looking tabs
Popup - alerts, confirmation boxes or general purpose popup
Fields - input fields upgraded
Utilitis - things I do not want to reimplement in each project

Working Example

Below is a complete example of HTML page that uses grid widget: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.js"></script> </head> <body> <div id="grid" style="width: 100%; height: 250px;"></div> </body> <script> $(function () { $('#grid').w2grid({ name: 'grid', header: 'List of Names', columns: [ { field: 'fname', text: 'First Name', size: '30%' }, { field: 'lname', text: 'Last Name', size: '30%' }, { field: 'email', text: 'Email', size: '40%' }, { field: 'sdate', text: 'Start Date', size: '120px' } ], records: [ { recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' }, { recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' }, { recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' }, { recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' }, { recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' }, { recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' } ] }); }); </script> </html>