Drawer open/close in v2

Quick question for those more familiar with features in v2. I am attempting to leverage the drawer feature on tables. Is there still not a way to make it a "only one drawer open at a time" setup natively? Maybe I am totally missing something or this is a new feature in Boston, of which I have not gotten to just yet :) (I am still on Boston)


Now for some feedback: I certainly see the benefit of allowing it to be open for multiple rows, but you reach a scalability/performance issue when you are dealing with a lot rows and data (at least the way I am trying to use it). From a performance and efficiency stand-point, I prefer to open one drawer at a time and call the respective child records of that row at the time the user needs it. I envision a world where this feature is dynamic: if you want it to be able to open for multiple, check this setting. If you want it only open for one at a time, click this setting. Everyone wins.


Also, I am aware of some javascript on posts that help address this issue. I have tried to apply it for v2, but I am not having any luck. Full disclosure, I am mediocre at best with javascript, so that might be the reason why 😑.


Thanks for listening.

Answers

  • Hello,

    Sorry, I'm unable to help you, but I would really appreciate it if you could share the posts that you've come across that address this issue, as I've not even been able to find that.

    Best,

    Lukas

  • Luka, are you referring to the fix in v1?

  • Sorry, v2.

  • Sorry Luka, I should have been more clear in my post. The javascript posts address the challenge in V1, and I was trying to convert it to work in v2. I have not found a post that specifically discusses v2.

  • lukaspovilonis
    edited April 19, 2021

    Hi, I ended up investigating this more.

    • To toggle a drawer on a table using JS:
    rowId = mode.getFirstRow().Id 
    skuid.$C(<TableId>).cpi.toggleDrawer(rowId)
    

    I haven't found a way to check if the drawer is open or not.


    • Close all Drawers:
    skuid.$('#<TableId> tbody tr [aria-label="close drawer"]').each((i, ele) =>{
           skuid.$(ele)[0].click()
    });
    

    it uses JQuery to iterate over rows on the table and if they are opened then they will be closed.

    or you can use inbuilt table function

    skuid.$C(<TableId>)._cpi.closeAllDrawers()


    • Open all drawers :
    skuid.$('#<TableId> tbody tr [aria-label="open drawer"]').each((i, ele) =>{
            skuid.$(ele)[0].click()
        });
    

    it uses JQuery to iterate over rows on the table and if they are closed then they will be opened.

    There is no inbuilt function to open all drawers, like for close.


    Now, you can add JS Snippet with code for 'Close all drawers' to Before load actions. So JQuery will close all drawers, and then Skuid will open the one user selected.

    Note, JQuery works and should keep working, but if Skuid changes something then it could break.

    Best,

    Lukas

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!