[CLOSED] PanelTagHelper.Collapsed doesn't work

Hello!
I'm facing a problem when I try to render an accordion's panel when the first panel needs to be collapsed.

I found the collapsed tag helper and its description make me think it is the right one, but it doesn't work.

Look at this sample:

PanelCollapsed.cshtml

Code:

---

@page
@model ExtCookbook.Pages.PanelCollapsed
@{
}
<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50" layout="Accordion">
        <items>
            <ext-panel title="Collapsed" collapsed="true">
                <items>

                    <ext-button variant="Light"
                                scale="Medium"
                                marginAsString="5 0 0 0"
                                style="width: 100%"
                                text="hello"
                                hrefTarget=""
                                textAlign="Left"
                                iconAlign="Left"
                                cls="sidebar-nav-link"
                                iconCls="x-md save" />

                </items>
            </ext-panel>
            <ext-panel title="Expanded" collapsed="false">
                <items>

                    <ext-button variant="Light"
                                scale="Medium"
                                marginAsString="5 0 0 0"
                                style="width: 100%"
                                text="hello"
                                hrefTarget=""
                                textAlign="Left"
                                iconAlign="Left"
                                cls="sidebar-nav-link"
                                iconCls="x-md save" />

                </items>
            </ext-panel>
        </items>
    </ext-container>
</ext-section>

---

PanelCollapsed.cshtml.cs

Code:

---

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtCookbook.Pages
{
    public class PanelCollapsed : PageModel
    {
        public void OnGet()
        {
        }
    }
}

---

Is this the correct way?
Thank you

Hello, bbros!

It looks like you are doing it right! But as the default of collapsed is false, then Ext.NET does not explicitly tell the second panel's collapsed state should be false.

You should be able to force specify the value as false if you change your view code line 24 to:

Code:

---

<ext-panel title="Expanded" x:raw-collapsed="false">

---

Let us know if it doesn't help and I'll check other options here.

EDIT: amazing how I could read the right syntax in the original GitHub issue documenting the feature, yet write it incorrectly here. Fixed x:raw-collapsed above.

Thank you!

I suppose that the correct instruction is:

Code:

---

<ext-panel title="Expanded" x:raw-collapsed="false">

---

But how can i pass a parameter to that?
The following example doesn't work:

Code:

---

@{
 var closed = false;
}
<ext-panel title="Expanded" x:raw-collapsed="@closed">

---

Even with string doesn't work:

Code:

---

@{
 var closed = "false";
}
<ext-panel title="Expanded" x:raw-collapsed="@closed">

---

This is the only way?

Code:

---

@{
 var closed = false;

 if (closed){
    <ext-panel title="Expanded" x:raw-collapsed="true" />
 }else{
    <ext-panel title="Expanded" x:raw-collapsed="false" />
 }
}

---

Hello again, bbros!

To use complex logic to decide the value of an inlined custom config, you should go to the model variant.

Here's a summary of the inline custom config syntaxes currently supported in most components:

- String
x-collapsed="false"

This outputs the setting in JavaScript as:

collapsed: "false"

- Constant/primitive
x:raw-collapsed="false"

This outputs the setting in JavaScript as:

collapsed: false

- Complex/model
x:model-collapsed="current_position++ != expanded_panel_pos"

This outputs the setting in JavaScript as:

collapsed: false (or true, depending on how the expression is evaluated!)

Before I start repeating myself too much, please refer to this post for other syntaxes:
- CellEditingPlugin Edit event over CheckColumn (here you, yourself, use it correctly in "code behind"/model) :-)
- Post #6 in GridPanel Boolean data and Checkbox editor (covering the above and other two other syntax concepts, block and model/"code behind")
- Post #2 in EXT Grid panel grid filters - EXT.net Classic v 7.2 (even more on the CustomConfig block)

Last, but not least, a transcript of your code sample using the x:model- concept:

Code:

---

@page
@model ExtCookbook.Pages.PanelCollapsed
@{
    var current_position = 0;
    var expanded_panel_pos = 1;
}

<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50" layout="Accordion">
        <items>
            <ext-panel title="Collapsed" x:model-collapsed="current_position++ != expanded_panel_pos">
                <items>
                    <ext-button text="hello" />
                </items>
            </ext-panel>
            <ext-panel title="Expanded" x:model-collapsed="current_position++ != expanded_panel_pos">
                <items>
                    <ext-button text="hello" />
                </items>
            </ext-panel>
        </items>
    </ext-container>
</ext-section>

---

The model code is the exact same as you provided. Thanks for sharing it by the way, even if empty, ensures nothing was left behind!

Hope this helps!