Show and hide of sidebar on Grid row click event

[chandradev]

Hi,

I am using sidebar control to display the details of grid record, I have implemented successfully but i am getting small issue, when ever I am clicking on first record It is displaying side bar popup, after this when ever I am clicking on second row title, I am expecting first side bar popup should hide then second sidebar popup should display.

This is not happening. I have been stuck on this. It would be great, if i will get some code snippet for this task.

 

[Shalini Maragathavel]

Hi Chandradev, 

 

Greetings from Syncfusion support.
  

Based on your query, we suspect that you need to open/close the required Sidebars based on the Grid row click. You can achieve your requirement by calling the Toggle method to the Sidebar in the RowSelecting event of Grid as demonstrated in the below code snippet. 

 

            <SfSidebar @ref="leftSidebarInstance" Type=SidebarType.Push Width="250px" @bind-IsOpen="LeftToggle"> 

                <ChildContent>  

                    . . . 

                </ChildContent> 

            </SfSidebar> 

            <SfSidebar @ref="rightSidebarInstance" Width="250px" Position=SidebarPosition.Right @bind-IsOpen="RightToggle"> 

                <ChildContent> 

                  . . . 

                </ChildContent> 

            </SfSidebar> 

            <div class="text-content e-main-content"> 

   <SfGrid DataSource="@Orders"   AllowSorting="true" > 

       <GridEvents TValue="Order" RowSelecting="RowSelecting"></GridEvents> 

                               

  <GridColumns> 

           . . . 

       </GridColumns> 

           </SfGrid> 

 

    </div> 

 

@code { 

 

    public void RowSelecting(RowSelectingEventArgs<Order> args) 

    { 

        

            this.leftSidebarInstance.Toggle(); 

            this.rightSidebarInstance.Toggle(); 

         

    } 

} 

Please find the below sample for your reference. 

  

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

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html#Syncfusion_Blazor_Navigations_SfSidebar_Toggle 

                 https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.RowSelectingEventArgs-1.html 

  

If we have misunderstood your query, please elaborate on your requirement in detail with pictorial representation or video demonstration(if possible) to understand it better. So that we can check from our end and provide the prompt solution. 

 
Regards,  

Shalini M. 

[chandradev]

Hi  Shalini,

Thanks for sending exact code snippet. For me whenever i m clicking on show sidebar button and next time clicking anywhere of page, two sidebar panel are showing at one time.

is there any event for clicking anywhere of blazor page, so that i can make forcefully hide on sidebar panel ?

<SfSidebar Width="@GetSize(Size)"

           Type="@SidebarType.Over"

           @bind-IsOpen="@IsVisible"

           CloseOnDocumentClick="true"

           Position="@SidebarPosition.Right">

    <ChildContent>

        @Childcontent

    </ChildContent>

</SfSidebar>

 

[Sharon Sanchez Selvaraj]

Hi Chandradev, 

 

Thanks for the update. 

 

We suspect that your requirement is to show Sidebar alternatively(left and right) when clicking on the Grid row. We have modified the sample with the mentioned behavior by toggling the Sidebar using a flag variable. Also, regarding the closing of Sidebar, we have bound an onclick event to the main content and have closed the Sidebar using hide method. You can hide the Sidebar at the required place based on your scenario. 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar-1656877557 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Sharon Sanchez S.