jQuery UI Widgets › Forums › Angular › jqxDockingLayout Angular2 bugs in content
This topic contains 19 replies, has 11 voices, and was last updated by pompa 4 years, 11 months ago.
-
Author
-
Hello,
I’m a developer and my company bought the Enterprise Licence of JqWidgets to develop an Angular2 application using angular-cli, the main goal was to have a dockable layout. I sill don’t have my personal credentials for Platinum Support so I’m asking here waiting to receive my personal credentials from our appropriate service.
Unfortunately, I faced some issues using this widget :
1. When I want to use a personal component inside a Panel, the component is visible but nothing works inside. I mean when I click a button nothing happens. The same component outside jqxDockingLayout works perfectly.
Ex :
app.component.html
<jqxDockingLayout #dockingLayoutReference [auto-create]='false'> <div data-container="EditorPanel"> <app-editor></app-editor> </div> <div data-container="PropertiesPanel"> <ul> <li>Prop 1</li> <li>Prop 2</li> <li>Prop 3</li> </ul> </div> <div data-container="ExplorerPanel"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> </jqxDockingLayout>
app.component.ts
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; import { jqxDockingLayoutComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdockinglayout'; import 'jqwidgets-framework'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { @ViewChild('dockingLayoutReference') myDockingLayout: jqxDockingLayoutComponent; /** * jqxDockingLayout initial settings */ dockingLayoutSettings: jqwidgets.DockingLayoutOptions = { width: 988, height: 686, layout: this.generateLayout() }; constructor() { } ngAfterViewInit(): void { // Create jqxDockingLayout this.myDockingLayout.createComponent(this.dockingLayoutSettings); }; /** * Generate the default layout */ generateLayout(): any { const layout = [{ type: 'layoutGroup', orientation: 'horizontal', items: [{ type: 'layoutGroup', orientation: 'vertical', width: '70%', items: [{ type: 'documentGroup', height: '100%', minHeight: '100%', items: [{ type: 'documentPanel', title: 'Editor', contentContainer: 'EditorPanel' }] }] }, { type: 'layoutGroup', orientation: 'vertical', width: '30%', items: [{ type: 'tabbedGroup', height: '50%', items: [{ type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }, { type: 'tabbedGroup', height: '50%', items: [{ type: 'layoutPanel', title: 'Explorer', contentContainer: 'ExplorerPanel' }] } ] }] }]; return layout; } }
editor.component.html
<h1>{{myProp}}</h1> <button (click)="action1()">Action 1</button> <button (click)="action2()">Action 2</button>
editor.component.ts
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.css'] }) export class EditorComponent implements OnInit { public myProp: string; constructor() { } ngOnInit() { this.myProp = 'Init'; console.log('Init'); } public action1() { this.myProp = 'Act1'; console.log('Act1'); } public action2() { this.myProp = 'Act2'; console.log('Act2'); } }
2. When I move a tab the content disappear. Example move PropertiesPanel inside Explorer Panel and the content disappear. This is also visible in your Demo : Demo
Change position of solution explorer and Properties and the content of solutions explorer disappear.You can have my demo here : Download
Just unzip then run
ng serve
Go to localhost:4200 in your web browser
Thanks for helping.
- This topic was modified 6 years, 5 months ago by universaldev31.
- This topic was modified 6 years, 5 months ago by universaldev31. Reason: Adding my code
Hi universaldev31,
Sorry for the inconvenience. We will look into this right away. For now, you can attach id/class and bind the normal JS way.
For the disappear: update your packages to the latest ones and add jquery to your project.Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/Is there any news about this issue? I am facing the exact same binding issue with the jqxDockingLayout widget. As soon as I move a working component inside the docking window the previous working component isn’t working any more.
Hi Ivo,
I also observe this behavior. It is very easy to reproduce. For that, take the demo under “demos\angular\app\dockinglayout\createComponent\” and:
1. In app.component.ts, add a field to the class AppComponent: text = “sample”;
2. In app.component.html, add this code:<input type="text" [(ngModel)]="text"> {{text}}
two times: 1) outside of the jqxDockingLayout compinent (e.g. at line 1) and inside of it (e.g. in ErrorListPanel);
3. Modifying the first input (one outside of the jqxDockingLayout component) updates the bound variable as expected;
4. Modifying the second input (one inside of the jqxDockingLayout component) does not update the bound variable.Is there any chance this will be fixed any time soon?
Best regards,
Dmytro.Hi guys,
We are still working on that. When it’s okay I’ll post here in this topic.
Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/hello,
I’m using JQWIDGETS and really enjoy it.
Now I’m using DockingLayout and I have the same problem:
angular binding not working.Let’s take something simple like this:
<div data-container=”OutputPanel” >
<input type=”button” (click)=”clickFunc()” value=”test” />
</div>clickFunc not working.
When will this problem be solved?
Thanks in advance.
Hi nmlevi,
I do not think that this is a problem with the DockingLayout at all. It is more related to the learning curve. In the Angular Docking Layout, the initContent function of the docking panels should be added and inside it, you can initialize your contents. For example, our Angular Components can be created by using the createComponent method as well.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I have this problem too. This is a great annoyance. Please update it as soon as possible. Thank you
{{ title }} <--- Working <jqxDockingLayout #dockingLayoutReference [width]="'100%'" [height]="'100%'" [layout]='layout' [theme]="'arctic'"> ... {{ title }} <--- Not Working ... </jqxDockingLayout>
- This reply was modified 6 years ago by sedatkimya.
The Docking Layout’s content is initialized and should be created in the way we do it in our Angular examples. We do not have {{title}} there. The docking panels content is initialized within initContent callback functions, because the docking component initialized expects that.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi Peter. Thank you for response.
This is html and ts code.
where is wrongAPP.MODULE.TS
import { Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { jqxDockingLayoutComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdockinglayout'; import { jqxTreeComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxtree'; import { CommonModule } from '@angular/common'; import { TestComponent } from './test/test.component'; @NgModule({ declarations: [ AppComponent, jqxDockingLayoutComponent, jqxTreeComponent, TestComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
APP.COMPONENT.TS
@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent { title = "Hello World!" constructor() { } }
APP.COMPONENT.HTML
<jqxDockingLayout #dockingLayoutReference [width]="'100%'" [height]="'100%'" [layout]='layout' [theme]="'arctic'"> <!--The panel content divs can have a flat structure--> <!--autoHideGroup--> <div data-container="ToolboxPanel"> List of tools </div> <div data-container="HelpPanel"> Help topics </div> <!--documentGroup--> <div data-container="Document1Panel"> Sample Text : {{title}} </div> <div data-container="Document2Panel"> Document 2 Panel </div> <!--bottom tabbedGroup--> <div data-container="ErrorListPanel"> List of errors </div> <!--right tabbedGroup--> <div data-container="SolutionExplorerPanel"> <div id="treeContainer" style="border: none;"></div> </div> <div data-container="PropertiesPanel"> List of properties </div> </jqxDockingLayout>
- This reply was modified 6 years ago by sedatkimya.
sorry app.component.ts
import { Router } from '@angular/router'; import { AfterViewInit, Component, ElementRef, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { jqxDockingLayoutComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdockinglayout'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None }) export class AppComponent { @ViewChild('log') log: ElementRef; title = "Hello World!"; constructor() { } layout: any[] = this.generateLayout(); generateLayout(): any[] { let layout = [ { type: 'layoutGroup', orientation: 'horizontal', minHeight: '800', items: [{ type: 'tabbedGroup', alignment: 'left', width: '20%', minHeight : '100%', unpinnedWidth: '20%', items: [{ type: 'layoutPanel', title: 'Toolbox', contentContainer: 'ToolboxPanel' }, { type: 'layoutPanel', title: 'Help', contentContainer: 'HelpPanel' }] }, { type: 'layoutGroup', orientation: 'vertical', width: '50%', minHeight : '100%', items: [{ type: 'documentGroup', height: '60%', minHeight: 200, items: [{ type: 'documentPanel', title: 'Document 1', contentContainer: 'Document1Panel' }, { type: 'documentPanel', title: 'Document 2', contentContainer: 'Document2Panel' }] }, { type: 'tabbedGroup', height: '40%', pinnedHeight: 30, items: [{ type: 'layoutPanel', title: 'Error List', contentContainer: 'ErrorListPanel' }] }] }, { type: 'tabbedGroup', width: '30%', height : '100%', minWidth: 200, items: [ { type: 'layoutPanel', title: 'Solution Explorer', contentContainer: 'SolutionExplorerPanel', initContent: () => { // initialize a jqxTree inside the Solution Explorer Panel let source = [{ icon: 'assets/images/earth.png', label: 'Project', expanded: true, items: [ { icon: 'assets/images/folder.png', label: 'css', expanded: true, items: [{ icon: 'assets/images/nav1.png', label: 'jqx.base.css' }, { icon: 'assets/images/nav1.png', label: 'jqx.energyblue.css' }, { icon: 'assets/images/nav1.png', label: 'jqx.orange.css' }] }, { icon: 'assets/images/folder.png', label: 'scripts', items: [{ icon: 'assets/images/nav1.png', label: 'jqxcore.js' }, { icon: 'assets/images/nav1.png', label: 'jqxdata.js' }, { icon: 'assets/images/nav1.png', label: 'jqxgrid.js' }] }, { icon: 'assets/images/nav1.png', label: 'index.htm' }] }]; jqwidgets.createInstance('#treeContainer', 'jqxTree', { width: '100%', height: '99%', source: source }) } }, { type: 'layoutPanel', title: 'Properties', contentContainer: 'PropertiesPanel' }] }] }]; return layout; } }
Any content which you want to put inside a panel should be put within the initContent callback function. That is the reason your code with {{title}} will not work.
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com/Hi Peter,
Thanks for the quick return.
I saw my mistake now. sorry.
Best RegardsHi sedatkimya,
No problem and thanks for the update. I am Glad that my explanation helped you.
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.com/what to put inside initContent: () => { —– }
lets suppose if i want that only {{title }} content can be displayed inside <jqxDockingLayout></jqxDockingLayout>if i have title=”sdikhg” field in *-component.ts
-
AuthorPosts
You must be logged in to reply to this topic.