Requirement In ejs-sidebar - Branched from 159358

[Vaishali Jain]

I have used sidebar in left and right side and in the middle I am having main content, I am showing chip list in left sidebar dynamically when drag complete event in scatter chart get fired but when I close the left side bar these chip list is not collapsing/hiding with the side bar and not showing back when I am opening it back. Please provide help.

Looking for your response.

Vaishali

Attachment: trenddemo_34ef2fa6.zip

[LeoLavanya Dhanaraj]

Hi Vaishali,

Greetings from Syncfusion support.

We have validated the issue you mentioned in the Angular ChipList component with Sidebar in the shared sample. In this sample, you imported Scatter Chart data from your file, so we rendered a Chart with our data source and created a ChipList once the dragComplete event was triggered. We then performed the Sidebar open and close actions using the Toolbar click action.

However, the Sidebar is properly opened and closed with the provided content inside the Dock Sidebar, but the ChipList is not hiding because the Dock content size is larger than the Chip element size. When you remove the enableDock property, the Sidebar is closed and opened along with its sidebar content (Chip).

Therefore, we are unable to reproduce the issue where the “ChipList is not collapsing or hiding with the Sidebar and not showing back when it is opened again”.

For your reference, we have included the validated sample and video footage. Please review the details provided. If there is a misunderstanding or if you are facing issues, replicate the issue in our shared sample with the replication steps as a video footage. This will help us further validate the issue and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj

Attachment: Sidebar_7e88ce61.zip

[Vaishali Jain]

Hey LeoLavanya Dhanaraj ,

Thank you for the help. I got it.

Can you help me with one more thing?

I need a sidebar in left and right side both like we have on syncfusion page (refer this page - https://ej2.syncfusion.com/angular/documentation/chart/chart-types/line?cs-save-lang=1&cs-lang=ts ) itself and I need a arrow button also to make it collapse and expand and the arrow button should also get toggle as per sidebar opening and closing. I don't want to add toggle button on toolbar, I need it same as it is on syncfusion page with material theme

Thanks in advance and  looking forward to your reply

Vaishali

[LeoLavanya Dhanaraj]

Hi Vaishali,

Thanks for your patience.

Based on your requirements, we have modified the shared sample. Please follow the styles and codes mentioned below in your application to meet your needs.

1. Remove any unnecessary codes and functions inside the Toolbar component.
2. Remove the unnecessary div container and class declaration for the left Sidebar component (.dockmaincontent is a target for both Sidebars, so do not use the same class name as it will affect the Sidebar functionalities).
3. Include Left and Right toggle buttons for the Sidebar open and close events.
4. Add custom CSS styles with the appropriate class and icons to the buttons.

[app.component.html]

<ejs-toolbar cssClass="dockToolbar" id="dockToolbar" (clicked)="toolbarClicked($event)">

    <!-- <e-items>

    <e-item prefixIcon="e-icons e-menu" tooltipText="Menu"></e-item>

    <e-item>

        <ng-template #template>

        <div>IDAM Trends</div>

        </ng-template>

    </e-item>

    <e-item prefixIcon="e-icons e-menu" tooltipText="Right Menu" align="Right"></e-item>

    </e-items> -->

</ejs-toolbar>

 

<div id="main-content container-fluid col-md-12" class="dockmaincontent">

    <button #leftToggle ejs-button class="openLeft" iconCss="e-icons e-medium e-chevron-left-fill" (click)="leftSidebarClick()"></button>

    <button #rightToggle ejs-button class="openRight" iconCss="e-icons e-medium e-chevron-right-fill" (click)="rightSidebarClick()"></button>

    …

</div>

 

<!-- sidebar component -->

<ejs-sidebar id="dockSidebar" #dockBar class="dockSidebar" …>

    <!-- <div class="dockmaincontent"> -->

    <!-- </div> -->

</ejs-sidebar>

 

<!-- Right sidebar component -->

<ejs-sidebar id="dockRightBar" #dockRightBar class="dockRightSidebar" … position="Right">

</ejs-sidebar>

 

[app.component.ts]

.openLeft {

  position: absolute;

  z-index: 20 !important;

  margin-left: 200px !important;

}

 

.openRight{

  position: absolute;

  right: 205px !important;

  z-index: 1000 !important;

}

 

.closeRight{

  position: absolute;

  right: 0 !important;

  top:10 !important;

}

 

[app.component.css]

@ViewChild('leftToggle') leftbtn?: ButtonComponent;

@ViewChild('rightToggle') rightbtn?: ButtonComponent;

leftSidebarClick(){

    if(this.dockBar?.isOpen){

        this.leftbtn?.element.classList.remove("openLeft");

        (this.leftbtn as any).iconCss = "e-icons e-medium e-chevron-right-fill";

    }

    else{

        this.leftbtn?.element.classList.add("openLeft");

        (this.leftbtn as any).iconCss = "e-icons e-medium e-chevron-left-fill";

    }

    this.dockBar?.toggle();

}

rightSidebarClick(){

    if(this.dockRightBar?.isOpen){

        this.rightbtn?.element.classList.remove("openRight");

        this.rightbtn?.element.classList.add("closeRight");

        (this.rightbtn as any).iconCss = "e-icons e-medium e-chevron-left-fill";

    }else{

        this.rightbtn?.element.classList.add("openRight");

        this.rightbtn?.element.classList.remove("closeRight");

        (this.rightbtn as any).iconCss = "e-icons e-medium e-chevron-right-fill";

    }

    this.dockRightBar?.toggle();

}

Attachment: AngularSidebar_6069a0b0.zip

[Vaishali Jain]

hi @ LeoLavanya Dhanaraj,

Thank you. It's working!