1. Home
  2. Forum
  3. Blazor
  4. using both IsOpen and CloseOnDocumentClick= true

using both IsOpen and CloseOnDocumentClick= true

Hello all,

i have a button that toggle a boolean Visible property binded to the IsOpen on the SfSidebar.

It work as expected but if i close the sidebar by clicking on the outside of it, when i click again the button it not work the first time. When clicked the second time it works.

Can you help me with this issues?


Snippet
<SfButton CssClass="btn-Sidebar" OnClick="Toggle">
                <i class="fas fa-2x  fa-project-diagram text-white menuIcon"></i>
            </SfButton>
Snippet
private void Toggle()
  {
      IsVisible = !IsVisible;
  }
Snippet
<SfSidebar ID="samplingSideBar"  Width="280px" Type="SidebarType.Over" @bind-IsOpen="IsVisible" Target="#mainBody" CloseOnDocumentClick="true" >
    <ChildContent>
        .......
    </ChildContent>
</SfSidebar>

8 Replies
IL Indhumathy Loganathan Syncfusion Team July 13, 2021 01:17 PM UTC

Hi Maurizio, 
 
Greetings from Syncfusion support. 
 
We have validated your query but unable to reproduce the reported issue with the provided code. We have prepared a Blazor Sidebar sample in latest version and recorded the Sidebar behavior in the below video. 
 
 
You can find the sample from below link. 
 
 
We understood that you have been facing some issue with opening of Sidebar but in order to reproduce it in our end we need the following details. 
 
1.      Package version used in your sample. 
2.      Complete code snippet of Sidebar component(along with content). 
3.      Video footage of the issue. 
4.      If possible, reproduce the issue in the above sample. 
 
These details would help us to assist you promptly. Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


MM Maurizio Meloni July 13, 2021 08:40 PM UTC

Hello!

i tested your project without doing any modification and the sidebar do exactly the same wrong behavior i have seen in my project.

I have attached a video of the bug using your project.

please let me know if you need further information.


thank you very much

best regards


Attachment: blazor_syncfusion_Sidebar_NotWorking_a79154ee.zip

SS Sharon Sanchez Selvaraj Syncfusion Team July 14, 2021 02:43 PM UTC

Hi Maurizio, 


Good day to you.

We would like to let you know that we already have support to achieve your requirement using OnClose event of Sidebar. But we were facing some issue in OnClose event of  Sidebar in our latest version. So, we have logged the issue as a bug in our end.  
 
We will include the fix for this issue in our weekly patch scheduled on 27th July 2021.  
 
We appreciate your patience. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the following link. 


Regards, 

Sharon Sanchez S. 
  
 


SM Shalini Maragathavel Syncfusion Team July 26, 2021 02:44 PM UTC

Hi Maurizio, 

Thanks for your patience. 

We have validated your requirement and you have used both closeOnDocumentClick as true and IsOpen property. We would like to let you know that, Sidebar will be closed on document click when closeOnDoucmentClick is set as true. It is not required to handle the close case for Sidebar(through external button click) while enabling closeOnDocumentClick property.  So we suggest you to set the IsVisible as true on button click, because Sidebar will be closed while clicking on any element in the document. Please refer to the below code snippet, 
= 
    <SfSidebar ID="samplingSideBar" @ref="sidebarObj" Width="280px" Type="SidebarType.Over" OnClose="close" @bind-IsOpen="IsVisible" Target="#mainBody" CloseOnDocumentClick="true"> 
 
    </SfSidebar> 
    <div id="mainBody" class="text-content" style="text-align: center;height:560px"> 
        <div>Main content</div> 
        <div> 
            <SfButton CssClass="btn-Sidebar" OnClick="Toggle">Sidebar open 
                
            </SfButton> 
        </div> 
    </div> 
    </div> 
     
 
    @code{ 
        SfSidebar sidebarObj; 
        public bool IsVisible { get; set; } = false; 
        public void Toggle() 
        {          
            IsVisible = true;            
        } 
    } 

Please find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor-1249446659-633156890.zip

Please get back to us if you need further assistance.

Regards,
Shalini M. 



MM Maurizio Meloni July 27, 2021 06:39 AM UTC

Hello and thanks for the answer.

Just for asking... is it not possible to keep both solutions at the same time? 

I mean: open a sidebar via a button and close it either with the same button with which I opened it or by clicking outside the sidebar itself.

At the moment if I try to configure the sidebar like this, it doesn't work properly.

 


SM Shalini Maragathavel Syncfusion Team July 28, 2021 02:33 PM UTC

Hi Maurizio, 

Good day to you.

Based on your query, we could understand that you need to open/close the Sidebar on the same button click while closeOnDocumentClick property is set as true. You can achieve your requirement by binding  mousedown event to the Button component and open/close the sidebar based on the isVisible property as demonstrated in the below code snippet, 

        <SfSidebar Type="SidebarType.Over"  @bind-IsOpen="IsVisible" Target="#mainBody" CloseOnDocumentClick="true"> 
        </SfSidebar> 
        <div id="mainBody" class="text-content" style="text-align: center;height:560px"> 
   <div> 
   <SfButton @onmousedown="Check" OnClick="Toggle">Toggle</SfButton> 
 
  </div>  
 
    @code{ 
        SfSidebar sidebarObj; 
        public bool IsVisible { get; set; } = false; 
         
        bool isRestrict { get; set; } = false; 
        private void Check() 
        { 
            isRestrict = IsVisible; 
        } 
        public void Toggle() 
        { 
            if (!IsVisible && !isRestrict) 
            { 
                IsVisible = true; 
            } 
            else 
            { 
                isRestrict = false; 
            } 
        } 
    } 


Please let us know if you need further assistance. 

Regards,
Shalini M. 


MM Maurizio Meloni July 28, 2021 04:46 PM UTC

Thanks for the suggestion, in that way work perfectly.

thank you very much

Maurizio


KR Keerthana Rajendran Syncfusion Team July 29, 2021 07:22 AM UTC

Hi Maurizio, 
 
Most welcome. We are glad to hear that the provided suggestion helped you to achieve your requirement. Please get back to us if you need any further assistance.  
 
Regards 
Keerthana R. 


Loader.
Up arrow icon