cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
selimdag
Helper I
Helper I

Power Apps Portals - Make subgrid read-only dynamically

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

1 ACCEPTED SOLUTION

Accepted Solutions
OliverRodrigues
Super User II
Super User II

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

4 REPLIES 4
OliverRodrigues
Super User II
Super User II

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.




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.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

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. 

 

 

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 

 




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza Winner Announcement

Please join us on Wednesday, July 21st at 8a PDT. We will be announcing the Winners of the Demo Extravaganza!

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,014)