jQuery UI Widgets Forums Angular jqxRibbon is not displayed correctly

This topic contains 8 replies, has 3 voices, and was last updated by  Liam 6 years, 11 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • jqxRibbon is not displayed correctly #98726

    Liam
    Participant

    Hello, I have the following component hierarchy : jqxWindow -> jqxRibbon -> jqxGrid
    When I open a jqxWindow, the jqxRibbon is not displayed correctly.

    app.component.html

    <jqxWindow #window
               [autoOpen]="false"
               [isModal]="true"
               [width]="640"
               [height]="480">
      <div>
        <jqxRibbon #ribbon
                   [width]="600"
                   [height]="400"
                   [position]="'left'"
                   [selectionMode]="'click'"
                   [animationType]="'none'">
    
          <ul id="header" style="width: 150px;">
            <li>Grid</li>
            <li>Items</li>
          </ul>
          <div>
            <div>
              <jqxGrid #grid [source]="dataAdapter" [columns]="columns" [width]="400" [height]="300"></jqxGrid>
            </div>
            <div>Items go here</div>
          </div>
        </jqxRibbon>
    
      </div>
    </jqxWindow>
    
    <input type="button" value="Open window" (click)="openWindow()">

    app.component.ts

    export class AppComponent {
      @ViewChild('window')
      window: jqxWindow;
    
      source =
        {
          localdata: [
            ['AAA'],
            ['BBB']
          ],
          datafields: [
            {name: 'text', type: 'string', map: '0'}
          ],
          datatype: 'array'
        };
    
      dataAdapter = new jqx.dataAdapter(this.source);
    
      columns: any[] =
        [
          {text: 'text', datafield: 'text'}
        ];
    
      openWindow() {
        this.window.open();
      }
    }

    Thank you !

    jqxRibbon is not displayed correctly #98809

    Ivo Zhulev
    Participant

    Hi Liam,

    Please look at this demo:
    https://www.jqwidgets.com/angular/angular-ribbon/angular-ribbon-integrationwithotherwidgets.htm

    Here the grid is created within the initContent callback.

    P.S.
    My advice is to use the jqxSpliiter(not jqxRibbon) and inside of it to make tabs and grid.

    Best Regards,
    Ivo

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

    jqxRibbon is not displayed correctly #98862

    Liam
    Participant

    Hi Ivo. Thank you for answer.

    In this example we have a jqxRibbon component which contains manually created jqxGrid components in initContent() method.
    I have a bit more complex situation. Each node in the jqxRibbon component is angular component. How can I create them manually ?

        <jqxRibbon #jqxRibbon
                   [width]="'100%'"
                   [height]="'calc( 100% - 50px )'"
                   [initContent]="initContent"
                   [position]="'left'"
                   [selectionMode]="'click'"
                   [animationType]="'none'">
    
          <ul id="header" style="width: 150px;">
            <li>General</li>
            <li>Bindings</li>
            <li>Logger</li>
          </ul>
    
          <div>
            <app-general></app-general>
            <app-bindings></app-bindings>
            <app-logger></app-logger>
          </div>
        </jqxRibbon>
    

    Thank you !

    jqxRibbon is not displayed correctly #98886

    Ivo Zhulev
    Participant

    Hi Liam,

    Do you mean this:
    https://angular.io/guide/dynamic-component-loader

    Best Regards,
    Ivo

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

    jqxRibbon is not displayed correctly #98904

    Liam
    Participant

    Hello, Ivo.
    Yes, I mean something like this.
    I’ve tried to implement it, but it didn’t work. What I did wrong ?

    app.component.ts

    export class AppComponent {
      @ViewChild('general', {read: ViewContainerRef})
      general: ViewContainerRef;
    
      constructor(private componentFactoryResolver: ComponentFactoryResolver) {
      }
    
      initContent = () => {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(GeneralComponent);
        this.general.createComponent(componentFactory);
      }
    }

    app.component.html

    <jqxWindow #window
               [autoOpen]="false"
               [isModal]="true"
               [initContent]="initContent"
               [resizable]="false"
               [width]="640"
               [height]="480">
    
      <div>
        <jqxRibbon #jqxRibbon
                   [width]="'600px'"
                   [height]="'400px'"
                   [position]="'left'"
                   [selectionMode]="'click'"
                   [animationType]="'none'">
    
          <ul id="header" style="width: 150px;">
            <li>General</li>
          </ul>
    
          <div>
            <div>
              <ng-template #general></ng-template>
            </div>
          </div>
        </jqxRibbon>
      </div>
    </jqxWindow>
    
    <input type="button" (click)="window.open()" value="Open Window">

    app.module.ts

      ...
      entryComponents: [GeneralComponent],
      ...

    GeneralComponent is a regular Angular component

    Thank you !

    jqxRibbon is not displayed correctly #98963

    Stanislav
    Participant

    Hello Liam,

    We are working on an example for your case.
    Thank you for your patience.

    Best Regards,
    Stanislav

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

    jqxRibbon is not displayed correctly #98965

    Liam
    Participant

    Thank you !

    jqxRibbon is not displayed correctly #99009

    Stanislav
    Participant

    Hello Liam,

    Here is an example:

    app.component.html

    
    <jqxWindow #window
               [autoOpen]="false"
               [isModal]="true"
               [initContent]="initContent"
               [resizable]="false"
               [width]="640"
               [height]="480">
    
        <div>Window</div>
    
      <div #windowContent>
          <div id="ribbon">
    
              <ul id="header" style="width: 100px;">
                  <li>General</li>
              </ul>
    
              <div>
                  <div>
                      <div #general></div>
                  </div>
              </div>
    
          </div>
      </div>
    </jqxWindow>
    

    app.component.ts

    
    import { Component, OnInit, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
    
    import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';
    
    import { GeneralComponent } from './general.component';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
    })
    
    export class AppComponent {
        constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
    
        @ViewChild('window') myWindow: jqxWindowComponent;
        @ViewChild('general', { read: ViewContainerRef }) containerViewContainerRef;
    
        ngAfterViewInit() {
            this.myWindow.open();
        }
    
        initContent = () => {
            let jqxRibbon: jqwidgets.jqxRibbon = jqwidgets.createInstance('#ribbon', 'jqxRibbon', { width: 600, height: 400, position: 'left', selectionMode: 'click', animationType: 'none'});
        }
    
        ngOnInit() {
            let componentFactory = this.componentFactoryResolver.resolveComponentFactory(GeneralComponent);
    
            let componentRef = this.containerViewContainerRef.createComponent(componentFactory);
            componentRef.instance.name = 'Your name here!';
        }
    }
    

    general.component.ts

    
    import { Component } from '@angular/core';
    
    @Component({
        template: <code>{{name}}</code>
    })
    
    export class GeneralComponent {
        name: any;
    }
    

    app.module.ts

    
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';
    import { jqxRibbonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxribbon';
    
    import { AppComponent } from './app.component';
    
    import { GeneralComponent } from './general.component';
    
    @NgModule({
      declarations: [
          AppComponent, GeneralComponent, jqxWindowComponent, jqxRibbonComponent
      ],
      imports: [
        BrowserModule
      ],
      entryComponents: [GeneralComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    Best Regards,
    Stanislav

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

    jqxRibbon is not displayed correctly #99020

    Liam
    Participant

    Works !
    Thank you very much !!!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.