Responsive Sidebar With Treeview

Question

Good afternoon!The source code of the example of that functionallity is empty.Would you show me how to implement it?Thanks in advance!

Sowmiya Padmanaban · Answer

Hi Társis,

Greetings from Syncfusion support.

Query 1: If i change the page, the sidebar desapears, because it is in on especific page

Solution:

We have looked into your query on EJ2 Sidebar. For your information, if you need the same Sidebar in expanded state when navigating to other pages of the application. You need to add the Sidebar in the MainLayout.razor.

We have prepared a sample, in which we have rendered the Sidebar in the MainLayout.razor page to avail it in all the pages of the application to meet your requirement.

Also, we have added the navigation bar inside the Sidebar component. So, we can use the navigation bar inside the Sidebar for navigating to other pages of the application.

Query 2: How can I do to colapse Sidebar when the user clics outside it?

Solution:

When setting the CloseOnDocumentClick property as true, Sidebar will collapse when you click anywhere outside the Sidebar element in the page.

Please, download the sample from the below.

Sample:

https://www.syncfusion.com/downloads/support/forum/152380/ze/Sidebar_Layout_blazor1716887752

Documentation: https://ej2.syncfusion.com/blazor/documentation/treeview/

Demos: https://blazor.syncfusion.com/demos/TreeView/DefaultFunctionalities

API Reference:

https://helpstaging.syncfusion.com/cr/blazor

https://ej2.syncfusion.com/documentation/api/treeview

Please, let us know if you need any further assistance.

Regards,

Shameer Ali Baig S.

Pon Geetha A J · Answer

Thank you for your answer. But I need the sidebar like a navigation menu. In your sample, if I change the page, the sidebar desapears, because it is in on especific page. 
How could I reach that? 
----------------------- 
 One more question, 
 
How can I do to colapse Sidebar when the user clics outside it?

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Társis, 
 
Greetings from Syncfusion support. 
 
Query 1: If i change the page, the sidebar desapears, because it is in on especific page 
 
Solution: 
 
We have looked into your query on EJ2 Sidebar. For your information, if you need the same Sidebar in expanded state when navigating to other pages of the application. You need to add the Sidebar in the MainLayout.razor. 
 
We have prepared a sample, in which we have rendered the Sidebar in the MainLayout.razor page to avail it in all the pages of the application to meet your requirement. 
 
Also, we have added the navigation bar inside the Sidebar component. So, we can use the navigation bar inside the Sidebar for navigating to other pages of the application. 
 
Query 2: How can I do to colapse Sidebar when the user clics outside it?  
 
Solution: 
 
When setting the CloseOnDocumentClick property as true, Sidebar will collapse when you click anywhere outside the Sidebar element in the page. 
 
Please, download the sample from the below. 
 
Sample:  
  
https://www.syncfusion.com/downloads/support/forum/152380/ze/Sidebar_Layout_blazor1716887752  
 
Documentation: https://ej2.syncfusion.com/blazor/documentation/treeview/    
  
Demos: https://blazor.syncfusion.com/demos/TreeView/DefaultFunctionalities   
  
API Reference:  
  
https://helpstaging.syncfusion.com/cr/blazor  
  
https://ej2.syncfusion.com/documentation/api/treeview  
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.

Társis · Answer

Thank you for your quick answer. It worked, but I needed that the sidebar colapse only in "mobile mode" when the user click outside the sidebar. In larger screens I would like the sidebar would stay expanded. How could I manage that? In my application I didn't get how to make the sidebar occupate the entire height of the window. I'm sending you a sample. In the opening page you can see the sidebar creates a scroll.

Attachment: GAFNETBlazor_d010c32d.zip

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Társis, 
 
We have checked your expected requirement with Sidebar. You can closeOnDocumentClick property of Sidebar to achieve your expected requirement of closing the Sidebar when clicking anywhere in the document except the Sidebar element. To find whether your using device, we can use JSInterop method call from server to client script function. 
 
We have prepared a sample to achieve your expected your requirement. Please, download the sample from the following link. 
 
https://www.syncfusion.com/downloads/support/forum/152380/ze/GAFNET-Blazor-50799727  
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.

Társis · Answer

Thank you for your answer! The part of the control ocupate the entire height worked, but with your sample the Sidebar doesn't close anymore, no matter the device.

I'll tell what I did.

- Run the application on Chrome and click with the right button in the screen.

- Select "Inspect"

- Select the device (S9, for example)

- Click in the menu and it opens

- Select any option.

Now, when a click outside the Sidebar, in the document, the Sidebar doesn't close anymore. It only closes if I click in the "toggle" button again.

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Társis, 
 
We have looked into your reported problem. We would like to let you know that EJ2 components are built from scratch to adapt any responsive resolution (mobile screen dimension). 
 
If you try to check the responsive behavior of EJ2 components using the Browser’s emulator option, then please refresh the page and check the expected behavior. Because, we have added specific functionalities to the EJ2 components based on the userAgent.  
 
So, if you just switch to the emulator from browser in a desktop dimension, then source level functionalities written specific to responsive dimension will not be compiled. So, component will work as it is rendered in a desktop resolution. 
 
We suggest you refresh the page with Sidebar and check the provided solution. We tested the sample and it works properly as like you expected. 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.

Társis · Answer

It worked perfectly. Thank you very much!

Társis · Answer

Hi again,in your sample, the application worked, like I said, perfectly, but for some reason it doesn't in mine. I did a copy and paste in the Sidebar page, but I couldn't get it working. Would you give a look on it?Thanks in advance!Attachment: GAFNETBlazor_d27a6ff0.zip

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Társis, 
 
Sorry for the inconvenience.  
 
We have modified your sample with proper JSInterop function to call from server method like depicted in the below follow-up. 
 




@code { 
 
    [Inject] 
    public IJSRuntime JSRuntime { get; set; } 
    object[] eventParameters = new object[] { }; 
    public async Task afterCreated(Object args) {  
      await   JSRuntime.InvokeAsync<bool>("onCreated"); } 
    } 
  
Modified Sample: https://www.syncfusion.com/downloads/support/forum/152380/ze/GAFNET-Blazor437082291  
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S.

Társis · Answer

Thank you very much. Now it works. Good job!

Shameer Ali Baig Sulaiman Ali Baig · Answer

Hi Társis, 
 
Welcome. Please, get back to us if you need any further assistance. We will be happy to assist you. 
 
Regards, 
Shameer Ali Baig S.

Ulisses Correia de Araujo Neto · Answer

TársisVi que você é Brasileiro, gostaria de tirar uma dúvida sobre o menu.Ulisses

Sowmiya Padmanaban · Answer

Hi Ulisses Correia de Araujo Neto,  
 
Can you please share the details regarding your requirement with menu component. It will help us to provide you the prompt solution. 
 
Regards,  
Sowmiya.P