Best way to style w2ui grid

Question

I have been using w2ui grid for displaying information in a table. It has worked great, but I did not particularly like how the table looks. So I was looking to style it. Is there a way to style the table without directly editing the css for w2ui?

Support for adding class with w2ui is still in "I will think about it some more.". It would by much cleaner. https://github.com/vitmalina/w2ui/issues/1063 — Lukas, Jun 09 '16 at 14:14

score 2 · Answer 1 · answered Aug 12 '15 at 13:19

As mentionned by TheUknown, I believe that it is more convenient to simply write As mentionned by TheUknown, I believe that it is more convenient to simply write your css rules.

But you can also use the 'style' common property on many elements such as your grid, columns or records.

See this example : jsfiddle link

$('#myGrid').w2grid({ 
    name   : 'myGrid', 
    columns: [                
        { field: 'fname', caption: 'First Name', size: '30%', style : 'border: 1px solid blue' },
        { field: 'lname', caption: 'Last Name', size: '30%', style : 'font-weight: bold' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012', style : 'border: 1px solid green' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ],
    style : 'border: 1px solid red'
});

score 2 · Answer 2 · answered Jun 09 '16 at 14:03

You can add class onRender event or onRefresh event. This apply for w2ui widgets: layout, grid, toolbar, sidebar, tabs, form.

$('#myGrid').w2grid({ 
  name   : 'myGrid', 
  columns: [                
    { ... },
  ],
  records: [
    { ... }
  ],
  onRender: function(event) {
    event.onComplete = function() {
      $('[name="myGrid"]').addClass('grid-custom');
    }
  },
});

score 2 · Answer 3 · answered Jun 18 '19 at 21:39

This is an old question, but still somewhat relevant since this library is still being used by a lot of people.

My solution to this was to create a separate stylesheet called "w2ui-overrides.css" and then override the classes that are defined in the supplied w2ui stylesheet.

For instance, the default border style for the sidebar context menu is

.w2ui-overlay > div {
  border-radius: 4px;
  position: relative;
  border: 3px solid #777777;
}

But I didn't care for that, so I added this to my overrides css:

.w2ui-overlay > div {
    border-radius: 2px;
    border: 1px solid #777;
}

And so on, for all of the styles I wanted to change. I use the Chrome developer tools to find the class names and selectors that I need to override.

Best way to style w2ui grid

3 Answers3