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

Oleg · Answer 1 · 2013-10-11T00:19:54.693

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

enter image description here

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

enter image description here

I used the following CSS

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

}

edited Oct 11 '13 at 00:19

answered Oct 10 '13 at 23:48

Oleg

220,925
34
403
798

Thanks for the response Oleg! Yes the above code works only with the existing list of Icons that are available in jquery-UI.css. But in my case I dont have the "ui-icon-customtrash" in the list of Icons provided by jquery-UI.css. It is my own custom icon. Is there any other workaround for this to display my own icon?? – Naveen Reddy Oct 11 '13 at 00:00
@minnu4515: Could you include the icon in the text of you question? – Oleg Oct 11 '13 at 00:03
I just added the icon that I am trying to replace the delete icon with – Naveen Reddy Oct 11 '13 at 00:09
@minnu4515: I updated the answer by including the demo with the icon which you posted. – Oleg Oct 11 '13 at 00:20
Can we add that Icon in each row of the "actions" column?? – Naveen Reddy Oct 11 '13 at 00:27
Thanks Oleg, that helped alot! – Naveen Reddy Oct 11 '13 at 00:33
2

@minnu4515: You are welcome! NO. The current implementation of `formatter: "actions"` use `ui-icon-trash` directly (see [the code](https://github.com/tonytomov/jqGrid/blob/v4.5.4/js/jquery.fmatter.js#L256-L367)). So you will have to replace in all `div.ui-inline-del>span.ui-icon-trash` elements the class `ui-icon-trash` to `ui-icon-customtrash` inside of `loadComplete` for example. – Oleg Oct 11 '13 at 00:35
Thanks @Oleg this answer helped me... I need to caption near i-con. Is there any caption attribute in jqgrid pager? – CJ Ramki Jul 19 '14 at 12:02
@CJRamki: You are welcome! One can use `deltext` option of [navGrid](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#parameters) to display the text near the icon. The default CSS styles don't allow to display the text under the icon, so one can place the text on grid with large width only. Alternatively one can set custom styles like [here](http://stackoverflow.com/a/8854864/315935) for example. – Oleg Jul 19 '14 at 15:44
@Oleg thanks for your response, I got trouble when editing the form. I am using editurl as same page url. I checked in browser developer tool. I'm getting the form data. But I can't get those form data in my page. do you have idea? last 5 hours I'm struggling with this issue. – CJ Ramki Jul 19 '14 at 16:09
@CJRamki: I'm not sure that I understand your problem correctly. During filling the grid will be send other parameters as during form editing. So you can easy distinguish both requests on the server side. Additionally you can send you *custom* parameter in `postData` and with respect of `editData` option of form editing. For example `postData: {mode: "fillData"}` and `editData: {mode: "addRow"}`, `editData: {mode: "editRow"}` or `delData: {mode: "delRow"}`. It makes server code easy to distinguish different requests. – Oleg Jul 19 '14 at 16:36
@Oleg I'm getting correct response data and I identified it using `$_POST['oper']` variable. I checked it in browser developer tools network tabs, preview. ``. But that echo is not printed on the page. only printing in the browser dev tools. – CJ Ramki Jul 19 '14 at 16:53
@CJRamki: I can't follow you probably because I'm not PHP developer. You process **Ajax** request which should return JSON (or XML data). What do `echo $_POST["oper"];` here? Is it place the value of `oper` variable in the server response and makes JSON response corrupted? What is your goal? `echo $_POST["oper"];` could be only some debug output. Do you can just debug your server code in a debugger to see all? – Oleg Jul 19 '14 at 16:58
@Oleg I just tried to check whether the data is coming or not using `echo`. I just want to update my data and return updated data to grid. I think I misunderstood the flow following by jqGrid. will you show any example page for edit? – CJ Ramki Jul 20 '14 at 01:43
@CJRamki: It's better that you opens new question where you in details describe what you do and what is your question. The data which will be send to the server during form editing are described in [the documantation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#what_is_posted_to_the_server). Per default jqGrid **reload** the grid directly after receiving any successful HTTP response from `editurl`. If you updated the data on the server and you use `datatype: "json"` without `loadonce: true` then the new data will be loaded in the grid automatically. – Oleg Jul 20 '14 at 10:17

score 0 · Accepted Answer · answered Oct 12 '13 at 01:23

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;
}

enter image description here

Replace Delete Icon of jqGrid with custom Icon

2 Answers2

Linked