Jqgrid pager shows wrong numbers - jqgrid

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...

Related

Jqgrid After setting width of column, and then try to click column separator causes the column resize back to the newWidth

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.

The FocusRing is not appearing on control

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.

Kendo UI Web Grid. Can I trigger an AfterRowExpanded Event?

Without getting into unneeded detail, I'll try to explain the basic issue I'm having. I'm evaluating Kendo-UI Web and working with the Grid.
I do some page column re-sizing based upon the grid having detail rows expanded or not.
The behavior that I'm noticing is that the VERY first time "detailExpand" event is triggered per row, you can see the DOM being updated with the new elements BEFORE my code in detailExpand runs. I'm guessing that this is actually just detailInit running since it's the first time the row is expanded. After that however, if I expand the row again, detailExpand event runs first, before the row shows up. (The code appears as though it's simply doing a .show().. This means that I can't properly calculate the change in height.
Same with detailCollapse. The event code fires before the detail row is hidden. So I end up with extra space equal to the size of the detail row. If they were always the same size, this wouldn't be a problem, I could just anticipate the size and reduce or grow based on that. That is not the case.
So to boil it down, if I could simply have an AfterRowExpanded Event, it would solve everything.
I feel I can customize the kendo ui JS easy enough, but then I have to re-minimize the JS and all that.. Any thoughts?
With the latest version to me it seems that the detailExpand is triggered when the detail row has finished expanding, however the detailCollapse is executed before the detail row is hidden.
As a work-around I would suggest you to slow down the execution of your logic with the help of setTimeout without specifying miliseconds (it will be executed just after the row is actually hidden / shown)
e.g.
$('#grid').data().kendoGrid.bind('detailCollapse',function(e){
setTimeout(function(){
//code goes here
})
})

Page transition with Slickgrid causes custom editor to disappear

We use Slickgrid and we have a minor issue when changing to the next page. The editor is active/visible. When the grid is loaded and all data is displayed, we click in e.g. the first row in the grid in order to activate the editor.
When we navigate down in the grid, when we press the down-key on the before-last row, like expected the new page loads data. When the data of the new page is displayed, the editor is not active on the first row, but when we press the down-key the editor becomes active/visible again on row 2.
Then when we press the up-key once, the editor is also active/visible on row 1. It's strange that the editor went off upon page-transition. Also when we press the up-key on the first row of the second page while the editor is visible, the previous page loads, but again the editor is no longer visible (on the last row of that page). But when we press the up-key once again the editor appears again on the before last row (without clicking the mouse).
We tried the normal editor instead of the custom editor but this didn't solve it.
What can be the cause of this or in which event/function etc. we should look? Can it be a missing javascript or css include? Viewport or pager or the data loader?
Fortunately the issue has been solved today.
The cause was that we called the SlickGrid function EditActiveCell before the data of the new page was loaded. When this was changed in order that EditActiveCell was called after the loading of the data, the grid behaved like expected.

What are ways to reduce the number of columns in a table/grid?

I have a datagrid with many columns. This makes it pretty wide. Now we want to add more information to the table. Aside from removing or shortening existing columns what are some ways we might be able to add additional information without adding new columnes.
The data we want to add would be one of several values. For example:
Projected
Actual
Other
For other cases when the value was an off/on or true/false we would change the color of the row. In this case that doesn't seem to be a good option.
Another thing we considered is using an icon to indicate the information.
Any other ways this could be done?
A solution i've seen implemented with grid components is to have a column chooser - some sort of popup dialog that lists the columns and you can select which ones you would like to see in the grid. You should be able to invoke this popup by triggering it from the grid, e.g. it might appear as an option when the user right clicks and causes the context menu to appear.
Can you group related information into tabs?
an overflow area? ie a number of fields underneath the table that populate based on the selected row.
or just only show the minimum needed info and the have full details in a popup when doble clicked or something..
1) Popup on row hover
2) Drop open inline in the grid with extra info on row click
One technique I've used in the past was to create a "container" type of class that has its own labels and textboxes, and you can arrange them however you want, then insert this class into a single grid column. You still have to do some tricks on binding multiple controls that are not native "grid column" controls, but should help you along. Then, you can actually have each row a single container control in a single grid column...
You can't add completely new data to a grid without reserving a column to display it. The best solution I've seen is to provide only the essential information in the grid displaying all records, and then create a drilldown view that shows all of the data for one row. The drilldown can either be a new view in the same form, a popup for an additional window, or perhaps a mouseover popup.
I've worked on systems that use all sorts of shortcuts to display every last bit of information on a single page, and I found that it just made everything more confusing and harder to use. "Oh, that little icon there means that <insert something totally unrelated to the icon picture>."

Resources