CODEWITHSUNDEEP
jqgrid
Michael Sobczak
Michael Sobczak

Reputation: 1085

jqgrid change icons used by the pager

I need to change the forward (>, >|) and back (<, |<) pager icons used by jqgrid. The icons I'd like to use are already contained within jquery ui file ui-icons_888888_256x240.png. How do I accomplish this?

Update:

Based on the response here [jqGrid Pager Area - Using Font Awesome Icons, I've added the following code to my page, but the icons aren't changing. I'm getting the pager, but I don't think I'm getting the icon span. What am I doing wrong?

<script type="text/javascript">
var $pager = $("#" + pagerName);

var icon = $pager.find(".ui-icon>span.ui-icon-seek-first");
    icon.removeClass("ui-icon-seek-first");
    icon.addClass("ui-icon-arrowthickstop-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-prev")
    .removeClass("ui-icon-seek-prev")
    .addClass("ui-icon-arrowthick-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-next")
    .removeClass("ui-icon-seek-next")
    .addClass("ui-icon-arrowthickstop-1-e");

$pager.find(".ui-icon>span.ui-icon-seek-end")
    .removeClass("ui-icon-seek-end")
    .addClass("ui-icon-arrowthick-1-e");

</script>

Upvotes: 1

Views: 3132

Answers (2)

Michael Sobczak
Michael Sobczak

Reputation: 1085

What I didn't realize is that any JavaScript code that overrides the buttons used by the jqgrid needs to be included in the JavaScript function that loads the jqgrid. Below is the code I used:

  // Override default pager icons
  $grid = $("#" + listName);
  $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");

  var icon = $pager.find(".ui-pg-button>span.ui-icon-seek-first");
      icon.removeClass("ui-icon ui-icon-seek-first");
      icon.addClass("ui-icon ui-icon-arrowthickstop-1-w");

  $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
      .removeClass("ui-icon ui-icon-seek-prev")
      //.addClass("ui-icon ui-icon-arrowthick-1-w")
      .addClass("ui-icon ui-icon-triangle-1-w")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-next")
      .removeClass("ui-icon ui-icon-seek-next")
      //.addClass("ui-icon ui-icon-arrowthick-1-e")
        .addClass("ui-icon  ui-icon-triangle-1-e")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-end")
      .removeClass("ui-icon ui-icon-seek-end")
      .addClass("ui-icon ui-icon-arrowthickstop-1-e");

Upvotes: 1

FastTrack
FastTrack

Reputation: 8980

EDIT ok, in that case:

// First page: |<
$("#first_your-pagerID span").removeClass("ui-icon-seek-first");
$("#first_your-pagerID span").addClass("ui-icon-newicon");

// Prev page: <
$("#prev_your-pagerID span").removeClass("ui-icon-seek-prev");
$("#prev_your-pagerID span").addClass("ui-icon-newicon");

// Last page: >|
$("#last_your-pagerID span").removeClass("ui-icon-seek-end");
$("#last_your-pagerID span").addClass("ui-icon-newicon");

// Next page: >
$("#next_your-pagerID span").removeClass("ui-icon-seek-next");
$("#next_your-pagerID span").addClass("ui-icon-newicon");

Change your-pagerID to the ID of your pager.

Change ui-icon-newicon to the class of your new icon from the UI icons file (ui-icons_888888_256x240.png)

Upvotes: 0

Related Questions