Develop Reference

ag-grid (8.2.0) not rendering some rows

Whenever I call setRowData() to add rows that exceed the number of rows that can be displayed by the grid div unless scrolling, some rows are not added to the DOM. Even if I scroll to the bottom of the grid, they don't show up.
If I resize the grid, these missing rows magically appear.
I notice the row count and the getRenderedNodes() count are not the same.
I tried calling refreshView() from a setTimeout but it didn't work.
Is there an option to force rendering on all row? or at least to make them show up when I scroll?

I've had encountered a similar issues with adding new rows after the grid has already rendered. Instead of calling setRowData() try calling addItems([..]) instead where the array passed to addItems are the new rows that you're wanting to add. For whatever reason, this isn't in the grid api documentation, but you can read more about it at https://www.ag-grid.com/javascript-grid-insert-remove/#gsc.tab=0
With that function by default, it won't automatically refresh. Try leaving the refresh as default at first and then refresh if the issue persists.

Extjs grid selection after store.load has incorrect data

In ExtJS 4.2
I have a grid with records with a remote load. I select a row in the grid and update that in the database.I am updating a record in the database and reloading the store with store.load(). After this occurs I can pause in debugger and check the store and it does indeed have the correct values. The same record is still selected however the following code:
var selectedRecords = grid.getSelectionModel().getSelection();
Is not getting the updated records. If I deselect and reselect it the record is refreshed but without doing so it still has the old values. Is there a way to refresh it.
I see a lot of posts about getting the rows to stay selected upon load, but that is not a problem for me it seems to be doing that on its own.

It seems to be a bug with the underlying the Selection Model. The 'selected' mixed collection does not get updated as Ext.selection.Model extends Ext.util.Observable and will be updated only when some event happens related to grid selection. If you do not want to deselect and then then select manually, or even register a callback on the store load, then try the following as workaround,
var selectionArr = grid.selModel.selected;
selectionArr.replace(selectionArr.keys[0],grid.getStore().getById(selectionArr.keys[0]));
Now try,
var selectedRecords = grid.selModel.getSelection();
Should work fine.

Try to refresh the grid store after updating the value.
Ext.getCmp('myGridID').getView().refresh()

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.

Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.

I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

jqGrid - Custom filtering works but not after reopening a grid in a modal window

I have a custom filtering function, it passes in a custom url and reloads grid data via:
function filter_grid(filter) {
grid = $(filter).parents('.ui-jqgrid-view').find('.grid');
/* build the url in here*/
$(grid).setGridParam({loadonce:false, datatype:'json'});
jQuery(grid).setGridParam({url:myurl}).trigger("reloadGrid");
$(grid).setGridParam({loadonce:true});
}
This works fine and filters data as expected. However, I allow the user to open the grid in a modal window and this will also work the first time you open the modal window but if you then close the window and reopen it... filtering fails. I see no errors in console... just the reload never seems to happen. Any suggestions?
Clarification
In a nutshell there is a select menu attached to each grid. You can select an option in that menu and it will reload the grid with the filtered data via the filter_grid function. It reloads by reloading the grid with a new url that passes in some parameters to filter the data.
In the gridComplete event I append a select input element (which I populate later) to each grid on the page. Each one has a class of "filter":
$("#grid1 .ui-jqgrid-titlebar:eq(1)").append("<select id='pdd_user' name='filter_user' class='category_select filter'><option value=''>All</option></select>")
I watch for clicks on the filter class:
$('.filter').live('change', function() {
filter_grid(this);
});
That calls the filter_grid function (the one I included above with the first edit of my question), as you can see, and that is what repopulates the grid with the filtered data:
jQuery(grid).setGridParam({url:myurl}).trigger("reloadGrid");
I set it to loadonce:false because the grid was set to loadonce:true when it was initially created (for local sorting purposes) so I set it back to loadonce:false, reload the grid with the new url and params, and then set it back to loadonce:true in order to enable local sorting again.

I don't full understand your question, but I hope I could you help to find what's wrong in your code. I think that you should remove any manipulation of loadonce option of jqGrid. It's unneeded and dangerous. To reload the grid with the server data you need just set datatype to 'json' and reload the grid with .trigger("reloadGrid", [{page: 1, current: true}]); (see here for details). The parameter current: true helps to hold selected row if it will be found in the grid after reloading. The parameter page: 1 can help in case if you use data paging. If the user choosed the second page for example and then reloadGrid will be started it will request the server to load also the second page of the filtered results. So one can have empty grid and the page number 2 in the pager. Resetting the page number to 1 either with respect of setGridParam or with the described above parameter of reloadGrid helps in the cases.
Th problem with setting of loadonce: false could be if the reload of grid will be processed before you set loadonce: true. In the case no local data will be filled in the grid. So the option loadonce: true should be permanently set.
I recommend you additionally to read this answer if you uses server side paging with local sorting of data.

Updating a table from Javascript

I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.

You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.

Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.