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.
-
Author
-
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 !
Hi Liam,
Please look at this demo:
https://www.jqwidgets.com/angular/angular-ribbon/angular-ribbon-integrationwithotherwidgets.htmHere 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,
IvojQWidgets Team
http://www.jqwidgets.com/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 !
Hi Liam,
Do you mean this:
https://angular.io/guide/dynamic-component-loaderBest Regards,
IvojQWidgets Team
http://www.jqwidgets.com/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 !
Hello Liam,
We are working on an example for your case.
Thank you for your patience.Best Regards,
StanislavjQWidgets Team
http://www.jqwidgets.com/Thank you !
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,
StanislavjQWidgets Team
http://www.jqwidgets.com/Works !
Thank you very much !!! -
AuthorPosts
You must be logged in to reply to this topic.