I am stumped. I am using JQGrid in IE9 and it doesn't behave like it does in other browsers. This is very easy to demonstrate. If you look at the Loading Data demo at http://www.trirand.com/blog/jqgrid/jqgrid.html and select "Array Data" and look at the grid, in IE9 it looks different than it does in Chrome, Safari or Fox. First off, it has a horizontal scroll bar? and the notes column extends past the end of the grid. If you try and use the column resize bar between the Total and Notes column in IE9 there is a big offset in the column line. This does not happen in other browsers. If you move the checkbox column to the end of the grid and when a vertical scroll bar appears, it hides the checkbox column. This again happens only in IE9.
I am using the 4.4.3 version of JQGrid.
If anyone can shed some light if I am doing soemthing wrong or a workaround it would be greatly appreciated.
Thanks
First of all I don't see any difference between the look of the "Loading Data" / "Array Data" page of the official jqGrid demo in IE9 and other web browsers which I have (Chrome 24, Firefox 18, Opera 12.13).
The page from the demo "Loading Data" / "Array Data" are made for very very old version of jqGrid and the current usage of jqGrid in the way would be very bad style. Instead of that one should move the line which definition and initializing of mydata at the beginning of the code, One should add data: mydata, gridview: true, options to the grid and add additionally either a pager (pager option or toppager: true option) or add rowNum with large enough value if one don't want to use any local paging of data. For example one could add rowNum: 10000 option.
To remove unneeded empty space in the grid I would recommend you to use height: "auto" (or height: "100%") or use alternatively scrollOffset: 0 option.
Related
I'm continuing this thread. Basically, I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid is inside a ".tab-pane" of a bootstrap tabs(https://getbootstrap.com/docs/4.0/components/navs/). The problem is that the grid shrinks to the left side of the tab pane on about 1/3 of full tab/screen width. I haven't set shrinkToFit but autowidth:true. Is there a cure for this? Thx.
It is good to know which Bootstrap is used 3 or 4, since Guriddo jqGrid support both with different style sheets.
The autowidth option work on element which width is known. The tab initially has a width = 0 which causes maybe this problem.
You can try to enclose the jqGrid code within setTimeout function with enough delay (since of the Bootstrap effects when opening the tab).
If the problem is not solved, please post your code ( jsfiddle.net or other place) to revise it and recommend a solution.
I used jqgrid 1.7.2 on my project, it loads data correctly, but there is a small error in pager. it shows the correct number of record. And i split page by 50 rows. When I drag scrollbar slowly, (for trigging the pager) it shows 1-100 instead of 51-100. But if I drag it fast, shows 51-100. How can i fix this error. Thanks for helps...
Here i am having problem with grid column resize.
The actual functionality i want to achieve is that i want to reset the grid column widths to some default values on click of buttons.
I successfully changed the width of column using some code, but the problem is arise now.
The problem is after resetting the column widths (i.e. setting column width) and then when i Just click on column separator causes column width change to previously set width (i.e. newwidth).
I illustrate the problem by showing images.
Just consider the images in sequence as they shown.
1. Before resizing the column.
2. After resizing the column.
3. Now reset width to default width.
4. Now just click on separator. This will cause the column to be resized again to previous state before we reset. and also causes undesired behavior when dragging as you see in next pic.
5. Width increased and undesired behavior when dragging.
I tried many things. I also found this : jQuery grid plugin - triand
But unfortunately no solution provided in it.
By using that reference, i tried to setting newWidth to 0, -1, undefined and moreover i removed it from headers. but all the things not working.
I can't understand what is happening.
Please note that there is no chance that some undesired code in project resided somewhere else causes this behavior. For the test i tried using new version of jqgrid 4.5.1, but in that also happening the same.
Please someone provide me solution for this. I am tired as i am doing this thing from many days. I am very much thankful to the one who help me.
Thank You in Advance !
I am not sure how you implemented "reset width to default width", but I hope two things should help you.
First of all jqGrid have bug in resizing of columns which looks exactly like on the "Step 5" which you described. I posted the pull request which merged to the main code of jqGrid about one month ago. You can do the same changes (two lines need be change) you your copy of jquery.jqGrid.src.js (see here details of the changes).
To implement resetting of width of columns to default width you can use the following. First you can use widthOrg of elements of colModel. After resizing of any column the original value of width will be saved in widthOrg. To change the column width one can use setColWidth method which I suggested in the resent answer.
I hope you will able to solve you problem using widthOrg, setColWidth and the bug fix bescribed above.
In my application we have a RadGrid on which we can double click and have a row in the editable mode in the table. There are bunch of controls in the row and one of the column has checkbox and other has few links ( tag) when I jump from one control to other by tabbing.. the other controls like text and combo gets the focus... however the check box and links despite havig the focus do not show the Focus Ring around it
This code works perfectly in Chrome where as not in IE8.
Anyone has any suggestions or pointers.
Kind regards,
Prashant
Finally after lots of trial and error I figured out the issue is with the positioning of the control in the telerik grid. When I added the CSS "position : absolute" to control it started to work.
I need the ability to navigate the data within the jqGrid. I have virtual paging turned on scroll = 1 and multiselect turned on.
I need the ability to use keyboard arrows keys, page-up, page-down, home, end button.
Page up and Page down to move between pages and home to go to the first page and end to the last page in the jqGrid.
Anyone who has done this or how this can be done would be most appreciated..
It is not quite clear how keyboard navigation should work in case of multiselect: true. You can find some old suggestion (which is far to be perfect) in the answer. I think that good implementation of keyboard navigation should include keyboard navigation which change the focus of the row only and not change the selection. Another key, like space, should be used to select or unselect rows. Additional work should be done to implement selection of the ranges of rows (with the usage of Ctrl and Shift for example).