We Keep Coding

PreSearch lookup entity grid in PowerAppsPortal JQuery

I have DataVerse form in PowerAppsPortals.
One of the field is LookUp for another Dataverse table.
What I need is to prefilter entity-grid in Lookup based on variable which I get from one of the form fields.
var Pesel is the variable that I need to filter with.
The method tr.remove() works (tr.hide() also works) but because my entity grid is paginated when it found value for example on second page of grid it doesn't automatically move found record to the first page - user has to manually move to exact page on which jquery found row.
My lookup grid contatins 6000 records - after change of parameter PageSize to 6000 it takes forever to load grid and prefilter it.
I beg you to help me, I think I've searched whole internet and can't find solution.
var Pesel - it's the value that I get from form field and want to search for it in grid view.
PeselGrid - it's the value that I've picked up from column in grid view.
What I need is to simply prefilter this grid view with jQuery after user opens it - he fills the correct fields in main form and jQuery prefilters grid view to show for him only found rows (something like using the search field in grid view)
$(document).ready(function(){
$(".entity-grid").on("loaded", function () {
var Pesel = $("#cr94f_pesel").val();
var tBody = $(this).find("tbody");
$(".entity-grid").find("table tbody > tr").each(function () {
var tr = $(this);
var PeselGrid = $(tr).find('td[data-attribute="cr94f_pesel"]').attr("data-value");
if (PeselGrid != Pesel) {
tr.remove();
}
});
I think that I've searched whole internet for the solution

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.

How to get a selected row id in second while using a pagination in Kendo Grid?

I have a, let's say, 250 rows, that devided into 25 pages. 10 rows on each page. If I'm on the first page, and I click on third row, I get rowIndex = 2. But if I'm on the second page and I click on the first row, logically I'm supposed to get rowIndex of 11th page, so should be rowIndex = 10. But I'm getting rowId = 0. How can I fix that?

In truth it is correct behaviour. Because when you click on first row, it is first index in table. It doesn't know about data on another pages because they just don't exists (why to load data which you don't need? It can does performance issue)
So if you want behaviour like you are describing, you have to select page number and calculate that.
Something like:
rowIndex = getRowIndex ...
page = grid.dataSource.page();
rowIndex = (page - 1) * 10 + rowIndex;
Here demo

jQuery - best way to present huge amount of scrollable data

I have an array with length of 1.5k, each entry needs to be shown (set of DIV's per entry) but when I'm showing it all at once the browser hangs most of the time. I'm trying to figure out the most flexible, easiest and user friendly way to present this data. All my ideas were hard to make or not user friendly. What I've thought of so far:
show the DIV's that are in user's viewport (hard to make it work on all screen configurations)
group the entries by pages and switch them on scroll event (not user friendly - no visible scrollbar)
load more entries when "Load more" is pressed (not user friendly, user would have to click 100 times on the button if he'd like to get to the 1000th entry, and it would hang the browser anyway)
What is the best way to present this data?

Update - I've also wrote another lib:
https://github.com/yairEO/infinite
Using this endless scrolling script, you could do:
var items = [], // array of objects to load on scroll
batchCount = 10;
// load more items
function showMore(howMany){
// remove X amount of items from the total hidden item's jQuery object and show them
var toLoad = items.splice(0, howMany), // from the items array, cut only the batch we need to show
i;
// Make sure that an image in the current batch is loaded before adding it to the DOM
for( i=toLoad.length; i--; ){
// show item toLoad[i]
batchCount--;
}
}
function onScrollEnd(){
if( batchCount <= 0 && items.length ){
// load 10 items on every scroll
batchCount = 10;
showMore(batchCount);
}
}
$(window).endless({offset:'20%', callback: onScrollEnd });
Your items array could be a javascript array of DOM elements or a jQuery st of elements, which you should convert to a real array for this example code to work without much changes.

RowIDs resetting in jqGrid,How to prevent it?

For some reason the rowIDs get reset once i do any any action from the pagination(increase the number of rows,move to next page etc)
for e.g i have 75records in total.Im displaying 15records at a time.In total i have 3 pages each can display 15records.When im in first page which is displaying that records from 1-15 i get rowIDs 1-15 for rows.Now when i move to next page which displays records from 16-30 i get the rowIDs 1-15 for rows.Here when i moved to new page where 16-30 records are being displayed i was expecting the rowIDs to be from 16-30 but they are not,they are from 1-15.Same thing happens when i do an action from pager to display 30 records at a time instead of 15(default).
I want rowID starting from 1 to n number of records instead of 1-15 for each page.Is there a way to do it? If yes than please help me out.thanks

Row Id will work this way because it generates dynamic Ids for your rows when your data is populated in the grid. This is the default behavior.
You can get a unique row Id if you set a Primary key. this way, you'll get the value of Primary key as row Id. Simply set key: true property of the column you want to set as primary key, in the colModel collection.