Angular2 component is not loading inside jqxLayout

[govi-pParticipant]

I am using jqxWidgets in angular2. I Designed one jqxLayout with tabbed Group and document group . I am trying to load the angular component inside jqxLayout.It is not Loading. Kindly share the code to load component in jqxLayout.

Here is my code,

export class AppComponent{
layout: any[] =
[{
type: ‘layoutGroup’,
orientation: ‘horizontal’,
items: [{
type: ‘layoutGroup’,
orientation: ‘vertical’,
width: 800,
items: [{
type: ‘documentGroup’,
items: [{
type: ‘documentPanel’,
title: ‘ToolItems’,
contentContainer: ‘ToolbarPanel’
}]
}]
}, {
type: ‘layoutGroup’,
class: ‘Color’,
orientation: ‘horizontal’,
width: 800,
height: 600,
items: [{
type: ‘tabbedGroup’,
width: 400,
height: 600,
items: [{
type: ‘layoutPanel’,
title: ‘Color Group’,
contentContainer: ‘ColorGroupPanel’
}]
}, {
type: ‘tabbedGroup’,
width: 400,
height: ‘100%’,
items: [{
type: ‘layoutPanel’,
title: ‘Error List’,
contentContainer: ‘ColorListPanel’
}]
}]
}, {
type: ‘tabbedGroup’,
width: 268,
items: [{
type: ‘layoutPanel’,
title: ‘Properties’,
contentContainer: ‘PropertiesPanel’
}]
}]
}];
}
HTML code,
<jqxLayout [width]=” ‘100%’ ” [height]=” ‘100%’ ” [layout]=”layout” [theme]=”‘efi'”>
<!–The panel content divs can have a flat structure–>
<!–documentGroup–>
<div class=”toolBarComponent” data-container=”ToolbarPanel”>
<app-toolbar *ngIf=”productValue == ‘efi’ && licensed”></app-toolbar>
</div>
<!–bottom tabbedGroup–>
<div class=”colorGroupComponent” data-container=”ColorGroupPanel”>
<app-colorgroup [colorGroupWidth]=”colorGroupWidth” [ngStyle]=”{‘color’: ‘inherit’, ‘width’:colorGroupWidth}”>
</app-colorgroup>
</div>
<div class=”colorListComponent” data-container=”ColorListPanel”>
<app-colorlist style=”display: flex; flex: 1;” [colorGroupWidth]=”colorGroupWidth” [colorListWidth]=”colorListWidth” (currentColorListWidth)=”currentColorListWidth($event)”>
</app-colorlist>
</div>
<!–right tabbedGroup–>
<div data-container=”PropertiesPanel”>
List of properties
</div>
</jqxLayout>

Thanks in Advance !!

[hanusaikrishna786@gmail.comParticipant]

Hi i too have similar type of issue any suggestions will be useful….

Thanks!!!!

[StanislavParticipant]

Hello hanusaikrishna786 and govi-p,

Here is an example I made:

app.component.html

<jqxLayout [width]="'100%'" [height]="450" [layout]="layout">
  <!--The panel content divs can have a flat structure 
  <documentGroup-->
  <div data-container="ToolbarPanel">
    <div id="jqxToolBar">
    </div>
  </div>
  <!--bottom tabbedGroup-->
    <div data-container="ColorGroupPanel">
      <div id="jqxDropDownList">
      </div>
    </div>
  <div data-container="ColorListPanel">
    <div id="jqxColorPicker">
      </div>
  </div>
  <!--right tabbedGroup-->
  <div data-container="PropertiesPanel">
    List of properties
  </div>
</jqxLayout>

app.component.ts

export class AppComponent implements AfterViewInit{

    ngAfterViewInit(): void {
        const myToolBar = jqwidgets.createInstance('#jqxToolBar', 'jqxToolBar', {
            width: 700,
            height: 35,
            tools: this.tools,
            initTools: this.initTools
        });

        const myDropDownList = jqwidgets.createInstance('#jqxDropDownList', 'jqxDropDownList', {
            width: 200,
            height: 30,
            source: this.dropDownListSource
        });

        const myColorPicker = jqwidgets.createInstance('#jqxColorPicker', 'jqxColorPicker', {
            width: 220,
            height: 220,
            colorMode: 'hue'
        });
    }

    layout: any[] =
    [{
        type: 'layoutGroup',
        orientation: 'horizontal',
        items: [{
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 800,
            items: [{
                type: 'documentGroup',
                items: [{
                    type: 'documentPanel',
                    title: 'ToolItems',
                    contentContainer: 'ToolbarPanel'
                }]
            }]
        }, {
            type: 'layoutGroup',
            class: 'Color',
            orientation: 'horizontal',
            width: 800,
            items: [{
                type: 'tabbedGroup',
                width: 400,
                items: [{
                    type: 'layoutPanel',
                    title: 'Color Group',
                    contentContainer: 'ColorGroupPanel'
                }]
            }, {
                type: 'tabbedGroup',
                width: 400,
                height: '100%',
                items: [{
                    type: 'layoutPanel',
                    title: 'Error List',
                    contentContainer: 'ColorListPanel'
                }]
            }, {
                type: 'tabbedGroup',
                width: 268,
                height: '100%',
                items: [{
                    type: 'layoutPanel',
                    title: 'List of properties',
                    contentContainer: 'PropertiesPanel'
                }]
            }]
        }]
    }];

    tools: string = 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom';
    initTools: any = (type: string, index: number, tool: any, menuToolIninitialization): void => {
        let icon = document.createElement('div');
        if (type == "toggleButton") {
            icon.className = 'jqx-editor-toolbar-icon jqx-editor-toolbar-icon-arctic buttonIcon ';
        }
        switch (index) {
            case 0:
                icon.className += "jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-arctic";
                icon.setAttribute("title", "Bold");
                tool[0].appendChild(icon);
                break;
            case 1:
                icon.className += "jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-arctic";
                icon.setAttribute("title", "Italic");
                tool[0].appendChild(icon);
                break;
            case 2:
                icon.className += "jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-arctic";
                icon.setAttribute("title", "Underline");
                tool[0].appendChild(icon);
                break;
            case 3:
                tool.jqxToggleButton({ width: 80, toggled: true });
                tool.text("Enabled");
                tool.on("click", () => {
                    let toggled = tool.jqxToggleButton("toggled");
                    if (toggled) {
                        tool.text("Enabled");
                    } else {
                        tool.text("Disabled");
                    }
                });
                break;
            case 4:
                tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                break;
            case 5:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 6:
                tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                break;
            case 7:
                let button = document.createElement('div');
                let img = document.createElement('img');
                img.src = '../images/administrator.png'
                img.title = 'Custom tool';
                button.appendChild(img);
                tool[0].appendChild(button);
                tool.jqxButton({ height: 15 });
                break;
        }
    };

    dropDownListSource: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'       
    ];
}

Best Regards,
Stanislav

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

[hanusaikrishna786@gmail.comParticipant]

Hi Stanislav,

Thanks for the reply !! This example is useful for me.
My limitations are , I have one child component <app-color-list></app-color-list> Which contains some jqx controls like jqxGrid, jqxInput…etc.
Instead of creating controls inside layout , I am trying to load the <app-color-list> component in layout container.

The <app-color-list> component having working functionalities like dynamic loading of jqxdropdown etc.. While loading in layout the controls not displaying. I am not sure whether the functionalities will work or not.

Please clarify this.
Thanks,
HanusaiKrishna M

[StanislavParticipant]

Hello HanusaiKrishna,

If you want to initialize other elements in jqxLayout, you have to use initContent.

Best Regards,
Stanislav

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

[hanusaikrishna786@gmail.comParticipant]

Hi Stanislav,

Thanks for your response!!

My requirement is to load a component in jqxLayout.
I kept All controls in a child component. I need to instantiate the component not controls.
How I can refer a child component in Layout??
I don’t find any reference regarding this requirement. Please provide some example,it will be useful.

Thanks,
Hanusaikrishna M

[Ivo ZhulevParticipant]

Hi hanusaikrishna786,

Let’s say the code is the same as the code given by my college Stanislav.
If the component you wanna have reference to is let’s say the ‘jqxToolBar’ widget(it’s inside the jqxLayout) you have the reference when you create the widget in the ngAfterViewInit.
If the reference is to some other component for which you don’t have anything inside the app.component.ts, so just use the angular markup id selector – #. Something like <myCustomComponent #myCustomComponent></myCustomComponent>. Then inside the app.component.ts get that reference by @ViewChild.

Best Regards,
Ivo

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

[sindhuParticipant]

Hi !

I am using jQwidgets in Angular5.I have jqxLayout , jqxTree and jqxChart as three separate components. I want to display the tree and the chart in different tabs on the layout. When I try to load the components into the layout using the components’ selector, only the HTML (i.e. the title and description) is being rendered. It would be helpful if you could suggest a way to load the separate components into the layout.

Thanks,
Sindhu.

[StanislavParticipant]

Hello Shindhu,

I tested this demo: Demo
I striped it down to having only 2 tabs(no “Solution Explorer”, no “LayoutPanel(on the left)”).
The chart was moved to the second tab, and it all worked fine(also tried replacing the listBox with a jqxTree, and it worked fine as well).

Can you please send us an example of how you set up things in your project?

Best Regards,
Stanislav

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

[ziling34Participant]

Hello Stanislav
Sindhu word “suggest a way to load the separate components(with jqwidget component) into the layout”,this is very important.
jqwidget componet shouldn’t show afterviewinit or initconent function to do it .if the jqwidget component can’t out the layout .the layout function is not good.
Best Regards
ziling34

[sriramkctParticipant]

I have a similar requirement, where I would like to add a window inside layout at runtime. Window will be a separate component, which could have some text or chart inside it. Adding a plain chart to layout works.

Basically I want to create a dynamic dashboard using layout, where each tab in the layout having multiple closable windows in it. Window might have text or chart inside it.

Please let us know if this is possible. If possible, a small sample would be highly appreciated.

[StanislavParticipant]

Hello sriramkct,

Do you mean something like this: jqxDockingLayout

DockingLayout has a window that is separate from the layout.

Best Regards,
Stanislav

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

[Author]

Posts