Question

I am using the jQuery flexigrid plugin (very nice). I’ve gotten most things working properly, but for some reason the icons on the buttons don’t show up. The flexigrid download doesn’t appear to have images for add, edit, and delete. I created my own but they don’t show either (tried different types and names).

Can anyone tell me how to get the icons to show for the upper button bar?

Here is part of my jQuery:

    $(".flex1").flexigrid({
    url: '/purchase-order-web/GetVendorsGridServlet',
    dataType: 'json',
    ...
    buttons : [
        {name: 'Add',    bclass: 'add_small',    onpress : takeAction},
        {name: 'Edit',   bclass: 'edit',   onpress : takeAction},
        {name: 'Delete', bclass: 'delete', onpress : takeAction},
        {separator: true}
        ],
     ...

I see some graphics file references in the flexigrid.css, but nothing that appears to be for the buttons – e.g.:

.flexigrid .pNext {
background: url(images/next.gif) no-repeat center;
}

So, can anyone enlighten me on how to get the button icons to show? Thanks!

Answer 1

Figured it out – add css classes like this to flexigrid.css for each button in your page’s flexigrid “buttons” section:

    .flexigrid .edit {
    background: url(images/pencil.png) no-repeat left;
}