We Keep Coding

Interactive Grid inside a Modal Dialog only shows a limited number of rows

I have an interactive grid inside a modal dialog page which has to display this associative table :
SELECT PK_FK_ARTICLE,
PK_FK_SERVICE,
PK_FK_ETAGE_BUREAU
FROM INV_TB_POSSEDER;
CREATE TABLE inv_tb_posseder(
pk_fk_article INT,
pk_fk_service INT,
pk_fk_etage_bureau INT,
CONSTRAINT ct_pk_posseder PRIMARY KEY(pk_fk_article, pk_fk_service, pk_fk_etage_bureau),
CONSTRAINT ct_pk_fk_service FOREIGN KEY(pk_fk_service) REFERENCES inv_tb_service(pk_service),
CONSTRAINT ct_pk_fk_etage_bureau FOREIGN KEY(pk_fk_etage_bureau) REFERENCES inv_tb_etage_bureau(pk_etage_bureau),
CONSTRAINT ct_pk_fk_article FOREIGN KEY(pk_fk_article) REFERENCES inv_tb_article(pk_article)
);
ALTER INDEX ct_pk_posseder RENAME TO ind_pk_posseder;
CREATE INDEX ind_pk_fk_service ON inv_tb_posseder(pk_fk_service);
CREATE INDEX ind_pk_fk_etage_bureau ON inv_tb_posseder(pk_fk_etage_bureau);
CREATE INDEX ind_pk_fk_article ON inv_tb_posseder(pk_fk_article);
Here's how I configured the Interactive Grid :
Pagination set to Scroll
Heading set to Region with a height set to 850px
My 3 columns have their values based on a LOV, which makes it easier to read the values instead of just numbers :
When I open the page and scrolls through the records (about +400 rows), no rows are displayed after the ~40th row :
What I tried and found :
I already tried to set the Pagination to Page, but the records doesn't show after the 3rd page, and I can't go back to the previous pages.
I tried to set the Heading to None, but then no rows appears.
If I apply a filter on a column, the rows appears, even more than 40 row !
I also found that if I remove the LOV on the first column PK_FK_ARTICLE, all rows are showing, but it's not useful, I have to display the LOV on the 3 columns.
The interactive Grid has a static ID called donneesList which is used for JavaScript, to remove some functions on the Interactive Grid :
$("#donneesList").on("gridactivatecolumnheader", function(e){
setTimeout(function() {
$("#donneesList_ig_column_header_menu").find("[data-option='freeze']").remove();
},1);
});
let actions = apex.region("donneesList").call("getActions");
actions.hide("selection-copy-down");
actions.hide("selection-copy");
actions.hide("selection-fill");
actions.hide("selection-clear");
actions.hide("single-row-view");
actions.hide("selection-duplicate");
actions.hide("row-duplicate");
I've seen some similar posts on the Oracle Forum and here on SO but none of the solutions seems to work for me
Thanks in advance,
Thomas

I want to select all the records of current page only

I am using igx-grid. When I am clicking on select all using rowSelection, it selecting all the records present in grid, not of current page. I want to enable something by which when I click on select all of igx-grid checkbox, it should select only current page record, not all. Is there any way to do the same? Because I am trying it from last 3 days but not getting any solution. Thanks in Advance!!!

Select Rows programmatically :
<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button>
Deselect Rows programmatically :
<button (click)="this.grid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>
Source : Official documentation of igx-grid (Row Selection)
Try using (onRowSelectionChange) Event

You can use this.grid.deselectRows([1,2,5]) as #Toxy said but as arguments you can use the property dataView of IgxGridComponent that is an array of only row data displayed in the grid.
onRowSelectionChange(event) {
this.grid.selectRows(this.grid.dataView.map(x => x.id), true);
this.currentSelection = this.grid.selectedRows;
}
This not have problem with filters because dataView change when filters are applied. Now in this.currentSelection there are only the page id data. Only little problem is that, graphical, the row data of other pages appears selected (despite they are not presente in this.grid.selectedRows); I resolved this issue using (pageChange)="onPageChange($event)" and when page changes this.grid.deselectAllRows(false); false argument let you to deselect all rows in the grid regardless of filters.

How can i maintain a checked state of a particular checked row after the datasource from the table reloads?

I have a mat table that contain checkboxes. A user is able to do operation on each row at a time. Once the operation of a particular row is completed, the number of time that particular row was invoked increases and its saved back to the database, then fetched back and displays on one of the columns of the same table using this column in desc order.
The problem is, when the numberOfOperations Updates, I have to do another get call to update the table column NumberOfOperations time so it uncheck the checkbox of the row that was operated on and makes it hard to keep track which row was operated on here is a snippet of code. My goal is to maintain the checkbox for the row operated on checked after the table datasource refreshes
<mat-checkbox(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row.docId) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
performOperation(){
//1. performs some operations once.
//2. calls the function thatshows how many times row was used
this.IncNumber()
}
//update the selected row.
IncNumber(){
this.myDataService.updateDataServices(this.objectId
.subscribe(data =>{
this.refresh()
})}
//refresh the table with updated data
refresh(){
getDataForTable();
}

Use and array of checkedRows and then in the checked property of the checkbox check if this is operated on or not like below
<mat-checkbox(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row.docId) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
Here you have not added the selection.isSelected(row) function
In that function you can just check go through each element using foreach function of the array and check if the element is present in the selected array of present the. Mark it's checkbox to selected
For this you have to first add the selected row in to the selected array for it every time if the checkbox is checked and remove the row everytime of the checkbox is unchecked

Html to DataTable -> Loop all rows of table instead of looping the ones only in the current page

I have a datatable like below in my asp.net-4.5 page:
Name City Value Action
A B 10 delete
X Y 10 delete
T R 10 delete
ALL ALL 30
An HTML table is converted into such a datatable via $(#example).datatable()
When the "Delete" link is clicked, the regarding row is being deleted and the value of the row including ALL is being updated in javascript. So here, if I remove the first row, the table will be like below WITHOUT any page refresh.
Name City Value Action
X Y 10 delete
T R 10 delete
ALL ALL 20
One issue here is that the row having ALL TOTAL can be anywhere else, it is not always at the end of the table. The user can re-sort the table by clicking a column. For example, if Value column is clicked, the row including ALL will be the first row.
At this point, I want to locate where the row is located. To do that I have a for loop like below:
for (var i = 0, r; r = document.getElementById("example").rows[i]; i++) {
if ($('#example').find("tr:eq(" + i + ")").find("td:eq(2)").html() == 'ALL') {
locateALLrow = i;
break;
}
}
This for loop above works perfectly, when there is 1 page of data only (One page includes 10 rows). So my questions:
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
2- Is there a better way to locate the index of the row including ALL (as Name column).
Any advice would be appreciated. Thanks!
EDIT: Tried the loop like below, didn't fix:
for (var i = 0; i<document.getElementById("example").getElementsByTagName("tr").length; i++)
{...}

1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
Instead of traversing the html table which shows only first n rows data when using pagination, try working with the datatable API. You'll be able to loop through complete data with that.
https://datatables.net/reference/api/rows().data()
2- Is there a better way to locate the index of the row including ALL (as Name column).
Same as above.Use datatable API instead of looping through current html shown data.

Change the current page of an AJAX datatables

I'm currently having a datatable with some data. The issue is as follows:
Lest have a total of 91 rows and we set paging to 10 rows per page. This gives us 10 pages with the last page with only 1 row.
I'm using the .ajax.reload() method from the DataTables API to refresh the table whenever I make any change on it and I pass the "keepPage" parameter as true which means that if I'm on 5th page and I edit something, after the server side processing, my data will still load page 5.
However, the problem comes when I'm on the last page with only 1 row and I delete that row. My table refreshes on the 10th page and since there isn't anything more on it, it displays an empty table.
How can I change the page in this case to the previous one?

Use page.info() to get paging information about the table before reloading with ajax.reload().
Then perform the following calculations.
var table = $('#example').DataTable();
// Get paging information
var info = table.page.info();
// Number of deleted rows
var numDeleted = 1;
// Calculate number of pages after deleting rows
var numPagesAfter = Math.ceil((info.recordsDisplay - numDeleted)/info.length);
// If number of pages after deleting rows is less than total number of pages
// and the last page is displayed
if(numPagesAfter < info.pages && info.page === (info.pages - 1)){
// Go to previous page using zero-based index
table.page(numPagesAfter - 1);
}
// Reload table
table.ajax.reload();