replace icon with other custome icon in jqgrid

Question

15.3 .I want change icon i want replace close icon with ban icon iam use this code. but don't work.

  $('span fa fa-fw fa-ban').removeClass('span fa fa-fw fa-ban').addClass('span fa fa-fw fa-close');

this demo https://jsfiddle.net/dnfk8hmr/207/

Answer 1

You don't need to replace any icon after the grid is created. Instead of that you can customize your own icon set based on existing one (based on iconSet: "fontAwesome", for example) and to use it. The wiki article provides an example of such customizing. Modification of the example for your case will be the following

$.jgrid.icons.customFontAwesome = $.extend(true, {},
     $.jgrid.icons.fontAwesome,
     {
         nav: { cancel: "fa-close" },
         actions: { cancel: "fa-close" },
         form: { cancel: "fa-close" }
     }
 );

The example above defines new icon set under the name customFontAwesome, which have the same content as fontAwesome (see the line of source code) with exception of 3 icons, where fa-ban were used by default.

After that you need just replace the option iconSet: "fontAwesome" to iconSet: "customFontAwesome" and jqGrid will use the icons. See the modified demo https://jsfiddle.net/dnfk8hmr/237/

I changed additionally in the demo the code fragment where you overwrite $.jgrid.showModal method to the following:

 $.extend($.jgrid, {
     showModal: function (h) {
         // properties of h
         //   w: (jQuery object) The modal element
         h.w.css({
             left: "3%", // new left position of ERROR dialog
             top: "3%"   // new top position of ERROR dialog
         });
         h.w.show();
     }
 });

It seems to me that it's what you want to have before.