I have a Form in Dynamics 365 Power Apps, and I am showing an editable Grid in that form.
My form is bound to a table called "ForecastUser", and my editable grid loads data from another related table called "ForecastMonth".
I want to programatically select the rows in my grid, based on the value of a particular column.
Using Power Apps Client API, I can iterate over the all the rows in the grid, and I can even pick the particular rows having the desired column value.
But I found nothing in the Power Apps Client API documentation to programatically select a row.
Following is the JS code I have used to pick the particular rows having the desired column value. This code is working.
let gridRowIndicesWithValidSeqNumbers = [];
let gridRowEntityIdWithValidSeqNumbers = [];
let gridContext = formContext.getControl("ForecastDetails");// get the grid context
let forecastDetailsGridOnLoadFunction = function () {
let gridObj = gridContext.getGrid();
let gridRows = gridObj.getRows();
let rowsLength = gridRows.getLength();
// iterate over all grid rows
for(let i = 0; i < rowsLength; i++){
let singleRow = gridRows.get(i);
let singleRowData = singleRow.data.entity;
let entityId = singleRowData.getId();
entityId = entityId.replace("{", "");
entityId = entityId.replace("}", "");
entityId = entityId.toLowerCase();
// get attributes for row data (current row)
var gridRowDataAttrs = singleRowData.attributes;
// iterate over attributes for row data (current row)
gridRowDataAttrs.forEach(function (column, j) {
var atrName = column.getName();
if(atrName == "tv_sequence"){
var atrValue = parseInt(column.getValue());
if(atrValue == 3 || atrValue == 8){ // DESIRED VALUE FOUND
console.log("i = " + i);
console.log("atrName = " + atrName);
console.log("atrValue = " + atrValue);
gridRowIndicesWithValidSeqNumbers.push(i);
gridRowEntityIdWithValidSeqNumbers.push(entityId);
}
}
});
console.log("At the end of inside section in loop over rows");
}
console.log("Exited the loop over rows");
console.log("gridRowIndicesWithValidSeqNumbers");
console.log(gridRowIndicesWithValidSeqNumbers);
console.log("gridRowEntityIdWithValidSeqNumbers");
console.log(gridRowEntityIdWithValidSeqNumbers);
};
gridContext.addOnLoad(forecastDetailsGridOnLoadFunction);
My objective: how to programatically select the particular rows from the Grid?
I tried selecting the rows using the following jQuery code.
var loopIterationVal = 1;
jQuery("#id-4f83745c-c9c0-49a6-b311-2f89ff4ee9de-10").find(".ag-row.ag-row-level-0").each(function(){
var childElem = jQuery(this);
console.log("##############################################################");
console.log("Inside jQuery foreach");
console.log(childElem);
console.log("loopIterationVal = " + loopIterationVal);
loopIterationVal++;
});
In the code above, "#id-4f83745c-c9c0-49a6-b311-2f89ff4ee9de-10" is the HTML ID attribute of the div containing the grid. The program flow never enters inside the foreach loop. However, if I manually enter the same lines of jQuery code in the Console of Chrome Developer Tools, the lines inside the foreach loop are executed. You can see the result from below screenshot.
