Power Apps Portals - Make subgrid read-only dynamically

[selimdag]

Hi community, 

I want to make a Subgrid dynamically read-only. I added a subgrid in one of the entity forms and I would like that the subrid gets read-only after the first interaction. More specifially: I want that the user is able to associate data in the subgrid for the first time they see it. After the first time (when subgrid contains data) I want that it gets read-only and not editable from the user. Does someone know a way to achieve this? 

I could achieve that for entity form fields with custom JavaScript but I don't know how to do that for the subgrids. 

Thanks in advance for the help! 

Cheers, 

Selim

[OliverRodrigues · Accepted solution]

I am assuming that by "read-only" you mean removing the create button is that it?

you can add the following JS to your main entity form or web-page, this should to the trick:

$(document).ready(function(){

    // hide create button once sub-grid contains a record
    $(".entity-grid").on("loaded", function () {
        var tBody = $(this).find("tbody")
        if(tBody.length > 0)
        {        
            $(".grid-actions").hide();
        }
    });
});

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[selimdag]

Hi Oliver, 

Thanks for your reply. 

Your solution does work to hide the subgrid action buttons but the condition doesn't seem to have an impact. The <tbody> element is not empty, even when the subgrid doesn't contain any data. (See the attached SS). So the button is not visible also when the table is empty. 

[OliverRodrigues]

did you try the code and didn't work?

I think you inspected the entire page and got the first <table> element.. that refers to your entity form 

as you can see that <table> you are referring to has no <thead> as well

what is it shown when you try this in the browser console?: $(".entity-grid").length

if you have online one sub-grid it should appear 1

you can always change the condition to find something that suits you, play in the console to get the exact condition you need 

[selimdag]

I changed the condition as follows and it solved my problem: 

var tbody = document.querySelector("#Abteilungen > div > div.view-grid > table > tbody");
if (tbody !== null){
  $(".grid-actions").hide();
}

Your Answer helped me a lot and I will mark it anyway as the Solution. 😉

Thanks and Greetings, 

Selim