"SECTIONS" in Oqtane

[kasif]

What I want to achieve:-
I am creating multiple sections in edit.razor page, I have multiple field in each section.
Now i want to make only those field "required", Whose section is expanded.

MyApproach:-
Add a boolean flag to track whether the section is expanded or collapsed.
Toggle the flag when the section is clicked.
Conditionally render the required attribute based on the flag value.
Issue:-
1- I am unable to achieve the purpose, though my code is logically correct ( refer the code).
2-When I use "Onclick" in the section tag in order to handle the event, It gives error at the run time.
(refer the screenshot)

` <Section Name="OtherSection" Heading="OTHER" ResourceKey="OtherSection" @ref="otherSection"
          @onclick="eventArgs => ToggleRequiredForSection(eventArgs, otherSection)">
     <div class="container">
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-4" For="questionText1" ResourceKey="QuestionText">
                 @registrationQuestions?.FirstOrDefault(q => q.Id == 21)?.QuestionText
             </Label><br />

             <div class="col-sm-12">
                 <input id="answerText21" class="form-control" value="@GetAnswerText(21)"
                        @onchange="eventArgs => SetAnswerText(21, eventArgs.Value.ToString())" 
                        required="@true" />

             </div>

         </div>
     </div>
 </Section>

@Code{
private bool _isOtherSectionExpanded = false;
private Section otherSection;
private void ToggleRequiredForSection(EventArgs eventArgs, Section section)
{
    // Set the 'required' attribute based on section expansion
    if (section == otherSection)
    {
        _isOtherSectionExpanded =Convert.ToBoolean(section.Expanded);
    }
    
    
}
}

[leigh-pointer]

@kasif Section has a properties Expanded and IsVisiable, cant you use these?

[kasif]

@leigh-pointer
I see those properties, but they won't be helpful for my scenario. I need an event that gets triggered every time, I click on the Section so that in my event-handler I can set the Boolean properties that I wish to.

[sbwalker]

@kasif the existing Section component does not have an OnClick parameter defined which would allow you to execute code in your own component. A parameter would need to be added to the Section component:

    [Parameter]
    public Action OnClick { get; set; } 

and then you could reference it in your declaration

<Section Name="OtherSection" Heading="OTHER" ResourceKey="OtherSection" @ref="otherSection"
          OnClick="@(async () => await YourMethod())">

however I am not sure if/how this would work as the Section component links contain @onclick:preventDefault="true" which was necessary to get the tabs to work in Blazor

            <a data-bs-toggle="collapse" class="app-link-unstyled" href="#@Name" aria-expanded="@_expanded" aria-controls="@Name" @onclick:preventDefault="true">

You may want to create your own Section component for your own use case

[kasif]

Thanks @sbwalker.

I think this would suffice me for my requirement. I will do accordingly.

[kasif]

@sbwalker
Thanks for guiding me to fulfill my requirements.
Though I had to create additional line of codes to achieve my purpose. for e.g.
created below method to handle the click in custom Section component.
private void HandleClick() { Expanded = !Expanded; OnClick?.Invoke(); }

and in section component link, added
@onclick="HandleClick"

converted EXpanded from string to bool.
[Parameter] public bool Expanded { get { return _expanded; } set { _expanded = value; } }

Utilized the above custom component in edit.razor file by adding the associated changes over there as well.