vitmalina/w2ui

UI widgets for modern apps. Data table, forms, toolbars, sidebar, tabs, tooltips, popups. All under 120kb (gzipped).

Road to 2.0

The master branch has a new, in-progress version of w2ui. You might want to consider 1.5 branch that is stable and supports older browsers. Here are the goals for the new version of w2ui.

Road to 2.0 discussion

W2UI v.2 no longer requires jQuery as a dependency. You can download it from the master branch and at the moment, it is stable enough to be considrered for a Release Candidate. All demos have been updated to work as ES6 modules without any dependencies.

About W2UI

W2UI is a modern JavaScript UI library for building rich web applications. It aims to let you define your UI in a declarative way via JSON data structures.

The library has a small footprint (120KB gzipped) and has NO DEPENDENCIES (as of v2.0). W2UI can be used in Vanilla JS projects, ES6 modules, as well as in Angular, React, and Vue based projects.

The library implements the following UI controls:

• w2grid - an advanced Grid component - demo
• w2toolbar - a Toolbar component - demo
• w2sidebar - a Tree/Sidebar component - demo
• w2tabs - Tabs - demo
• w2form - Forms - demo
• w2fields - various Fields - demo
• w2popup - a Popup component - demo
• w2layout - a Layout component - demo
• w2utils - various utilities - demo

The complete library is under 100Kb (minified & gzipped).

Quick Start

Current stable version is 1.5 (supports older browsers). Current development version is 2.0.

Getting Started Guide

You can download latest stable version here: http://w2ui.com. If you want to use the dev version, see the dist/ folder in the master branch.

To start using the library you need to include into your page:

• w2ui.js (or w2ui.min.js)
• w2ui.css (or w2ui.min.css)

All the controls and their css classes are defined inside of these two files. There are no image dependencies. Some images and font icons are embedded into the CSS file.

There is no requirement for a server side language. Node, Java, PHP, ASP, Perl or .NET will all work, as long as you can return JSON format from the server (or write a converter into JSON format on the client). Some server side example implementations can be found here.

Documentation & Demos

You can find documentation and demos here:

• http://w2ui.com/web/docs - documentation
• http://w2ui.com/web/demos - detailed demos

Bug Tracking

Have a bug or a feature request? Please open an issue here https://github.com/vitmalina/w2ui/issues. Please make sure that the same issue was not previously submitted by someone else.

Building

It is a Node.JS repository, so you need to have node installed to install all dependencies and compile w2ui.

npm install

To compile JS and CSS, run

gulp

It will bundle all necessary files into dist/w2ui.min.js and dist/w2ui.min.css

File Structure

- demos       - all demos, same as on w2ui.com
- dist        - compiled JS and CSS files
- docs        - stand alone documentation, same as on w2ui.com
- es6mods     - ES6 modules playground
- libs        - external libs, some used in demos, etc.
- server      - server api samples (to get you started)
- specs       - test automation
- src         - source JS files
  - less      - LESS files (source for css)
  - locale    - int18n - translation to other languages
- test        - manual testing files

Who Is Using W2UI

List of projects that use w2ui!

If you're using w2ui, I'd love to hear about it, please email to [email protected] the name of your project and a link to a public website or demo, and I will add it to the list.

Contributing

Your contributions are welcome. However, a few things you need to know before contributing:

1. Please check out the latest code before changing anything. It is harder to merge if your changes will not merge cleanly.
2. If you are changing JS files - do all changes in /src folder
3. If you are changing CSS files - do all changes in LESS in /src/less/src
4. If you want to help with unit test - do all changes in /qa
5. If you want to change documentation - do all changes in /docs
6. If you want to add demos - do all changes in /demos

w2ui's Issues

No colon in w2ui-1.1.css.

Hello.

I found a minor mistake in "w2ui/css/w2ui-1.1.css".
At line 749, no colon.

div.w2ui-calendar table.w2ui-calendar-days td:hover {
    border 1px solid rgba(0,0,0,0);           // <- colon is missing.
    background-color: yellow;
}

Incidentally, I found it by asset pre-compiling using Ruby on Rails.

Regards,

advanced search

Hi,

In the demo, if I open the advanced search dialog (grid-16), and then i open the simple sidebar page (sidebar-1), the dialog stay open.

Grid: modification of the data on event onLoad

As the data received from the server is not formatted as expected (field recid is not present), I wished to format it during the onLoad handler.

As the data is received as text and I have some processing to do, I eval'ed it as Grid do and I did my job.

But now, eventData.data is not anymore a "string" but an "object" and this is not working with Grid.

So, in w2grid.js, line 878:

var data = 'data = '+ eventData.data;   // $.parseJSON or $.getJSON did not work because it expect perfect JSON data
var data = eval(data);                  //  where everything is in double quotes

we can check whether it's a object

var data;
if (typeof eventData.data == "object") {
  data= eventData.data
} else {
  // $.parseJSON or $.getJSON did not work because it expect perfect JSON data
  //  where everything is in double quotes
  data = eval( 'data = '+ eventData.data);
}

as a side note, eval is global so the variable named data in the eval is not the same as the variable data in the closure.......

Modification in a style CSS line

div.w2ui-grid .w2ui-grid-body td.w2ui-grid-data > div {
    padding: 7px 3px;
    min-height: 24px;   <---- this instead of height: 24px;
}

Otherwise any images will not render well in the grid. The image shows what I have to achieve. This is rendered in an admin of Wordpress.

Problem with Chrome Apps

When building installable applications for Chrome Markertplace there are some problems with inline event handlers. (submitted by Joe Sullivan)

For the inline thing, Google's explanation is http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution.

For the code, this (itsjoesullivan@0d50517#src/w2toolbar.js) commit did most of the changes in w2toolbar.js. But a really basic example is:

The in-line code that Google won't allow might look like:

var html = "<button onclick="sayHi();">Hello</button>"
$(container).html(html);

Whereas a Google-approved version would be:

var button = document.createElement("button");
button.innerHTML = "Hello";
$(button).click(sayHi);
$(container).html(button);

I created json2html to simplify the syntax for creating elements, so the equivalent code (admittedly, not much simpler in this example) goes:

var button = json2html({
         button: "Hello"
});
$(button).click(sayHi);
$(container).html(button);

paging not working when url used in grid

When I use the 'url' property in the grid then the paging doesn't skip to the next page, although all records have been read (36 records read, pagesize 16). I used your recordset of composers.

But when I use instead of the url property:

 w2ui['grid'].load('php/load.php') 

the paging works fine.

Important: the records are showing up in both situations.

$().w2grid({
    name: 'grid',
    header : 'This is working great',
    recordsPerPage: 16,
    url : 'php/load.php',
    toolbar: {
        items: [
            {
                type: 'break',
                id: 'break0'
            },
            {
                type: 'button',
                id: 'showboat',
                caption: 'Showboat',
                img: 'icon-add',
                'hint': 'Some useful hint'
            }],
        onClick: function(target, data) {
            console.log(target);
            console.log(data);
        }
    },
    show: {
        selectColumn: true,
        toolbar: true,
        footer: true,
        toolbarAdd: true,
        toolbarDelete: true,
        toolbarSave: true
    },
    searches: [
        {field: 'lname', caption: 'Last Name', type: 'text'},
        {field: 'fname', caption: 'First Name', type: 'text'},
        {field: 'email', caption: 'Email', type: 'text'}
    ],
    sortData: [{field: 'recid', direction: 'ASC'}],
    header: 'List of Names',
    columns: [
        {field: 'fname', caption: 'First Name', size: '30%', sortable: true},
        {field: 'lname', caption: 'Last Name', size: '30%', sortable: true},
        {field: 'sdate', caption: 'Dates', size: '120px', sortable: true}
    ]
});

PHP load (very plain):

<?php
$data = "
{
total: 36,
page: 0,
header: '50 Greatest Composers of All Times',
records: [
    { recid: 11, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 12, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
    { recid: 13, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 14, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 15, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
    { recid: 16, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 17, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827', style: \"background-color: #C2F5B4\" },
    { recid: 18, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 19, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 20, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: red\" },
    { recid: 21, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809', style: \"background-color: #FBFEC0\" },
    { recid: 22, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
    { recid: 23, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 24, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 25, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: blue\" },
    { recid: 26, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 27, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827'},
    { recid: 28, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 29, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 30, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
    { recid: 31, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 32, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827' },
    { recid: 33, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 34, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 35, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750', style: \"color: gray\" },
    { recid: 36, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 37, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827'},
    { recid: 38, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 39, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 40, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
    { recid: 41, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' },
    { recid: 42, fname: 'Ludwig Van', lname: 'Beethoven', sdate: '1770-1827', style: \"background-color: #C2F5B4\" },
    { recid: 43, fname: 'Wolfgang Amadeus', lname: 'Mozart', sdate: '1756-1791' },
    { recid: 44, fname: 'Johann Sebastian', lname: 'Bach', sdate: '1685-1750' },
    { recid: 45, fname: 'Richard', lname: 'Wagner', sdate: '1685-1750' },
    { recid: 46, fname: 'Joseph', lname: 'Haydn', sdate: '1732-1809' }
]
}
";

echo $data;
?>

My first tests are very promising. You did a great job so far.

Johan

sidebar : display problem

Hi,

In the sidebar demo (sidebar-7), the second group node (label Level 2) display hide but the children nodes are hide.

[REQ] Tabs - Vertical (on the side)

when required to nest tabs, the best approach is to have also have them vertically on the side: http://lucian.lature.net/extjs/demo/VerticalTabPanel/
this way they can be nested without overwhelming the user (see the 3rd and 4th example in the link above)

another interesting option is to have "side tabs" rotated:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/tabs/side-tabs.html
but they're not very efficient since the vertical space is not used very well, and the lisibility also suffers allot due to text rotation.

regards.

Layout: main panel resize

Hi,

How do I get real-time size updates when the main panel in a layout is resized?

I'm currently rendering a three.js renderer into the main panel of a three panel layout. If the panels get resized the renderer needs to be resized as well, so I added a resize event listener:

w2ui['layout'].on('resize', function(target, data) {
   var width = w2ui['layout'].get('main').width;
   var height = w2ui['layout'].get('main').height;
   renderer.setSize(width, height);
   ...
});

However, during the resize the width and height values of the main panels do not change. I can only get a continuous width and height update of all other panels by attaching a 'resizing' event listener (here I get updates for, e.g., the left and right panel, depending which is getting resized).

Is there a better way to update the main panel content when the panels get resized?

And how do I attach event listeners to panels?

Grid: composite keys as field are working in setting but are seen as always changed

If I set a field like "person.age", it is correctly displayed. But this is seen always as changed.

A quick analyze of the code showed that there is the magic dealing with the dot in the set(recid,record) but there is nothing in the getChanged().

Also, it's dealing with only one level so "person.address.town" won't work.

grid toolbar improvement

Consider adding first and last page in pagination toolbar, not only prev and next

Grid: recid with spaces

If I use recid entries with space characters in the name the blue selection for the entry works not correct (tested with 1.1 and 1.2). Are spaces forbidden for recid? If yes, please write this in the documentation. A small demo (note the space in 'B B'):

<html>
<head>
  <link rel="stylesheet" type="text/css" media="screen"
    href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
  <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
  </script>
</head>

<body>

<div id="grid" style="width: 50%; height: 50%;"></div>

<script type='text/javascript'>
  $('#grid').w2grid({
    name: 'foo',
    columns: [ { field: 'recid', caption: 'ID', size: '100%' } ],
    records: [ { recid: 'AA' }, { recid: 'B B' }, { recid: 'CC' } ]
  });
</script>

</body>
</html>

Thanks for your work.
...Rolf

Load form with JSON

the value is not set in LIST field

Special names for name entries (form)

In a form I would like to use name entries like "Foo.Bar.Baz[0]" or similar. For simple text input fields this is possible but not for fields with type "date". The following small demo works. Changing "Foo_Baz" to "Foo.Baz" shows the problem: No date window occurcs.

...Rolf

<html>
<head>
  <link rel="stylesheet" type="text/css" media="screen"
    href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
  <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
  </script>
</head>

<body>

<div id="form">
  <div class="w2ui-page page-0">
    <div class="w2ui-label">Text:</div>
    <div class="w2ui-field">
      <input name="Foo.Bar" type="text" maxlength="100" size="60"/>
    </div>
    <div class="w2ui-label">Date:</div>
    <div class="w2ui-field">
      <input name="Foo_Baz" type="text" size="16"/>
    </div>
  </div>
</div>

<script type='text/javascript'>
$('#form').w2form({
  name      : 'form',
  url       : 'server/post',
  fields: [
    { name: 'Foo.Bar', type: 'text' },
    { name: 'Foo_Baz',  type: 'date' }
  ]
});
</script>

</body>
</html>

Grid: text align not possible

I tried to set the text alignment to right through align="right" or style="text-align:right" with no luck.
After investigation, that's normal.
The style or the attribute is set to the TD tag.
But there value is put in a DIV inside.
Hence there is no way to set the alignment.

w2form() method can't handle 'selected' option.

Hello,
I found that w2form() method can't handle 'selected' option as following...

$('#form').w2form({
    name     : 'form',
    url      : 'server/post',
    fields: [
        { name: 'field_enum', type: 'enum', required: true},
            options: {
                items: [{id:0, text:'Adams, John'}, {id:1, text:'Johnson, Peter'}, {id:2, text:'Lewis, Frank'}, {id:3, text:'Cruz, Steve'}, {id:4, text:'Donnun, Nick'}],
                selected: [{id:1, text:'Johnson, Peter'}]  // <- not working!
            }
        }
    ],
    }
});

Instead, I tried w2field method. but, this method can't handle 'required' option.

$('input[name="field_enum"]').w2field({
        type: 'enum',
        items: [{id:0, text:'Adams, John'}, {id:1, text:'Johnson, Peter'}, {id:2, text:'Lewis, Frank'}, {id:3, text:'Cruz, Steve'}, {id:4, text:'Donnun, Nick'}],
        selected: [{id:1, text:'Johnson, Peter'}], // <- working!
        required: true // <- not working!
    }
);

Would you be able to check this problem?

(Sorry for my broken English. I'm not native english writer.)

Grid object still in the internal tables when DOM is disposed

I'm loading dynamically modules in my app. One of the module is using the grid.
The first time the module is loaded and inserted in the DOM everything went fine.
The second time, I got an error:
ERROR: The parameter "name" is not unique. There are other objects already created with the same name (obj: gridOrderCar).

A quick check shows that there is an internal hash "w2ui" where all the objects are stored.
And it's not on sync with the DOM.
Hence the trouble.

Is there a public way to delete it from the internal table ?
Or is it worth changing the test in w2grid.js for instance to check if there is still a DOM object ?

cheers

"z-Index" in w2ui-1.1.css

I get errors if I use "w2ui-1.1.css" in conjunction with the css preprocessor "LESS". The reason is the parameter "z-Index". I'm not sure if this is a real bug in the css file but I think it would be better using "z-index".

Thanks for your work.

Regards,

...Rolf

sidebar and ie8

Hi
I tested the sidebar component with Internet Explorer 8 (not supported) but I've seen it all works quite well (at least a couple of work around) I noticed two things:
when I double-click on an item in a sidebar (on the text icon) is highlighted throughout the text of the sidebar
functions hide and show the various items do not work well
you have any suggestions?
tnk

w2grid.showStatus function is not considering ignoring status passed

In w2grid.request function, the message passed to 'showStatus' is 'Refreshing' but the status displayed is 'Refreshing...'

How to work with tabs?

Hi,

I'm having some problems working with tabs. For example, how do I set their contents after defining them using w2tabs? How do I get their size (width + height)? I thought that I can just use the selected-tab selector to get the current tab.

Could you please provide an example how I can add, e.g., a simple div or paragraph to a tab?

[REQ] Grid - Buffered Scrolling

while paging in a grid is a nice addition, for many scenarios nowadays, buffered scrolling is much more user friendly. see one in action:

http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/buffer-grid.html

regards.

Publish package to jam

Can you please publish the lib to http://jamjs.org/? I can do it from my account if you have no issues with it. BTW really great library..we been looking for something like this for some time.

Loading a form in a layout from an external html file (small adjustment)

On trying to load a form from an external html file, I have found the property "form_url" in the $.fn.w2form function. This is doing what I want to do except I had to modify one line of code in the function:

On line 7540 (original):

if ($(obj).length != 0) {

in:

if ($(obj).length != 0 || data.length != 0) {

Otherwise the data coming from the $.get function is not rendered into the form.

My form definition looks now like this:

$('#form').w2form({
    name: 'form',
    form_url: 'components/form.html',    // <-- here I put the form_url
    fields: [
        {name: 'fname', type: 'text', required: true},
        {name: 'lname', type: 'text', required: true},
        {name: 'sdate', type: 'text'}
    ],
    actions: {
        loadRecord: function() {

        },
        reset: function() {
            this.clear();
        },
        save: function() {
            this.save();
        }
    }
});

w2ui['layout'].content('main', w2ui['grid']);
w2ui['layout'].content('right', w2ui['form']);   // <-- there is the initial form

A sample image is attached.

When grid.doSave() is called, it will call onLoad when it is done

The event onLoad is also called during a save.
that's normal as it is part of the request method.
this is a problem especially when the data has to be formatted in this event as when saving the data is not present.
And there is no information in the onLoad event to tell you what is happening.

the onLoad event shouldn't be triggered on a save. Or, the name is not the right one. onRequest would be probably better.

Worse, when the http servers returns an error, the eval of the data is done before checking for the error resulting of a js error.

Field in Grid : date, int and money

• for the money and int type, it would be useful to have an option to set the decimal separator
• for money, maybe the characters for currencies
• for the date, if you want to change the format, the documentation is saying to do something like:

 editable:{type:'date', options:{format:'dd/mm/yyyy'} }

but it's not working.
That's normal, look at the line 123 in w2fields.js.
So we have to do:

 editable:{type:'date', format:'dd/mm/yyyy' }

cheers

Field in Grid: what's the best way to add user's types ?

I have some fields that cannot be edited with the ones embedded.
Like a colour which is rendered with a div with background.
Or an id number where only the 5 last digits can be edited.
So I was wondering how can I add a field type to be able to handle this....
Any suggestions ?
Something like:

$.fn.w2field('addType', type_name, function(){} )

could be nice, don't you think ?

style in the grid code

Hi,

In the grid footer, for previous page and the next page, the style is define in the grid code.
I add a.w2btn and a.w2btn:hover in the css but i do'nt touch the code.
Is it right for you ?

Suggestions

When I place a form inside the

w2popup, it doesn't work, then I tried to read the source code, and found that w2ui actually copy the

into the container, that's why my form doesn't work, then I put the form inside the

it worked, but all the element inside that form become ambigous, because actually there is 2 form and elements with the same Id,

one is inside the w2popup container, and the other is the actual code (<div style="display:none")

I think you need documented this. :)

Grid: changed fields are still highlighted after a save

On the grid, the changed fields are highlighted, which is perfect.
But when a save has been done, those fields are no more changed...
So it would be nice to have them un-highlighted.

European Dates

Well Done!, I like it, but, please could you support European style dates (d/m/y), not just US (m/d/y) style ones, this will expand your user base to this side of the pond (selfishly to include me).

[REQ] Grid - Improved Row Editing

current inline editing of rows is quite limited. A more user friendly version could look like:
http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/row-editing.html

and for the classical inline editing the visual feedback for the edited cells is better like in this example:
http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/edit-grid.html

(edit some cells and see the red triangle in the corner)

regards

[REQ] Grid - Pivot Support

pivot grids are incredibly useful for many apps. see some nice examples here:
http://dev.sencha.com/deploy/ext-3.3.1/examples/#sample-3

unfortunately sencha failed to include them in their new 4.x library, so many projects I consulted still keep using 3.x (but also for performance reasons)

regards

Grid documentation: no POST, only GET, PUT and DELETE

The documentation is saying that the grid is loading the data with a POST.

In w2grid.js, the method request use only GET, PUT and DELETE.

function request(cmd, [add_params], [url])

By default, the cmd parameter is set to "get-records" which is, behind the curtain, a GET.
When creating a grid, if you set the url parameter, a GET will be done. not a POST.

cmd:

• get_records - HTTP verb: GET
• save_records - HTTP verb: PUT
• delete_records - HTTP verb: DELETE

w2form and layout

If w2form is created with remove .html file ( form.form_url ), then when w2layout.content(main, w2form) will not render form correctly. The problem is that it wants to render before form is loaded.

[REQ] Grid - Grouping with Summary

many business use cases require in grids grouping of the data, but also summaries using various functions. see in action:

http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/group-summary-grid.html

of course, sometimes the summary calculations needs to be done on the server to have the correct value, since not always the entire information is available in the client to do the calculations. see in action:

http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/remote-group-summary-grid.html

regards

more than 1000 row problem

Hello,

I have test the demo on the webpage and it seem that there a bug when adding more than 1000 row... the pagination does't work right if there 1000 row

here the link http://w2ui.com/web/demos/#!grid/grid-9

add more than one row until 1000 and try to change page with the pagination you will see that there a visual glitch

roadmap

Good job, I love your grid.
Is there a roadmap of your works?
Did you consider a menu plugin ?? (I like the simple kendoui menu...)

Provide a way to specify refresh message in w2grid

There is a way to specify messages to be displayed when there is no data or on delete. Similarly provide option to specify message for refresh.

Form validate

Hello,

if form has error, all list field are reset to 1st value in current GIT version.

Thx for your fix.

How do I build w2ui

How can I build w2ui?

I suspect build.xml is involved in some way.

What is the magic command that builds the libraries? I googled build.xml
and it said something about ant (I've no ideas that ant is) but it was installed on my computer. I gave the command

ant build.xml

but this failed

If columnGroups are defined then hide show columns is buggy

You can hide and show columns either in the drop down or from JavaScript

skin

Hi,

Have you others skins ?
Do you use Less ?

Thanks

blr

layout drag click bug

In the Resizable Panels Demo, after I dragged to resize a panel , I click on the border I just dragged , it performed a resize action again .

opacity property in the tabs code

Hi,

I work on dark theme.
I can'nt handle the disabled state of tab because the code change those properties.

Event for page change

Sometimes it would be helpful to have a new event for grids. This event should be called if the visible page of the grid is changed. For example: If the "master -> details" demo has multi-page master grid then the selected old details are still visible if the page is changed. With the suggested event it would be easily possible to clear the details grid. Vitali, what do you think?

...Rolf

grid inside a popup

I want to use a grid inside a popup. The problem: Width and height of the grid are wrong and the selection isn't visible. Is such a combination not supported? Is my code wrong? Thanks in advance.
...Rolf

The code:

<html>
<head>
  <link rel="stylesheet" type="text/css" media="screen"
    href="http://w2ui.com/web/css/w2ui-1.1.min.css" />
  <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="http://w2ui.com/web/js/w2ui-1.1.min.js">
  </script>
</head>

<body>

<input id="btn" type="button" value="Popup" />

<div id="popup" style="display: none; width: 40%; height: 40%; overflow: hidden;">
  <div rel="title">
    TITLE
  </div>
  <div rel="body">
    <div id="grid" style="width: 100%; height: 100%;"></div>
  </div>
</div>

<script type='text/javascript'>
  $('#grid').w2grid({
    name: 'foo',
    columns: [ { field: 'recid', caption: 'ID', size: '100%' } ],
    records: [ { recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' } ]
  });

  $(document).on('click', '#btn', function(e){
    $('#popup').w2popup('open');
  });
</script>

</body>
</html>

When height height of container is 100% layout is not visible

I took the code from demos and changed the height of container to '100%'. The layout is not visible in this case. See http://jsfiddle.net/brsca/2/. It works fine if the height is fixed.

Twitter Bootstrap styling for the grid component

Hi,

Thank you for contributing your work to the community.
I found your grid component a lot easier to use and more consistent than Datatables.
I have only one question - is it possible to use the style of the Twitter Bootstrap tables with it?

Thank you,
Todor.

Grid: caption = "" -> bad height for column header

when creating the column header in the function getColumnsHTML(), line 2146 :

html += '<td id="grid_'+ this.name +'_cell_header_'+ i +'" class="w2ui-head" '+
                (col.sortable ? 'onclick="w2ui[\''+ this.name +'\'].doSort(\''+ col.field +'\', null, event);"' : '') +
        '       style="height: auto !important; '+ (i == this.columns.length -1 ? 'border-right: 1px solid transparent;' : '') +'">'+
        '<div><div class="'+ sortStyle +'" style="height: auto !important; cursor: default; width: 100%; overflow: hidden;">'+  
            col.caption +
        '</div></div>'+ resizer +'</td>';

change

            col.caption +

with

            (col.caption == '' ? ' ' : col.caption) +