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.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author

  • universaldev31
    Participant

    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

    Ivo Zhulev
    Participant

    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/


    ruffzy
    Participant

    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 Gokun
    Participant

    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 Zhulev
    Participant

    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/

    jqxDockingLayout Angular2 bugs in content #95924

    nmlevi
    Participant

    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.

    jqxDockingLayout Angular2 bugs in content #95933

    Peter Stoev
    Keymaster

    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/


    sedatkimya
    Participant

    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.

    Peter Stoev
    Keymaster

    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/


    sedatkimya
    Participant

    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 6 years ago by  sedatkimya.

    sedatkimya
    Participant

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

    admin
    Keymaster

    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/


    sedatkimya
    Participant

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


    Peter Stoev
    Keymaster

    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/


    akshay
    Participant

    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

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.