CODEWITHSUNDEEP
javascriptjqueryjqgrid
user763460
user763460

Reputation: 221

Add Multiple Icons to Titlebar in JQGrid

I am trying to add multiple icons to the tilebar in JQGrid. I added 1 using some kind of hacked up JQuery but I need them side by side next to the collapse button. My solution seems very unelegant.

This is the code I have that added 1 icon (I need 3 icons possibly 4)

$("#grid").setCaption('Title Goes Here' + '<span style="margin-left:200px;"></span>' + '<input type="image" id="icon_test" src="img/pencil_icon.png" onclick="icon_test_click();" title="#" />');

Upvotes: 1

Views: 3251

Answers (2)

Randy
Randy

Reputation: 1975

I had a similar requirement; however, I have multiple grids on the same screen. Using Mark's solution, along with his CSS, and changing the selector to use 'gview_id' (where id is the gridId), I was able to zero in on the specific grid:

$('#gview_id span.ui-jqgrid-title').after('<button id=jqGridTitleButtonId class="ui-button ui-icon ui-icon-newwin"></button>');        
$('#jqGridTitleButtonId').click(function() {
        ...code here...
});

Upvotes: 0

Mark
Mark

Reputation: 3123

Here is an example where I append buttons to my jqGrid titlebar:

    $('.ui-jqgrid-title').after('<div id="jqGridButtonDiv"><button id="Button1Id" type="button" class="titlebutton ui-button ui-widget ui-state-default ui-corner-all '+
                                'ui-button-text-only" role="button">Button Text</button></div>')
                        .after('<div id="YourCollectionFoilToggleDiv"><button id="Button2Id" type="button" class="titlebutton ui-button '+
                        'ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">Button Text</button>  </div>');

Then some CSS to style them floating to the right with some padding.

#jqGridButtonDiv{float:right; padding-right:50px; position:relative; top:-1px;}

You should be able to easily adapt this to change the buttons to icons, etc.

Upvotes: 2

Related Questions