jqxDockingLayout Angular2 bugs in content

[universaldev31Participant]

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 5 years, 10 months ago by  universaldev31.
• This topic was modified 5 years, 10 months ago by  universaldev31. Reason: Adding my code

[Ivo ZhulevParticipant]

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,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[ruffzyParticipant]

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.

[Dmytro GokunParticipant]

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.

[Ivo ZhulevParticipant]

Hi guys,

We are still working on that. When it’s okay I’ll post here in this topic.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[nmleviParticipant]

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.

[Peter StoevKeymaster]

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 Stoev

jQWidgets Team
http://www.jqwidgets.com/

[sedatkimyaParticipant]

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 5 years, 5 months ago by  sedatkimya.

[Peter StoevKeymaster]

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 Stoev

jQWidgets Team
http://www.jqwidgets.com/

[sedatkimyaParticipant]

Hi Peter. Thank you for response.
This is html and ts code.
where is wrong

APP.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 5 years, 5 months ago by  sedatkimya.

[sedatkimyaParticipant]

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;
      }
  }
  

[adminKeymaster]

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 Stoev

jQWidgets Team
https://www.jqwidgets.com/

[sedatkimyaParticipant]

Hi Peter,
Thanks for the quick return.
I saw my mistake now. sorry.
Best Regards

[Peter StoevKeymaster]

Hi sedatkimya,

No problem and thanks for the update. I am Glad that my explanation helped you.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[akshayParticipant]

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

[Author]

Posts