Skip to main content

Notifications

Community site session details

Community site session details

Session Id : XLOgfxJPln7OIqIoA5szR/
Power Pages - Power Apps Portals
Answered

Grid View vertical line between columns

Like (0) ShareShare
ReportReport
Posted on 22 Apr 2021 15:19:58 by 5

Hello Experts,

 

I am new to PowerApps Portal and need some of your advise. Is it possible to add vertical line between each columns in the grid?  If yes, please guide me how to achieve this.

 

raginpatel_0-1619104740753.png

 

Thank you in advance.

 

 

  • OOlashyn Profile Picture
    3,496 Most Valuable Professional on 23 Apr 2021 at 14:39:22
    Re: Grid View vertical line between columns

    @raginpatel, yes you can add lines there as well. You would need to use CSS like this:

    td {
     border-right: 1px solid black;
    }

    Entity list is rendered as a regular HTML table, so you can google how to style them and apply that. Hope this will help.

  • D365 Customer community Profile Picture
    5 on 23 Apr 2021 at 13:13:28
    Re: Grid View vertical line between columns

    Hello OOlashym,

     

    Your solution works. However is it possible to have vertical lines between data as well? At present lines show up in header part of the grid only.

     

    raginpatel_0-1619183507048.png

    Thank you so much.

  • Verified answer
    OOlashyn Profile Picture
    3,496 Most Valuable Professional on 22 Apr 2021 at 21:11:01
    Re: Grid View vertical line between columns

    Hi @raginpatel ,

     

    You would need to add some custom css to the page. If you have only one grid on the page or you have multiple but want to add a line to all the easiest way would be to update the styling of th tag:

    th {
     border-right: 1px solid black;
    }

    Result will look something like this (see attached).

     

  • StalinPonnusamy Profile Picture
    Super User 2024 Season 1 on 22 Apr 2021 at 21:10:27
    Re: Grid View vertical line between columns

    There is no way with low code. We need to write JQuery/Javascript. I have done for Specific column color based on data. I'm pretty confident we can able to do using JS.

     

    This is like find tr on the grid and update border

     

    • Go to Entity List > Open the "Options" Tab
    • Write Custom javascript

     

    $(document).ready(function () {

    $("#EntityListControl").on("loaded", function () {

    // perform your action

    })})

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Pages - Power Apps Portals

#1
Ajlan Profile Picture

Ajlan 6

#2
TonjeWaasjo Profile Picture

TonjeWaasjo 4

#3
VDI Profile Picture

VDI 2

Overall leaderboard
Loading started