jqGrid 4.1.0 issue with icon hover when inline edit

Question

In previous version when inline editing all looking good: enter image description here

But in new version it is looking like that (i put read border over): enter image description here

How to fix that?

I am using jQuery 1.6.1, jQueryUI 1.8.13

I also have using the latest jqGrid css file

hi @Joper i am trying to add radiobutton option like in Freight (0, 25, 50) in my jqGrid. will you share that code or give the solution for this SOQ post http://stackoverflow.com/q/21872654/2806972 — Kumar Shanmugam, Feb 19 '14 at 06:59

Oleg · Accepted Answer · 2011-06-15T09:23:16.193

2

The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:

onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');

see the source code of jquery.fmatter.js.

If I correct understand the problem the adding of 'ui-state-hover' class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.

So I suggest just remove the hover effects inside of loadComplete:

loadComplete: function() {
    $("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
        this.onmouseover = null;
        this.onmouseout = null;
    });
}

See the demo.

UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following

var iconHoverFixed = function(e) {
        jQuery(this).addClass('ui-state-hover');
        jQuery('span',this).removeClass('ui-state-hover');
    },
    iconNotHoverFixed = function(e) {
        jQuery(this).removeClass('ui-state-hover');
    };

and then we can fix the hovering problem so:

loadComplete: function() {
    $("div.ui-inline-save, div.ui-inline-cancel").each(function() {
        this.onmouseover = iconHoverFixed;
        this.onmouseout = iconNotHoverFixed;
    });
}

See the new demo here or here.

edited Jun 15 '11 at 09:23

answered Jun 14 '11 at 15:25

Oleg

220,925
34
403
798

@Oleg Looks that is i am looking for, and just noticed that on that sample on duobleclick icons from the left does not getting changed – Joper Jun 15 '11 at 08:48
@Joper: Sorry, but I don't understand the duobleclick on which icon you mean and what problem still exist on [the last demo](http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41Fixed.htm)? By the way I posted [the bug report](http://www.trirand.com/blog/?page_id=393/bugs/wrong-hovering-effect-in-actions-formatter-of-jqgrid-4-1-0/#p23610) in the trirand forum. – Oleg Jun 15 '11 at 08:57
@Oleg and one more thing may be you have any ideas how to apply that in case of using MVC jQgrid – Joper Jun 15 '11 at 09:08
@Oleg There is a small difference (may be it is the idea) in behaviors between if you click on icon edit and if you doubleclick on the row. The icons form the left does not reflect row doubleclick – Joper Jun 15 '11 at 09:11
@Joper: The "actions" formatter is just a way to start inline editing. So if you implement editing on the server side in MVC for example you can use form editing, inline editing inclusive "actions" formatter. – Oleg Jun 15 '11 at 09:13
@Joper: OK you means, that I implemented in the demo the standard inline editing on doubleclick. If you want you can easy to change the code of my demo to [the following](http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41Fixed1.htm). You are right, the modification have sense. – Oleg Jun 15 '11 at 09:22
@Oleg In case of using jQGrid MVC i am just doing this for example @Html.Trirand().JQGrid(Model.OrdersGrid, "DeleteDialogGrid") and it will generate complete jQGrid js for me. Just wondering how to apply your fixes above to such case? – Joper Jun 15 '11 at 09:27
@Joper: I use free open source code JavaScript jqGrid. On the server side one can use any from the existing technology. I personally use also ASP.NET MVC, but I don't know the commertial version. I bought it only to support the devlopers, but not use it myself. You can aks your question better [here](http://www.trirand.net/forum/default.aspx?g=topics&f=4). – Oleg Jun 15 '11 at 09:36
@Joper: I seen that you don't use very important right which you has: voting. I suppose that you don't know simple rule which you can find [here](http://stackoverflow.com/faq#howtoask): **"As you see new answers to your question, vote up the helpful ones by clicking the upward pointing arrow to the left of the answer."** The accepted answer with 0 votes will be interpret almost as closed, because it is **unhelpful**. – Oleg Jun 15 '11 at 09:52
@Oleg I am just not registered user yet :) As i understand bug fixes first appearing here https://github.com/tonytomov/jqGrid and and some later they appearing here with a new version http://www.trirand.com/blog/?page_id=6 am i right? – Joper Jun 15 '11 at 10:06
1

@Joper: Exactly. The most current version is on the github. [here](http://www.trirand.com/blog/?page_id=393/bugs/custom_element-and-custom_value-bug-with-boolean-values/#p23613) I read that in some days the 4.1.1 version will be published. It's the free open source version of jqGrid. There are additionally commercial version which are based on the free version. So either you will be able to replace some JavaScript files in the commercial version to apply the fixes or you will have to wait a little till the new commercial version will be published. – Oleg Jun 15 '11 at 10:19
@Oleg As i understand commercial it is wrapper over free jQGrid js. because it is required script reference to that. So replacing the reference should cover that issues. – Joper Jun 15 '11 at 10:27
@Oleg And one more thing. I just noticed the other day that jQGrid on github https://github.com/tonytomov/jqGrid/blob/master/jquery.jqGrid.js has different content from the jQGrid on trirand.com On github it is just contain includes but on trirand.com it is completely different, any thoughts why it is like that? – Joper Jun 15 '11 at 10:38
@Joper: It can be, but I don't recommend you to use jquery.jqGrid.js because of many different compatibility problems in different browsers, in FF 4 for example. Just use jquery.jqGrid.src.js or the full list of modules in the same order which are included in jquery.jqGrid.min.js (see "Modules" in the comment at the beginning of the file). – Oleg Jun 15 '11 at 10:43
@Oleg does that mean that jquery.jqGrid.src.js it is just all modules in one file? – Joper Jun 15 '11 at 10:45
1

@Joper: Yes of course, but the modules in correct order. There are not the only correct order but one from there are used in jquery.jqGrid.src.js and the same in the jquery.jqGrid.min.js. If you are **sure** that you don't use some modules, for example, Tree Grid, Subgrid and so on you can unselect the unneeded modules on [the download page](http://www.trirand.com/blog/?page_id=6) and get more shorter files. – Oleg Jun 15 '11 at 10:56
@Joper: Why you ignore my comment about the voting of answers? If you don't want to use both "accepting" and "voting" for me would be better to have voted answer (10 reputation points) with less reputation as accepted (15 points). The searching engine use voting as the main criteria. I answer many time on the same question because people don't find the existing old answer with respect of searching. All what I wrote you about jquery.jqGrid.src.js, jquery.jqGrid.js and the modules order for example I answered many times, but you probably not found the old posts. – Oleg Jun 15 '11 at 11:03
@Joper: OK! I recommend you to use active the voting and not only the answers of your own questions. It helps other people who will read the topic. You can consider to vote answers of your old questions. You should know the 30 votes per day restriction (see [here](http://meta.stackexchange.com/questions/5212/are-there-any-voting-limits/5213#5213) for details) – Oleg Jun 15 '11 at 11:34
@Oleg I am looking in to your demo http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41Fixed.htm and have two more questions. 1) After i am clinking delete and the confirm, div "jqmOverlay" does not getting removed, only after mouse click on it it is getting removed, how may i remove this div after delete confirm action? 2)And one more thing with delete, if i am using grouping after delete action i need to update group row as well because for example if i am deleting all items in the group the group does not getting removed, how i may do that?. – Joper Jun 26 '11 at 12:00
@Joper: You are right about the problems with the overlay. I just used in the demo an old code as I only started to create a solution http://www.ok-soft-gmbh.com/jqGrid/LocalFormEditing.htm which shows how to implement local form editing which is not possible per default by jqGrid. So I updated the definition of `myDelOptions` in both http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41Fixed.htm and http://www.ok-soft-gmbh.com/jqGrid/ActionButtons41Fixed1.htm demos. Now the overlay problem not more exist. By the way in jqGrid 4.1.1 the main Action Buttom problem from your question must be fixed. – Oleg Jun 26 '11 at 12:47
@Joper: Another problem about which you ask: "using grouping after delete action" seems absolutely new problem. Do you have the demo which can be used to reproduce the problem? It seems to me that you should better describe all exactly: the demo code; steps to reproduce the problem; which results are expected and which you have; jqGrid, jQuery, jQuery UI versions which you use; which browsers you used in your tests. – Oleg Jun 26 '11 at 12:51
@Oleg I've uploaded my sample demo here http://www.2shared.com/file/TEhOErwx/TestSamle.html – Joper Jun 26 '11 at 13:13
@Oleg I am grouping by Race and than after i am delinting everything from the group the group does not getting removed, also i was trying to put second grid but it is not displaying for some reason. – Joper Jun 26 '11 at 13:46
1

@Joper: In your code were too many different errors. The comment is too small to describe there. It was double including of the same JavaScript and CSS files, syntax errors like ',]' at the end of `colModel`, double ids in two grids, HTML syntax errors, some CSS from ASP.NET MVC which must be fixed in case of usage with jqGrid... I can continue. I modified your example. You can find the modified version here: http://www.ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm – Oleg Jun 26 '11 at 15:27
Hi just changed local data to url where i am getting json, but for some reason data in the second column getting ignored. I l looked in fiddler Jason response looks like that:{"total":1,"page":1,"records":2,"rows":[{"Id":1,"cell":["1","22 Mar 2010 10:40 Name1","Name1","No"]},{"Id":2,"cell":["2","22 Mar 2010 10:40 Lismore","Name2","Yes"]}]} in jQGrid data each data column moved (data started form the name column) Name instead of Race, Online instead of Name – Joper Jul 07 '11 at 18:11
@Joper: The value like `"22 Mar 2010 10:40 Name1"` for the date looks like a clear error in your server code. You should verify the server code which produce the JSON data. Moreover I recommend you to use ISO date format ("o" or "O" formatter option of `DateTime` in .NET) – Oleg Jul 07 '11 at 18:24
I was thinking that it is could be date, than for test i removed date from the jason string to make it look like that [{"Id":1,"cell":["1","Name1","Name1","No"]},{"Id":2,"cell":["2","Lismore","Name2","Yes"]}]} and still it was the same... – Joper Jul 08 '11 at 02:15
After i done one more test, i add one more element in to json array [{"Id":1,"cell":["", "1","Name1","Name1","No"]},{"Id":2,"cell":["", "2","Lismore","Name2","Yes"]}]} and that way it is displaying correct. There is "Action" column and looks like the first element i passed in jason was assigned to Action. What do you think how to make it work correct without passing first blank element? – Joper Jul 08 '11 at 02:39
@Joper: You can try to place `'Action'` column as the last jqGrid column and change the display order with respect of `remapColumns` method. – Oleg Jul 08 '11 at 05:53
OK I will play with it, and one more thing, may be you may suggest how to add an custom action to each row and how to remove for example delete action from each row? – Joper Jul 08 '11 at 08:18
@Joper: Do you knows [this](http://stackoverflow.com/questions/5196387/jqgrid-editactioniconscolumn-events/5204793#5204793) and [this](http://stackoverflow.com/questions/5303471/browser-memory-usage-comparison-inline-onclick-vs-using-jquery-bind/5305904#5305904) my old answers including the demos? – Oleg Jul 08 '11 at 08:24
i am using this sample http://www.ok-soft-gmbh.com/jqGrid/TestSamle/Admin.htm as a base which is a bit different and has single Action column with the actions, and i wondering how to add to this column Custom action which would post all cells of the row to the server. – Joper Jul 08 '11 at 09:29
@Joper: which action you mean? "Edit" or "Delete"? You can do this in different ways. If you formulate your question more exactly like a new question I could answer it or include more links to existing solutions. The place in the comments are too small and we are on the comment number 29... :-( – Oleg Jul 08 '11 at 09:37
I've posted the question here: stackoverflow.com/questions/6622779/custom-jqgrid-post-acton with the code i trying to achieve my goal – Joper Jul 08 '11 at 11:57

kleinohad · Answer 2 · 2011-06-14T13:16:58.957

1

Looks like you need to update the jquerygrid css and the images folder the image is build from an offset inside an image (Sprite) http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png and in you case it doesn't find the right place

edited Jun 14 '11 at 13:16

answered Jun 14 '11 at 13:03

kleinohad

5,800
2
26
34

I did update css file and image file i have exactly like this one. If I just switch to jQgrid 4.0 all working if i switch to 4.1 i have this issue. – Joper Jun 14 '11 at 13:27
maybe it's the jQuery-ui css files. it is obviously a problem with a wrong sprite x offset – Variant Jun 14 '11 at 13:38

jqGrid 4.1.0 issue with icon hover when inline edit

2 Answers2