jQuery Grid Plugin - jqGridForum

Topic RSS

Modifying the Title Bar

21/05/2010
00:12

squid

Member

Members

Forum Posts: 36

Member Since:
19/05/2010

Offline

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.

21/05/2010
04:02

squid

Member

Members

Forum Posts: 36

Member Since:
19/05/2010

Offline

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.

26/10/2010
05:50

nickelj

Member

Members

Forum Posts: 28

Member Since:
15/10/2010

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
54 Guest(s)

Currently Browsing this Page:
1 Guest(s)