Is it possible to create nested tables? As well as tables with expanding rows?

Wappler General
#41

I do this with a variable, eg:

<div class="collapse" is="dmx-bs4-collapse" data-parent="#orders" dmx-bind:show="vShowAll.value">`
I have buttons to toggle this:
1 Like
#42

I sent this prematurely. I was going to add:

<button id="show" class="btn btn-outline-success" dmx-on:click="vShowAll.setValue(1)" dmx-show="!vShowAll.value">show details</button>
<button id="hide" class="btn btn-outline-primary" dmx-on:click="vShowAll.setValue(0)" dmx-show="vShowAll.value">hide details</button>
1 Like
#43

Thanks, @TomD! I was able to piece it together from your example.

I created a var on the page like:
image

Then, in the header cell I defined this button:
<button id="btn_collapse_details_all" class="btn" dmx-on:click="varShowAll.setValue(!varShowAll.value)"><i class="fas" dmx-class:fa-angle-down="varShowAll.value" dmx-class:fa-angle-right="!varShowAll.value"></i></button>

The last part was adding the dmx-bind:show to the tr:
<tr class="collapse" id="tr_collapse_details" dmx-bind:id="tr_collapse_details{{$index}}" is="dmx-bs5-collapse" dmx-bind:show="varShowAll.value">

The nice part is I can simply set the varShowAll variable to true or false whenever else I need to make sure all rows are expanded or collapsed. i.e. When navigating, searching, etc.

#44

I might have a go at extending the dmx-bs5-collapse component to add showAll(‘selector’) and hideAll(‘selector’) methods based on the Bootstrap collapse show() and hide() ones.

It could be a nice exercise to learn about extending Wappler components instead of creating new ones from scratch.

#45

OK, I spoke too quick on the last paragraph of my last post. That works as expected if I use the expand all button, but if rows are expanded individually, it doesn’t work.

Still looking for a solution for that. Basically, to simply collapse all expanded elements.

#46

That would be excellent. And do a quick tutorial on how you did it so we can all take part in expanding the capabilities.

#47

It’s just plain javascript and some basic App Connect understanding.

Here you have a two threads with info on AC custom components.

Additionally when the team opens up AC custom components(originally planned for after 4.0 although it could be moved of course) they will write some documentation for this.

1 Like
#48

It certainly can work, if you mean something like this:

2021-07-29_20-12-56
2021-07-29_20-12-56650×558 760 KB

#49

Yes @TomD that’s what I mean.

But, with a row (or all rows) expanded, now click on a column heading to sort by that column. What you get is the row or rows that were expanded are still expanded, but now with different records.

What I’m trying to do is collapse all rows in a case like that.

#50

You said above you are using a variable not followed this thread much so this may mean nothing but couldn’t you just on click of the sorting header cell set the variable to false?

#51

I tried that and it works in the case where you expand all rows, (which is what the variable is used for) but not if individual rows are expanded.

#52

Finally found a solution that doesn’t rely on jQuery and actually works:

<script>
    function collapseDetailsAll() {
        // $("#tableRepeat_Orders").children(".collapse").collapse("hide");
        const e = document.getElementById("tableRepeat_Orders");
        if (e) {
            for (let i = 0; i < e.children.length; i++) {
                const c = bootstrap.Collapse.getInstance(e.children[i]);
                if (c) {
                    c.hide();
                }
            }
        }
    }
</script>

The commented out line can be used if you’re using jQuery, but I wanted a solution that didn’t rely on it.

#53

When I sort, the same record remains expanded but changes position according to the sort - ie it works as expected. In any case, I’m glad you’ve found a solution.

#54

I just bumped into a problem here that I didn’t notice before.

If you scroll down on the page a little and then expand (or collapse) a row, it scrolls you all the way to the top of the page. Can’t figure out why it’s doing that, as I’m not purposely doing anything with scrolling.

Check it out here:
https://cam-testing.azurewebsites.net/orders

Any ideas what to check or how to correct this?

#55

I just discovered what the problem is. I had a dummy button at the top that I was sending the focus to, so that the tool tips would disappear like they should.

I put the button in the table and that took care of the scrolling problem, but now I have part of the tool top problem back. The tool tip for the row sticks around so still looking for a solution for that.