Nested Splitter in SPA Child View

[MattBParticipant]

I am working with Angular 2 v4. SPA with MVC. On my main app controller, I have a splitter that works great. It has an upper header area, then nested splitter below with a left side menu and right side content. When I route to a component that contains another splitter, I get error. If I remove the splitter from the childview, then the component loads with no problem. Any help would be appreciated.

app.component.html
<jqxSplitter #UpperSplitterReference
[width]='”100%”‘
[height]='”100%”‘
[theme]='”custom”‘
[orientation]='”horizontal”‘
[showSplitBar]=’false’
[resizable]=’false’
[panels]='[{ size: 150, collapsible: false },{ collapsible: false }]’>
<div class=”fill”>
[HEADER AREA]
</div>
<div class=”fill”>
<jqxSplitter #LowerSplitterReference
[width]='”100%”‘
[height]='”100%”‘
[theme]='”custom”‘
[orientation]='”vertical”‘
[showSplitBar]=’true’
[resizable]=’true’
[panels]='[{ size: 250, collapsible: true },{ collapsible: false }]’>
<div class=”fill”>
[SIDE MENU AREA]
</div>
<div class=”fill”>
<router-outlet></router-outlet>
</div>
</jqxSplitter>
</div>
</jqxSplitter>

childview.component.html:
<div class=”fill jqx-hideborder jqx-hidescrollbars”>
<jqxSplitter [width]='”100%”‘
[height]='”100%”‘
[orientation]='”horizontal”‘
[panels]='[{ size: 400, min: 100, collapsible: false },{ min: 100, collapsible: true }]’>
<div id=”first”>
The First Content
</div>
<div id=”second”>
The Second Content
</div>
</jqxSplitter>
</div>

childview.component.ts:
/// <reference path=”../../../jqwidgets-ts/jqwidgets.d.ts” />
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxSplitterComponent } from ‘../../../jqwidgets-ts/angular_jqxsplitter’;

@Component({
selector: ‘childview’,
templateUrl: ‘./childview.component.html’
})

export class ChildViewComponent {
}

ERROR:
vendor.js?v=8G5nuphpleAMB8hDVj0v8l9es64guglhqGWIwYdey3M:83954 Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘width’ since it isn’t a known property of ‘jqxSplitter’. (“<div class=”fill jqx-hideborder jqx-hidescrollbars”>
<jqxSplitter [ERROR ->][width]='”100%”‘
[height]=’height’
[orientation]='”horizontal”‘”): ng:///AppRoutingModule/ChildViewComponent.html@1:17
Can’t bind to ‘height’ since it isn’t a known property of ‘jqxSplitter’. (“ass=”fill jqx-hideborder jqx-hidescrollbars”>
this error goes on list each of the attributes as an error.

[Ivo ZhulevParticipant]

Hi MattB,

Are you sure your childComponent has the angular-splitter file referenced?
This error occurs if you haven’t imported the needed angular widget file.

Best Regards,
Ivo

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

[MattBParticipant]

/// <reference path=”../../../jqwidgets-ts/jqwidgets.d.ts” />
import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
import { jqxSplitterComponent } from ‘../../../jqwidgets-ts/angular_jqxsplitter’;

Thanks Ivo for the quick response…
Do you mean something more than what I have listed?

[Ivo ZhulevParticipant]

Hi MattB,

What about the references in your module files?

Best Regards,
Ivo

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

[abelardolgParticipant]

Hi,

I have integrated the jxGridComponent but I don’t find the module out:

import { GridModule } from ‘../../modules/grid.module’

Where this module dir is?

Any help would be welcome.

Best regards,
Abelardo.

[Ivo ZhulevParticipant]

Hi abelardolg,

Import the jqxGridComponent.
import { jqxGridComponent } from 'jqwidgets-ts/angular_jqxgrid.ts'

Best Regards,
Ivo

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

[Author]

Posts