[MattBParticipant]

Thanks for the quick response Martin!!
For now, it seems to work with a TabClick event although not completely desirable since listbox will no longer indicate user’s selection if they click on tab:

  onTabClick(event) {
    let tab = event.args.item;

    switch (tab) {
      case 0:
        this.menu2.clearSelection();
        break;
      case 1:
        this.menu1.clearSelection();
        break;
    }
  }

Regards,
MattB

[MattBParticipant]

here is a stock cli project with jqwidgets-framework.

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { jqxListBoxComponent } from '../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxlistbox';
import { jqxTabsComponent } from '../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxtabs';

@NgModule({
  declarations: [
    AppComponent,
    jqxListBoxComponent,
    jqxTabsComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';

import { jqxListBoxComponent } from '../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxlistbox';
import { jqxTabsComponent } from '../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxtabs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';

  @ViewChild('menu1') menu1: jqxListBoxComponent;
  @ViewChild('menu2') menu2: jqxListBoxComponent;
  @ViewChild('tabsReference') tabs: jqxTabsComponent;

  source1: any[] = [
    {label: "Item 1", value: 1},
    {label: "Item 2", value: 2},
    {label: "Item 3", value: 3},
    {label: "Item 4", value: 4},
    {label: "Item 5", value: 5},
    {label: "Item 6", value: 6},
    {label: "Item 7", value: 7},
];

source2: any[] = [
  {label: "Item A", value: 1},
  {label: "Item B", value: 2},
  {label: "Item C", value: 3},
  {label: "Item D", value: 4},
  {label: "Item E", value: 5},
  {label: "Item F", value: 6},
  {label: "Item G", value: 7},
];

ngAfterViewInit() {

  let tMenuSettings: jqwidgets.ListBoxOptions = {
    theme: 'classic',
    displayMember: "label",
    valueMember: "value",
    itemHeight: 50,
    source: this.source1,
    height: '100%',
    width: '100%',

  };
  this.menu1.createComponent(tMenuSettings);

  let sMenuSettings: jqwidgets.ListBoxOptions = {
    theme: 'classic',
    displayMember: "label",
    valueMember: "value",
    itemHeight: 50,
    source: this.source2,
    height: '100%',
    width: '100%',

  };
  this.menu2.createComponent(sMenuSettings);

}

select1(event) {
  console.log("click 1")
  this.menu2.clearSelection();
}

select2(event) {
  console.log("click 2")
  this.menu1.clearSelection();
}

}

app.component.html

<div class="fill">
  <jqxTabs #tabsReference class="jqx-hideborder"
           [width]='"300px"' [height]='"500px"' [position]='"top"' [enableScrollAnimation]="true"
           [animationType]='"fade"' [selectionTracker]='true' [theme]="'classic'">
      <ul style="border:none;">
          <li>Tournament</li>
          <li>Settings</li>
      </ul>
      <div class="fill" >
          <jqxListBox #menu1 (onSelect)="select1($event)" class="fill" [auto-create]="false"></jqxListBox>
      </div>
      <div class="fill">
          <jqxListBox #menu2  (onSelect)="select2($event)" class="fill" [auto-create]="false"></jqxListBox>
      </div>
  </jqxTabs>

</div>

app.component.css

.fill {
    height: 100%;
    width: 100%;
    border: none !important;
  }

tsconfig.json

{
  "include": [
    "src/**/*",
    "node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxlistbox.ts",
    "node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxtabs.ts",
  ],
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

angular.json

...
styles: [
    "node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css",
    "node_modules/jqwidgets-framework/jqwidgets/styles/jqx.classic.css"
]
...

[MattBParticipant]

OK, thanks Peter. I see the difference between the dragEnd property vs. dragEnd event.

[MattBParticipant]

I have an AngularJS app that has script:
var itms = $scope.tree.getItems();
var lst = [];
for (i = 0; i < itms.length; i++) {
var item = {
level: itms[i].level,
value: itms[i].value
};
lst.push(item);
}

In my Angular 2 project I have the same thing.
let itms = this.tree.getItems();
let lst: any = [];
for (let i = 0; i < itms.length; i++) {
let item = {
level: itms[i].level,
value: itms[i].value
};
lst.push(item);
};
In VS2017, this does not work because the compiler does not recognize the level property. It does work if you add level to the treeitem interface. You can also see the level property if you send itms[i] to the console.

What is the proper way to get the item’s tree level?

[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?

[MattBParticipant]

OK, I found this. Apply to the div container class=”jqx-hideborder jqx-hidescrollbars”

[Author]

Posts