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

Hide or Collapse a single specific row in ag-grid using Javascript

After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js

setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)

how to force the ag-grid to scroll to the selected/highlighted row position

We are using ag-grid and I need to display the scrollbar in child window as per selected row position in ag-grid. Please find the below plunkr and click on source_id which is an edit page and I need to show the scroll bar as per selected/highlighted row on window popup screen.
In my code scroll bar is working but it is not showing exact scroll bar position as per selected/highlighted row in child window. And please provide inputs for to show the scrollbar in child window as per selected/highlighted row position using ag-grid.
Plunkr url
Note: It has to scroll automatically like selected row position in 'ag-body-viewport' div class.
Follow the below steps:
1)In plunker click on preview button.
2)Click on any source_id in ag-grid.
3)Once click the source_id popup window will be displayed.
4)In popup window another grid will be displayed with highlighted row with respective of source_id.
5)My query is like in this particular window ,how to scroll the scroll bar automatically as per highlighted/selected row postition .

If you take a look at the scrolling section of ag-grid api you'll get an idea how to get about it.
You could update your getRowStyle function to something like this:
function getRowStyle(params) {
....
if (params.data.source_id.trim() === $scope.source_id.trim()) {
colorToReturn = {
'background-color': 'orange'
};
$scope.gridOption.api.ensureIndexVisible(Number(params.data.source_id));
}
....
};

Another Approach with Angular 8 and ag-grid 20.2(enterprise)-
scrollToSelectedRow(){
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex,null);}
ensureIndexVisible takes 2 parameters i.e. rowIndex(integer) and position('top','bottom',null etc).
https://www.ag-grid.com/javascript-grid-api/#scrolling

Though it is too late to reply, considering it might be helpful for someone working on Angular.
goToSelected() {
let addedNode :any []= Object.values(this.gridApi.getModel().getCopyOfNodesMap())
.filter(//logic to fetch row on which you want to scroll to)
if(addedNode !==null && addedNode !=undefined && addedNode.length >0){
let toBeFocused:number = addedNode[0].rowIndex;
this.gridApi.setFocusedCell(toBeFocused, 0);
this.gridApi.ensureIndexVisible(toBeFocused);
this.gridApi.getRowNode(toBeFocused).setSelected(true, true);
}

Here's how I select a particular agGrid row, and make sure it's visible, using Angular & agGrid v23:
let IDofRowToSelect = 123;
this.gridApi.forEachNode((node) => {
node.setSelected(node.data.id == IDofRowToSelect);
if (node.data.id == IDofRowToSelect) {
this.gridApi.ensureIndexVisible(node.rowIndex, 'middle');
}
});

Change jsGrid insertvalue based on select control on the page

I am using JsGrid in my asp.net application. I felt it was very awesome grid. Everything worked out very well, but I was stuck at one point.
I have a dropdown on a page which is fetching data from database. and next to that control, i have added JsGrid.
When I change the index of dropdown, and when I click on Add row on my jsgrid, it should set the default value for one of the fields in the grid.
Can anybody please help me out in this regard.
enter image description here
Regards,
Nithin Eate

Redefine insertTemplate of the grid column you want to set default value to and pick up value from your dropdown widget:
insertTemplate: function() {
var input = this.__proto__.insertTemplate.call(this); // original input
// getValueFromDropDown() should read value from your dropdown control
var defaultValue = getValueFromDropDown();
input.val(defaultValue)
return input;
}
The source GitHub issue https://github.com/tabalinas/jsgrid/issues/471

Displaying dirty cell triangle on grid when changing datasource manually

I have a kendo grid with custom popup edit window to imitate popup edit, but with batch edit. Everything works fine, but I am experiencing a small issue. Whenever value is changed, the grid cell does not have that red triangle thingy in the corner indicating that this particular value different from original.
As I understand in this post, manually made changes in datasource does not appear on the grid, so I have to add them manually.
This post 'manually maintain dirty cell marker on paging in Kendo grid' gives an idea how to get it working. I could attach some listeners to kendoWindow inputs, track what fields are being edited, compare old and new values...
But is there a less painful way to achieve this functionality? Maybe there is some built in kendo function to achieve that?
Here's a small working example http://dojo.telerik.com/aSaXe/4

The red "dirty" marks appear automatically only when the built-in in-cell editing is used. From this point of view, your scenario requires these to be added manually after the custom editing popup is closed.
You may find the change event of the data item useful in the task. It will be fired each time a value in the popup is changed and the respective textbox is blurred.
var uid = $(e.target).parents('tr').attr('data-uid');
var grid = $('#grid').data("kendoGrid");
var dataItem = grid.dataSource.getByUid(uid);
dataItem.bind("change", function(args) {
// args.field
});
Finally, keep in mind that each change in the Grid dataSource causes the whole table to be redrawn (unless the built-in in-cell editing is used), so you will lose any previously applied custom styling.

You can use the save event on your kendo grid as:
save: function (e) {
addDirtyUid(e.model.uid);
setTimeout(refreshVisualDirtyElements, 100);
}
Other functions and var:
var dirtyIds = [];
function addDirtyUid(currentUid) {
if (dirtyIds.indexOf(currentUid) === -1) {
dirtyIds.push(currentUid);
}
}
function refreshVisualDirtyElements() {
for (var i = 0; i < dirtyIds.length; i++) {
var thisUid = dirtyIds[i];
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").addClass("k-dirty-cell");
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
}
}