jqGrid doe not render correctly in chrome - javascript

Its basically same problem as here jqGrid does not render correctly in Chrome/Chrome Frame , bu the same solution does not work for me. I have Chrome 56.0.2924.87 and JqGrid version 4.7.1.
THe $.browser .... lines do not exsist in the jqGrid code anymore. How can I fix this problem now. (And no i can not update my jqGrid version).
This is what it looks like. I blanked out the text on the table. And in firefox this problem does not exsist.
Image with some data rows. As seen filter row is still broken.

Related

IE11 missing DOM elements

I've written a simple extension for OpenCart platform. The extension generates a table with product options that can be sorted and searched.
The options are inserted in the database and the table is generated at the backend - using PHP.
It looks something like this.
I've tested the extension with Chrome,FF, IE10 and Edge and it works fine.
Here is the problem: when using IE11 the rows of the table are empty. When I examined the DOM I found out that there is no content between the "TR" tags. The rows are generated, but the Table Data is gone.
Given that the content is generated at the backend why does it disappear in IE11?
Live url: http://www.stroyland.ru/index.php?route=product/product&path=57&product_id=198
DOM with Chrome
DOM with IE11
The problem is caused by the pager plugin of the tablesorter plugin.
There is already an open issue on github for this bug:
https://github.com/christianbach/tablesorter/issues/54

JQGrid - Drop down value not set correctly when edittype = 'select'

I'm using JQGrid 4.4.4. I have a column of edittype = 'select'. The value displayed in the row of the grid is correct. But when I edit the row, the drop-down/combo-box value is set to the wrong value. Instead of setting it to the value, it sets it to the label having same text value. The value-label pairs in the drop down is - {'1':'0','21':'1'}. The problem is only when the label is same as the value for another item in the options.
Here is the JS fiddle -http://jsfiddle.net/ksrini/ehj0nyLu/4/
And here is a screen shot that shows the problem.
The issue is reproducible in 4.6. The JQGrid forum seems to be closed and I can't raise a bug if this is indeed a bug.
Any suggestions on how I can fix it or work around this?
Thanks,
The demo which you use don't reproduce the problem because both jqGrid 4.6 and the old version 4.4.4 don't supports local data editing. It's important that you use
formatter:'select'
Only in the case jqGrid should save values of the drop-down/combo-box. In any way you can verify that free jqGrid 4.9.1 don't have the described problem (I used just URLs described in the wiki article): http://jsfiddle.net/OlegKi/ehj0nyLu/5/. I can imagine that some bugs exist in the old version 4.4.4, but it's clear that nobody will fix the bugs. So I would recommend you to update to free jqGrid. It's the fork of jqGrid which I continue to develop after Tony have changed the licence agreement for jqGrid in 4.7.1 version. His fork have the name Guriddo jqGrid JS. If you will find some bugs in free jqGrid then you can post the issue to GitHub or post the description of the problem on stackoverflow. The latest version can be easy fixed, but not the retro version 4.4.4.
UPDATED: The bug is fixed in the latest version of free jqGrid on GitHub: http://jsfiddle.net/OlegKi/ehj0nyLu/6/. The fixed code will be included in free jqGrid 4.9.2 which I will publish today.
Just for information I repeat what I wrote before in comment: the line of code jqGrid 4.4.4, which you use, like all later versions of jqGrid and free jqGrid (less then 4.9.2) tests for either the value or the text during selection of option of <select> during editing. It's correct to test for the value only and the select the option by text only if no option were found by value. The fix implements the changes.
From Oleg's comments in his answer, it seems to be a bug in the code attempting to keep it backward compatible with programs using an older version of JQGrid.
For now I've worked around this issue by getting the value from the selected row in the grid and setting the value of the select input field in the form in beforeShowForm function.
beforeShowForm: function(form) {
...
$("#<field-id-in-grid>", form).val(<value-from-selected-row>);
...
}
NOTE: I've accepted this (my own) answer for the work around. The fix is mentioned in one of Oleg's comments to his answer. If that can be made as an answer, I'd prefer to make that as the accepted answer.

Jqgrid Drag and Drop is not working in tablet

I want to reorder my rows in jqgrid. I achieved this functionality using this example
click here, I have checked that sample in tablet PC,it is not working in following browsers like IE,Safari,Chrome browsers,but works in FF.
Do we have any general fix for this?
I wrote the demo which you reference many year ago for the answer. One can't expect that old versions of jQuery, jQuery UI and jqGrid will work forever.
If one just replace jQuery, jQuery UI to the current one and to use jqGrid 4.6 then the demo will better work, but it will still not work in Chrome. It's well known problems with jQuery UI. The plugin jQuery UI Touch Punch is written exactly for the case.
You can verify that the demo which uses jqGrid 4.6 works already perfectly in Chrome, but not in IE. jQuery UI already works in IE on tablet PC, but sortableRows works on Chrome and Firefox, but it have problem in IE. Moreover one can see that the form editing dialogs can't be moved on tablet PCs (with exception of Firefox).
The next demo uses free jqGrid. It's the fork of jqGrid which I develop after Tony have changed the licence agreement of jqGrid and started Guriddo jqGrid JS which is not more free. I implemented many new features in free jqGrid. I rewrote jqDnR module used in jqGrid for drag&drop already for the first free jqGrid release 4.8. Free jqGrid 4.9 will be soon published.
Thus I would recommend you just use jQuery UI Touch Punch and free jqGrid to solve the described problems.

Rearranging table rows through jQuery giving undesired results in IE

I am trying to rearrange the table rows in the preformatted HTML table.The HTML table is being displayed as in the below fiddle.. My total HTML is given in this fiddle.
Initial Look of the table
I am trying to rearrange the <td> with texts containing texts "One" and "Two".I am identifying those "One" and "Two" rows using "rowspan" attribute. If you see the below fiddle in non IE browser you can have a clear picture on what i am trying to do..
After rearranging
But the problem is, This Code is working fine in browsers other than IE(I have tested in Chrome and Firefox). I am unable to find where the problem is...
Please help me to correct my code to have cross browser compatibility.
Thanks for your answers, I found the problem.. IE is assigning the index from 1 to the elements. So giving
find('td.mrGridCategoryText:eq(0)')
is giving undesired results, If i change it to 1 then i am getting correct result in IE but not in others.Check this fiddle http://jsfiddle.net/J7WPb/23/
So
i need to give eq(0) if other browsers and eq(1) if IE :-(
Thanks again.
If you can, use IE9 (Windows 7+ only) and press "F12" for the console and debugging abilities.
You can then even use the javascript debugger to refresh the page and have it break on javascript errors
Personally, I don't support IE, not till they start supporting the "internet" the way every other "way better browser" does
UPDATE
I found a problem! When IE8 loads the page there is an error on line 195 of file LayoutCM.js
In other words, I don't think the error is in your code as much as it is a jFiddle issue!
Suffice it to say, IE8 doesn't support "getStyle" on the object it's being called upon (variable "win" expected as "window").
This is just another shining example of IE not supporting the "internet" as I put it earlier.
Hope this information helps!

JQgrid not sizing properly in IE8

For some reason I cannot seem to get IE8 to display my jqgrid right as you can see below. This isn't the only grid that doesn't display properly. I have another one in my project that renders just like the one below :(. Needless to say, I tried all sort of column widths, tried turning the scrollbars off etc etc. but nothing seems to improve the situation.
Am I missing something obvious ?
I am using the very latest JQgrid version 3.8.
Firefox:
Explorer:
Mostly the problem exist in CSS which you use (for example standard CSS generated by ASP.MVC MVC). Different web browsers interpret CSS inheritance differently. Look at this answer and this. Probably the usage of increased cellLayout parameter or the function fixGridWidth inside of loadComplete could solve your problem.

Categories