- Home
- Forum
- Angular - EJ 2
- How to retain the size of a panel after collapsing
How to retain the size of a panel after collapsing
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
SIGN IN To post a reply.
11 Replies
1 reply marked as answer
RK
Revanth Krishnan
Syncfusion Team
March 10, 2021 06:54 AM UTC
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> |
Please check the above code snippet and the sample and let us know if it satisfies your requirement.
Regards,
Revanth
Marked as answer
NI
Nikitha
March 10, 2021 07:10 AM UTC
Hello,
I tried your solution and it works!
Thank you,
Nikitha R
NI
Nikitha
March 10, 2021 08:43 AM UTC
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>
<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 = '';
}
}
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
RK
Revanth Krishnan
Syncfusion Team
March 11, 2021 12:10 PM UTC
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
RK
Revanth Krishnan
Syncfusion Team
April 1, 2021 03:49 AM UTC
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.
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
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
NI
Nikitha
April 10, 2021 05:33 AM UTC
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 RAttachment: screencapture_92f1ce18.rar
IS
Indrajith Srinivasan
Syncfusion Team
April 12, 2021 10:19 AM UTC
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 20th 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
RK
Revanth Krishnan
Syncfusion Team
April 22, 2021 10:16 AM UTC
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 27th April.
We appreciate your patience till then.
Regards,
Revanth
RK
Revanth Krishnan
Syncfusion Team
May 18, 2021 02:45 PM UTC
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?
Regards,
Revanth
NI
Nikitha
May 18, 2021 03:42 PM UTC
Hello,
I have checked the updated version. It is working now.
Thank you so much.
Nikitha R
RK
Revanth Krishnan
Syncfusion Team
May 19, 2021 12:57 PM UTC
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
SIGN IN To post a reply.
- 11 Replies
- 3 Participants
- Marked answer
-
NI Nikitha
- Mar 9, 2021 12:55 PM UTC
- May 19, 2021 12:57 PM UTC
