How to add custom icon to JqGrid top-level toolbar button?

Question

I have used the info here to add a custom button in JqGrid top level toolbar using code below in IE9.

Caret icon appears instead of image. IE9 network tab shows that request for Images/calendar.png is not issued.

   $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        caption: '',
        id: "grid_mybutton",

        buttonicon: 'my-image',
        onClickButton: function () { 
            window.location =  'Report';
          }
    });

css file:

.ui-button .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
} 

.ui-button.ui-state-hover .ui-icon.my-image { 
    background-image: url("Images/calendar.png"); 
    width: 16; 
    height: 16;  
}

How to add custom icon ?

Are you talking about replacing the icon for the x in the top-right corner of the dialog, or do you want to add a new clickable icon to the toolbar with it's own action? — Nope, Aug 13 '12 at 11:28
I want add new button with icon `Images/calendar.png` and custom action `window.location = 'Report'` — Andrus, Aug 13 '12 at 11:38
Your css of: ".ui-button.ui-state-hover .ui-icon.my-image" should be ".ui-button, .ui-state-hover, .ui-icon, .my-image" Update: I added more of an explanation in an answer below — jjay225, Aug 13 '12 at 12:00

Nope · Accepted Answer · 2012-08-13T12:02:13.453

The jQuery styles will always over-write your styles as they are applied last.

In addition to what jjay225 pointed out ones you fixed your references, add the !important tag to your image style to ensure it is always applied.

Try it out in the below demo, remove the !important, and you get the ^, add it again and you get your image.

See DEMO

Not having your full code I simply added an icon to the toolbar with jQuery append() and added the required CSS.

Using any debugging tool though, i.e: FireBug in FF and the build-in ones in Chrome or IE, you can check the exact class/id values of your new icon and fix any css reference issues you may have.

That "!important" is very important Andrus. Good addition Francois — jjay225, Aug 13 '12 at 12:04

score 1 · Answer 2 · answered Aug 13 '12 at 11:59

Your css of

.ui-button.ui-state-hover .ui-icon.my-image

should be

 .ui-button, .ui-state-hover, .ui-icon, .my-image

Why not try just have the class

.my-image
{
    background-image: url("Images/calendar.png"); 
     width: 16; 
     height: 16;  
  }

How to add custom icon to JqGrid top-level toolbar button?

2 Answers2