Why is this jqgrid Subgrid navButtonAdd Custom Button bug for FireFox and IE happening?

Is there a bug with nav buttons (whether on the toppager or the regular pager) when custom buttons are added to a subgrid (using the jqgrid navButtonAdd) but only in FireFox and IE? It seems to work/look fine in Chrome - also the parent grid's custom buttons work fine in Firefox and IE, it is just a cosmetic issue/hover and size issue which appears only in grid as subgrids for these browsers alone.

It is a bug with the button sizes and hover placement.

Check out this picture to see what I mean: http://i.imgur.com/YLroY.png

My code (in the subGridRowExpanded property of the subgrid) is like this:

jQuery("#" + subgrid_table_id).jqGrid('navButtonAdd','#RedirectsTable_' + row_id + '_t_toppager_left',
{
    caption : "Add New Region Url... ", buttonicon : 'ui-icon-plus',
    id : "btnAddNewRegionUrl_" + subgrid_table_id,
    onClickButton : function()
    {
        addNewRegionUrlRow("#" + subgrid_table_id, row_id);
    }
}).jqGrid('navButtonAdd','#RedirectsTable_' + row_id + '_t_toppager_left',
        {
            caption : "Copy All ", buttonicon : 'ui-icon-copy',
            id : "btnCopyRegionUrls_" + subgrid_table_id,
            onClickButton : function()
            {
                copyRegionUrlRows(row_id);
            }
        }); // etc chaining them li开发者_运维百科ke this.  Also, I add buttons in this manner for the parent grid and to the bottom pager as well

Any help fixing this would be greatly appreciated.

Thanks! :)

I still think this is a bug and would appreciate anyone's help as to why this only happens in subgrids and only in FireFox and IE but not Chrome...?

However, I thought I would post a hack which is not the "right way" to fix this, but it does work cosmetically.

Inside the subGridRowExpanded property of the colModel of the parent grid, I've put the following code in the gridComplete event property so that it sets the width of those subgrid nav buttons once the grid is done and ready to use. This is an inelegant hack to say the least, but it works.

Obviously this is hard coding the widths which is nasty - and would not work if the button text was dynamic from a database or something, but for me this is ok.

So I checked what Chrome reported as the "correct" widths and then added this code (obviously substitute your navButtonAdd button ids in place of mine):

 gridComplete : function()
    {
    //hack for FF & IE widths dont work in subgrid nav buttons- bug in jqgrid?
    $("#btnAddNewRegionUrl_" + subgrid_table_id).children(".ui-pg-div").width("133px");
    $("#btnCopyRegionUrls_" + subgrid_table_id).children(".ui-pg-div").width("63px");
    $("#btnPasteRegionUrls_" + subgrid_table_id).children(".ui-pg-div").width("63px");
    }

hope this is useful - but please chime in if you have any comments or suggestions why this is so. @Oleg?

thanks :)