jQuery UI Widgets Forums Angular ngx-gauge is not displaying correctly when using with docking layout

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 3 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • genoraWeb
    Participant

    Hi,

    I am using ngx-gauge in my application, I want to display the same inside a panel in jqxDockingLayout docking layout. The gauge gets displayed correctly outside the docking layout but when I use it with the docking layout, it doesn’t display properly. Please see my code below for reference.

    <jqxDockingLayout #myDockingLayout [auto-create]=”false”>
    <div data-container=”Document1Panel”>
    Document 1 content
    </div>
    <div data-container=”ErrorListPanel”>
    <ngx-gauge [type]=”gaugeType”
    [value]=”gaugeValue”
    [label]=”gaugeLabel”
    [append]=”gaugeAppendText”>
    </ngx-gauge>
    </div>
    <div data-container=”SolutionExplorerPanel”>
    <div id=”treeContainer” style=”border: none;”></div>
    </div>
    </jqxDockingLayout>
    <ngx-gauge [type]=”gaugeType”
    [value]=”gaugeValue”
    [label]=”gaugeLabel”
    [append]=”gaugeAppendText”>
    </ngx-gauge>

    import { Component, OnInit, ViewChild, AfterViewInit } from ‘@angular/core’;
    import { jqxDockingLayoutComponent } from ‘jqwidgets-ng/jqxdockinglayout’;

    @Component({
    selector: ‘app-cl’,
    templateUrl: ‘./cl.component.html’,
    styleUrls: [‘./cl.component.css’]
    })
    export class ClComponent implements OnInit, AfterViewInit {

    @ViewChild(‘myDockingLayout’, { static: false }) myDockingLayout: jqxDockingLayoutComponent;
    gaugeType = “semi”;
    gaugeValue = 28.3;
    gaugeLabel = “Speed”;
    gaugeAppendText = “km/hr”;

    ngAfterViewInit(): void {
    this.myDockingLayout.createComponent({ width: 1000, height: 700, layout: this.layout() })
    }

    ngOnInit() {
    }

    getWidth() : any {
    if (document.body.offsetWidth < 800) {
    return ‘90%’;
    }

    return 1000;
    }

    layout(): any[] {
    let layout = [
    {
    type: ‘layoutGroup’,
    orientation: ‘horizontal’,
    items: [
    {
    type: ‘tabbedGroup’,
    width: 400,
    minWidth: 200,
    items: [
    {
    type: ‘layoutPanel’,
    title: ‘Solution Explorer’,
    contentContainer: ‘SolutionExplorerPanel’,
    initContent: () => {
    // initialize a jqxTree inside the Solution Explorer Panel
    let source = [{
    icon: ‘./../../../images/earth.png’,
    label: ‘Project’,
    expanded: true,
    items: [
    {
    icon: ‘./../../../images/folder.png’,
    label: ‘css’,
    expanded: true,
    items: [{
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqx.base.css’
    },
    {
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqx.energyblue.css’
    }, {
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqx.orange.css’
    }]
    },
    {
    icon: ‘./../../../images/folder.png’,
    label: ‘scripts’,
    items: [{
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqxcore.js’
    },
    {
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqxdata.js’
    }, {
    icon: ‘./../../../images/nav1.png’,
    label: ‘jqxgrid.js’
    }]
    },
    {
    icon: ‘./../../../images/nav1.png’,
    label: ‘index.htm’
    }]
    }];
    jqwidgets.createInstance(‘#treeContainer’, ‘jqxTree’, { width: ‘100%’, height: ‘99%’, source: source })
    }
    }]
    },
    {
    type: ‘layoutGroup’,
    orientation: ‘vertical’,
    width: 600,
    items: [{
    type: ‘documentGroup’,
    height: 300,
    minHeight: 200,
    items: [{
    type: ‘documentPanel’,
    title: ‘Document 1’,
    contentContainer: ‘Document1Panel’
    }]
    },
    {
    type: ‘tabbedGroup’,
    height: 400,
    pinnedHeight: 30,
    items: [{
    type: ‘layoutPanel’,
    title: ‘Error List’,
    contentContainer: ‘ErrorListPanel’
    }]
    }]
    }
    ]
    }
    // {
    // type: ‘floatGroup’,
    // width: 500,
    // height: 300,
    // position: {
    // x: 350,
    // y: 250
    // },
    // items: [{
    // type: ‘layoutPanel’,
    // title: ‘Output’,
    // contentContainer: ‘OutputPanel’,
    // selected: true
    // }
    // ]
    // }
    ];
    return layout;
    }

    }


    Martin
    Participant

    Hello genoraWeb,

    I would suggest you to try initializing the ngx-gauge inside the initContent of the jqxDockingLayout, in the same way as the jqxTree in your example, if it is possible.

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.