problem rendering new tabs. feature request

[lqbwebParticipant]

Following your examples here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/index.htm#demos/jqxtabs/closebuttons.htm

I am implementing kind of my own component wrapper like:

<tabs-panel width="700" height="900">
	<div *new-tab="'Tab %N'" >
		<span>content</span>
	</div>
</tabs-panel>

You see there I have a structural directive which is the content of the future tabs that I want to create. I encourage you to try to do such an example. I have managed to make it work but playing a bit too much with your internal structures (let me know if you want the sourcecode).

The trouble here is that your api only allows to specify the content of the new tab as a string using your api method “jqxTab#addAt(pos : number, title : string, content: string)”. This makes impossible the integration with angular2. Instead, I propose you allow receiving the content as an HTMLElement as well: “addAt(pos : number, title : string, content: HTMLElement)”, and dont wrap it in an extra <div></div>.

As it is done angular2 (not allowing dynamic template rendering), it does not play well if you create all your content with jQuery (similar issue as my previous posts with jqxNumberInput). In my opinion, if you want a nice integration with angular2, you should review all the api from all your components, and allow the possibility in all of them to let angular create the HTMLElement’s of the input areas.

Thanks again for your great feedback & support.

[Peter StoevKeymaster]

Hi lqbweb,

We will think about such feature in the future versions of our Angular 2 components.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[lqbwebParticipant]

To help other users, this is what I ended up doing with the above template:

@Directive({
    selector: '[new-tab]'
})
export class NewTabTemplate {
    @Input('new-tab') public title : string;
}

export class MyTabPanel implements AfterViewInit {
    .......
    @ViewChild(jqxTabsComponent) jqxTab: jqxTabsComponent;
    @ContentChild(NewTabTemplate) newTab : NewTabTemplate;
    @ContentChild(NewTabTemplate, { read: TemplateRef }) newTabRef;
    .......

    private renderNewTemplate(atIndex : number) {
        let res = this.tabContent.createEmbeddedView(this.newTabRef);
        this.jqxTab.addAt(atIndex, this.buildTitle(this.newTab.title), "<div id='newTab'>Loading</div>");
        let jqxNode = (this.jqxTab.widgetObject as any)._contentList[atIndex];
        jqxNode.parentNode.removeChild(jqxNode);
        let divElement = $(res.rootNodes).filter('div')[0];
        (this.jqxTab.widgetObject as any)._contentList[atIndex]=divElement;
        (this.jqxTab.widgetObject as any)._uiRefresh(false);
    }

    public ngAfterViewInit(): void {
         console.log(this.newTab);
         this.jqxTab.OnTabclick.subscribe((eventData) => {
             var numberTabs : number = this.jqxTab.length() - 1; //
             if(eventData.args.item == numberTabs) { // the user pressed on "New Tab"
                this.renderNewTemplate(numberTabs);
             }
         });

        .....
    }
}

[Author]

Posts