jqGrid inline editing with dynamic scroll - scrolling issues - jqgrid

I'm using jqGrid with dynamic scrolling and I'd like to use the Inline editing with inlineNav incl. Oleg's solution which makes inline editing finaly useful.
I found dynamic scrolling problematic because not all rows are loaded (and rendered) and Inline editing methods goes wrong when scrolling. To avoid problems, user can't scroll out:
can't scroll after selecting the row and then using add/edit
can't scroll even without selecting the row, because with no selection, first position is applied (3rd video)
can't scroll while adding/editing a row (one solution may be temporarily disabling the scroller)
Links:
demo: http://jsfiddle.net/dmnc_net/tNGJn/
scrolling with beforeSelected: http://youtu.be/osvwiykcuME
scrolling with first and last: http://youtu.be/Du_TBrlrzSI
scrolling without clicking any row: http://youtu.be/pCzpk1SvQNA
I've used these addRow position settings: beforeSelected, first and last; before and after are not working at all.
I'm thinking about solve this problem by patching addRow and editRow methods by telling them scroll position and handling loaded/unloaded "pages" when user has scrolled too far and selected record are unloaded. But I'm not sure if this is possible or it will be better to use modal add/edit dialogs.

Related

Is it possible to collapse or hide rows in SlickGrid?

I need expand/collapse feature to show/hide rows in SlickGrid.
So to implement this feature, I have a expand/collapse icon on the Grid header row. And by pressing it, it should Show/Hide all data of the grid (Toggle Visibility).
The feature I want to implement is exactly same as grouping where parent row can be expanded/collapsed by clicking on **+ or -** icon. But without applying grouping.
Should be pretty easy. Just find the viewport div and toggle its visibility on click. Everything else should collapse around it.

Issues with tabbing between Filter Fields with Horizontal scrolling - scrolling out of sync

We have a wide grid with horizontal scrolling, with 2 frozen columns. It is very wide (over 20 columns), so the horizontal scrolling is always needed.
We are using the Filter Row option to allow the user to filter. Works well, but if the user tabs between the filter fields, an issue arises. If the user tabs to a hidden field (hidden as in having to scroll to see it), then the header will scroll to accomodate, but the body will not. Likewise, if the user is scrolled all the way to the right and tabs out of the last frozen column, the scrolling again gets out of sync.
See the following Dojo example to experience the issue yourself.​
http://dojo.telerik.com/iNONA/2
If anyone has any clue as to how to fix this issue, I'd appreciate it very much!
Thanks!
I had a simular problem, just without angluar implementation. For me the jQuery scrollLeft() method solved the problem, see (Grid data isn't align with Grid header when tabbing through header columns).
$("#example .k-grid-content").scrollLeft($("#example .k-grid-header-wrap").scrollLeft())
With that line of code I got it working in the developer console of your Dojo example to adjust the grid content to the position of the header. But the scroll event, as I implemented it on my problem, didn't work on your example. Maybe this helps you and you can adjust it with the scroll event in angular.

Grid inside Table or MainTable

I have one WWSD or one SDPanel with some attributes but between these attributes that are fixed inside a Table or directly in the MainTable I want put and Grid, the problem is that the Grid is not showed and when I put the grid its no more possible scroll in the WWSD or SDPanel, is like the Grid stuck the SDPanel more than the grid is not showed.
Anyone can help me to put the Grid and keep with all normally ?
Thx.
I assume you're targeting Android.
The issue is that Android does not natively support nested scrolling. Therefore, a GeneXus layout that contains a grid will disable the form's own scrolling (so that the grid can itself scroll).
There are two ways of resolving this issue:
Redesign the panel so that the form does not vertically exceed the size of the screen (thus, form scrolling is not necessary).
Set autogrow=true for the grid, which will resize to fit all items (and "push down" any other controls located below it). Since the grid will no longer need to scroll, the form's scroll will be enabled.

Jqgrid popup positioning trouble

I am facing the problem of positioning of the update confirmation box/ delete confirmation box/ No row selected error box/ edit modal popup/ add modal popup etc to the center of the screen ….. I have looked a lot but could not find any helpful answers ….. can you please suggest that what can be done to achieve this result. I have two grids and the default positioning is not going well with it as for the second grid the popup's appear underneath and I have scroll down to get to the edit/add modal popup.
I think that the most effective way to change position of all message boxes and dialogs displayed by jqGrid would be subclassing of $.jgrid.showModal method internally used in jqGrid. I hope that you'll can create the corresponding solution based on idea from the answer. Instead of animation effects you can change position of the dialog/message box before is will be shown.

How to make cell save when slickgrid looses focus

I have a SlickGrid with some Editors on a form with some buttons above it. (Save and Cancel). When i edit a cell in the grid and click the buttons above the grid - the cell does not commit it's edit. I've debugged and it is not calling : commitCurrentEdit. I've also tested on clicking an empty area anywhere out of the grid area...
Has anyone noticed this scenario and have a solution to get the cell to commit when one clicks out of the grid. Due to the various positions the grid good be in it would be hard to do an overlay.
Thanks
You can try this:
$("#buttonName").bind("click", function(){
gridName.getEditController().commitCurrentEdit()
});

Resources