CODEWITHSUNDEEP
cssw2ui
abden003
abden003

Reputation: 1335

Best way to style w2ui grid

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?

Upvotes: 1

Views: 6348

Answers (3)

camainc
camainc

Reputation: 3810

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.

Upvotes: 2

Lukas
Lukas

Reputation: 111

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');
    }
  },
});

Upvotes: 2

Delforge
Delforge

Reputation: 792

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: '[email protected]', sdate: '4/3/2012', style : 'border: 1px solid green' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: '[email protected]', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: '[email protected]', sdate: '4/3/2012' }
    ],
    style : 'border: 1px solid red'
});

Upvotes: 2

Related Questions