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.
Related
I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});
I am using Dgrid with pagination extension to display Data. For the same grid I have implemented grid's DnD. So I can move rows up and down and rearrange row index using it.
But now, as the number of rows have increased, the grid is divided into more than 5 pages. In this case, how can I move the rows from my 5th page to 1st page using DnD?
One possibility I see is by changing the page on hover of pagination bar at bottom. As per the docs there is one method called as gotoPage which switches the page programmatically. But, how to capture grid pagination hover event? And how to get page number on hover so that can be passed to gotoPage method above.
Solved this using Dgrid events on dom nodes. So basically, we can attach event for pages like below
grid.on('.dgrid-footer .dgrid-pagination .dgrid-navigation .dgrid-page-link:mouseover',function(event){
var pageindex = event.target.textContent.trim();
if(!isNaN(pageindex)){
grid.gotoPage(pageindex);
}
})
This will give control to dragged page number and then you can handle the rest afterward.
I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...
I am using a jQuery dataTable Version 1.7.6.
I am showing a dataTable on a dialog box., with normal 'Save' and 'Cancel' buttons on it.
At run time, I apply sort on different columns or change the Number of rows to display and hit Cancel to close the dialog. I am not able to refresh the dataTable settings the next time it pops up on the dialog box. The previous actions I performed still persist. i.e. the 'iDisplayLength' remains the same that i had selected before closing, or the column sorted still remains the same.
I tried oTable.fnDraw() and oTable.fnClearTable().
But, it does not reset the dataTable parameters to the init values.
Am I missing something! Does fnDraw and fnClearTable only clear/reset the data in the table and not the settings?
I guess the position I initialize my dataTable plays some role in the same. I have initialized the dataTable in the $(function() {}); of my JavaScript.
Any pointers would help.
Try this following:
if(oTable != null)oTable.fnDestroy();
if dataTable already init means that table length should be greater than zero .if not table length should be Zero.try this it all seems to work.
if(oTable.length>0)
oTable.fnDestroy();
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.