Replace Delete Icon of jqGrid with custom Icon

Question

I wanted to change just the delete Icon of jqGrid in actions column with my own Icon(newTrash-icon.png). I've seen that jqGrid loads Icon from one png icons file. How do I replace the default trashcan Icon with some other trashcan Icon.

I tried below code but it doesn't work.

In my gridComplete

$('.ui-icon-trash').removeClass('ui-icon-trash').addClass('ui-icon-customtrash');

In my CSS

.ui-icon-customtrash {
    background: url("~/Images/newTrash-icon.png");
    background-position: -64px -16px;

}

I want the below icon to display in place of default delete icon

Answer 1

What you can do is just the usage of delicon option of navGrid:

$("#list").jqGrid("navGrid", "#pager", {delicon: "ui-icon-customtrash"});

The demo uses delicon: "ui-icon-scissors" and it displays

UPDATED: The demo demonstrate the same using the icon which you posted. It displays

I used the following CSS

.ui-state-default .ui-icon-customtrash {
    background: url("http://i.stack.imgur.com/Gii7J.png");
    background-position: 0 0;

}

Answer 2

I found my answer. I have replaced inline Action Icons(delete and Notes icons) using IcoMoon App (http://icomoon.io/app/). I selected different icons I needed from IcoMoon website and created a stylesheet that I downloaded and added to my application. And using the class name("idoc-icon-trash") provided by IcoMoon I added below code in my afterInsertRow event and boooom.. it worked as shown in the figure.

$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');

.idoc-icon-trash {
    font-size: 19px;
    color: #022462;
}