How to retain the size of a panel after collapsing

[Nikitha]

Hello,

From the given demo, https://ej2.syncfusion.com/angular/demos/#/material/splitter/outlook-style-layout

I added [collapsible]="true" and [collapsed]="true" only for the first panel. 

And it looks this way,

When the first panel is collapsed, the size assigned for the second-panel changes automatically to 50%.

I want the second-panel size to be same as before. The third-panel can be responsive.

Could you please help me solve this issue?

Thank you,

Nikitha R

[Revanth Krishnan]

Hi Nikitha, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How to retain the size of a panel after collapsing. When the first panel is collapsed, the size assigned for the second-panel changes automatically to 50%. I want the second-panel size to be the same as before. The third-panel can be responsive.” 

 

This can be achieved by setting the ‘size’ property as ‘33%’ only to the second panel. To make the third pane as responsive don’t set the ‘size’ or ‘min’ property. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<ejs-splitter id="splitter1" #splitter1 height="493px" width="100%"> 

  <e-panes> 

    <e-pane [collapsible]="true" [collapsed]="true"> 

      . . . 

    </e-pane> 

    <e-pane size="33%"> 

      . . . 

    </e-pane> 

    <e-pane> 

      . . . 

    </e-pane> 

  </e-panes> 

</ejs-splitter> 

 

Sample: https://stackblitz.com/edit/angular-6hykbn-ybybkr?file=app.component.html 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Nikitha]

Hello,

I tried your solution and it works!

Thank you,

Nikitha R

[Nikitha]

Hello,

I have made some changes from the sample link which you have sent me,

First panel: I didn't change anything.

Second panel: Added select event to the links.

Third panel: Initial display is removed because I don't want to show any content initially. Displays content only when any link is clicked from the second panel.

After these changes, the second panel becomes responsive again and does not display with its given size.

My requirement is that only the third panel has to be responsive. First and Second panel has to have a fixed size. Please help.

I have made changes only in these two files. Please have a look at the code below

app.component.html

<div id="target" class="control-section outlook-style">
  <ejs-splitter id="splitter1" #splitter1 height="493px" width="100%" (resizeStop)="onSplitterResize()">
    <e-panes>
      <e-pane [collapsible]="true" [collapsed]="true">
        <ng-template #content>
          <div class="content">
            <ejs-treeview id="template" [fields]="field">
              <!-- Template to render tree node -->
              <ng-template #nodeTemplate="" let-data="">
                <div>
                  <div class="treeviewdiv">
                    <div style="float:left">
                      <span class="treeName">{{data.name}}</span>
                    </div>
                    <div style="margin-right: 5px; float:right">
                      <span
                        class="treeCount e-badge e-badge-primary"
                        *ngIf="data.count"
                        >{{ data.count }}</span>
                    </div>
                  </div>
                </div>
              </ng-template>
            </ejs-treeview>
          </div>
        </ng-template>
      </e-pane>
      <e-pane size="33%">
        <ng-template #content>
          <div class="content">
            <ejs-listview [dataSource]="dataSource" cssClass="e-list-template" (select)='onSelect($event)'>
              <ng-template #template let-dataSource="">
                <div class="settings e-list-wrapper e-list-multi-line e-list-avatar">
                  <span class="e-list-item-header">{{dataSource.Name}}</span>
                  <span class="e-list-content">
                    <div>
                      <div class="status">
                        {{dataSource.content}}
                      </div>
                      <div id="list-message">
                        {{dataSource.content2}}
                      </div>
                    </div>
                  </span>
                </div>
              </ng-template>
            </ejs-listview>
            <div id="groupedList" tabindex="1"></div>
          </div>
        </ng-template>
      </e-pane>
      <e-pane>
        <ng-template #content>
          <div *ngIf="link === 'firstLink'" class="content">
            first link content
          </div>
          <div *ngIf="link === 'secondLink'" class="content">
            second link content
          </div>
          <div *ngIf="link === 'thirdLink'" class="content">
            third link content
          </div>
          <div *ngIf="link === 'fourthLink'" class="content">
            fourth link content
          </div>
        </ng-template>
      </e-pane>
    </e-panes>
  </ejs-splitter>
</div>
<!-- Template to render tree node -->
<script id="treeTemplate" type="text/x-template">
  <div>
        <div class="treeviewdiv">
            <div style="float:left">
                <span class="treeName">${name}</span>
            </div>
            ${if(count)}
                <div style="margin-right: 5px; float:right">
                    <span class="treeCount e-badge e-badge-primary">${count}</span>
                </div>
            ${/if}
        </div>
    </div>
</script>

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
import { FieldsSettingsModel } from '@syncfusion/ej2-navigations';
/**
 * Splitter outlook layout style
 */
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {

    @ViewChild('blogRTE') public rteObj: RichTextEditorComponent;
    link:string = '';
    public localData: { [key: string]: Object }[] = [
        { id: 1, name: 'Favorites', hasChild: true },
        { id: 2, pid: 1, name: 'Sales Reports', count: '4' },
        { id: 3, pid: 1, name: 'Sent Items' },
        { id: 4, pid: 1, name: 'Marketing Reports ', count: '6' },
        { id: 5, name: 'Andrew Fuller', hasChild: true, expanded: true },
        { id: 6, pid: 5, name: 'Inbox', selected: true, count: '20' },
        { id: 7, pid: 5, name: 'Drafts', count: '5' },
        { id: 15, pid: 5, name: 'Archive' },
        { id: 8, pid: 5, name: 'Deleted Items' },
        { id: 9, pid: 5, name: 'Sent Items' },
        { id: 10, pid: 5, name: 'Sales Reports', count: '4' },
        { id: 11, pid: 5, name: 'Marketing Reports', count: '6' },
        { id: 12, pid: 5, name: 'Outbox' },
        { id: 13, pid: 5, name: 'Junk Email' },
        { id: 14, pid: 5, name: 'RSS Feed' },
        { id: 15, pid: 5, name: 'Trash' }
    ];
    public field: FieldsSettingsModel = { dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };

    public dataSource: { [key: string]: Object }[] = [
        { Name: 'First link', content: 'Apology marketing email', content2: 'Hello Ananya Singleton', id: 'firstLink', order: 0 },
        { Name: 'Second link', content: 'Annual conference', content2: 'Hi jeani Moresa', id: 'secondLink', order: 0 },
        { Name: 'Third link', content: 'Reference request- Camden hester', content2: 'Hello Kerry Best', id: 'thirdLink', order: 0 },
        { Name: 'Fourth link', content: 'Application for job Title', content2: 'Hello Illa Russo', id: 'fourthLink', order: 0 }
    ];

    public onSplitterResize(): void {
        this.rteObj.refresh();
    }

    onSelect(event) {
      console.log(event);
      this.reset();
      this.link = event.data.id;
    }

    reset() {
      this.link = '';
    }
}

Thank you

Nikitha R

[Revanth Krishnan]

Hi Nikitha, 

 

 

Good day to you. 

 

 

We have validated your query and have considered “When collapsed set to first pane 'size' property doesn't work properly for the second pane in Splitter” as a bug from our end and logged the report for the same and the fix will be included by the end of March. 

 

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/23239 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Nikitha, 

 

 

Thanks for your patience. 

 

We are glad to announce that our Essential Studio 2021 Volume 1 release v19.1.0.54  is rolled out and is available for download under the following link. 

https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download 

 

We have resolved the reported issue “When collapsed set to first pane 'size' property doesn't work properly for the second pane in Splitter” with the package version 19.1.54.   

Can you please upgrade your package to this version to resolve the issue on your end?   

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/19.1.54/?type=all#splitter 

Sample: https://stackblitz.com/edit/angular-6hykbn-bruhyu?file=app.component.html 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Revanth 

[Nikitha]

Hello,

Sorry, I couldn't get back to you sooner. I checked your latest sample link and found some issue with collapsing the panel when resizing the splitter.

Steps to see the issue:

1) Expand the first pane

2) Resize the second splitter

3) Collapse the first pane

When I do this, the width of the second pane breaks. It doesn't show its latest resized width.

I didn't make any change in the sample.

I have attached a file for better understanding.

Thank you,

Nikitha R

Attachment: screencapture_92f1ce18.rar

[Indrajith Srinivasan]

Hi Nikitha, 

 

Good day to you, 

 

We have further validated your reported query and have considered “The size property is not updated properly, for the second pane after the split-bar is resized” as a bug from our end and logged the report for the same and the fix will be included with our patch release on 20^th April.  

  

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/24160/ 

 

Regards, 

Indrajith 

[Revanth Krishnan]

Hi Nikitha, 

 

Sorry for the inconvenience. 

 

As we are facing complexity in fixing the issue. We will include the fix in the coming patch release on 27^th April. 

 

We appreciate your patience till then. 

 

Regards, 

Revanth  

[Revanth Krishnan]

Hi Nikitha, 

 

 

Thanks for the patience. 

 

 

We have included the fix for “The size property is not updated properly, for the second pane after the split-bar is resized” with the package version 19.1.63.    

Can you please upgrade your package to this version to resolve the issue on your end?   

 

Sample: https://stackblitz.com/edit/angular-6hykbn-ovhto1?file=app.component.ts 

 

Regards,  

Revanth 

[Nikitha]

Hello,

I have checked the updated version. It is working now.

Thank you so much.

Nikitha R

[Revanth Krishnan]

Hi Nikitha, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved. Please let us know if you need any further assistance. 

 

Regards, 

Revanth