0

I want to apply background image for jqgrid, I was referring to enter link description here

where it was mentioned few methods, but I am not sure of its usage, I am new to jquery and jqgrid can some can share sample code? thanks.

Community
  • 1
  • 1
user669789
  • 554
  • 4
  • 10
  • 23
  • Could you better describe for which elements of jqGrid you what to set the background image? Do you want to set it on the grid title (the capture layer), on the column headers or replace only the sorting images in the column header (see the pictures [here](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_it_works))? – Oleg Mar 25 '11 at 12:57
  • column header layer, i need to display sorting pictures (i need sorting functionality) with my own custom background picture. – user669789 Mar 25 '11 at 14:41

1 Answers1

0

You can customize the jQuery UI Theme or just redefine ui-icon-asc and ui-icon-desc classes with another background. Look at the answer to very close question.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I couldnt find 'ui-icon-asc' and 'ui-icon-desc' class. i understand these two classes are used for sort icon. whatever current icon image being displayed it is fine, i am looking for background image for header. – user669789 Mar 25 '11 at 16:23
  • @user669789: Sorry you should of course redifine "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" or "ui-icon" like it is detailed defined in my referenced answer. The "ui-icon" class define the background image and "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" classes define offsets in the image. Alternative you can remove "ui-icon" class and replce in the grid all "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" to another classes with your custom background image. – Oleg Mar 25 '11 at 17:30
  • I need to update only the background. What i did was updated '.ui-jqgrid .ui-jqgrid-htable th' class with 'background:url('table_header_bg_strip.jpg') repeat-x;' now I am getting the image what I want and sort buttons as usual. Thanks for your input. – user669789 Mar 29 '11 at 07:01
  • @user669789: You wrote that you "need to update only the background", but later you use `"ui-jqgrid-htable"` class with `'.ui-jqgrid .ui-jqgrid-htable th'` CSS selector. It set the background on the **whole** column headers and **not for the sort icons**. With your current code you will set one background for the column header and for the sort icons will be used backgrounds defined in "ui-icon" , "ui-icon-triangle-1-n" and "ui-icon-triangle-1-s" classes. How we can see the text which we wrote in the comments is longer as the text of your question. Probably you should include more information? – Oleg Mar 29 '11 at 10:07