jQuery Grid Plugin - jqGrid - Topic: Modifying the Title Bar

nickelj on Modifying the Title Bar

Tue, 26 Oct 2010 05:50:24 +0300

Thanks so much! Exactly what I needed too!

I made a extra icon beside some fields in a GridEdit that creates a "browse" popup that uses another jqGrid to display a list of possible selections (too many to use a standard select in the GridEdit – and besides, the select isn't searchable). Then the user can click on one and it puts that data back into the GridEdit form.

I just needed a close button so the user could close the browse window without making a selection.

Here is my adjusted code:

   temp = $("<a href='#' role='link' style='right: 16px;' onclick='window.parent.$.modal.close();'/>")
   .addClass('ui-jqgrid-titlebar-close HeaderButton')
   .hover(function() {$(this).addClass('ui-state-hover');},
   function() {$(this).removeClass('ui-state-hover');}
   ).append ("<span class='ui-icon ui-icon-circle-close'></span>");
   $('.ui-jqgrid-title').before (temp);

I used the SimpleModal plugin which is what the $.modal refers to. This popup was a IFRAME with the jqGrid displayed inside it, so it has to go to the parent document in order to close as that is where it was created.

So cool! Thanks again!

Jim

squid on Modifying the Title Bar

Fri, 21 May 2010 04:02:25 +0300

Well, I plowed my way through the code and decided that, for now, the best way I could insert a new button into the title bar is as follows:

temp = $("<a href='#' role='link' style='right: 16px;'/>")
.addClass('ui-jqgrid-titlebar-close HeaderButton')
.hover(
function() {$(this).addClass('ui-state-hover');},
function() {$(this).removeClass('ui-state-hover');}
).append ("<span class='ui-icon ui-icon-circle-close'></span>");
$('.ui-jqgrid-title').before (temp);

I haven't started adding a function to this new button, but it's going to be a close button because I made the jqGrid movable like a dialog.

squid on Modifying the Title Bar

Fri, 21 May 2010 00:12:32 +0300

Is there any way to add an icon to the title bar of the grid (right after the minimize icon). I was looking at the code and found the place where it is created. Seems very elaborate so I was just wondering if anyone else had already attempted this.