jQuery UI Widgets Forums Angular How to bind an array of object to jqxLIstbox?


This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 3 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • learner1010


    i have created the following service

    export class LMSVideoResulful { 
        getVideos( enrolmentId : number ) :Observable<Array<Video>> {
            var x = new Array<Video>();
            x.push( new Video( "SQL 1", "https://www.youtube.com/embed/qMvDsarDdK0", "sdsdssdss" ));
            x.push( new Video( "SQL 2", "https://www.youtube.com/embed/hVBALRtY8g0", "sdsdssdss" ));
            x.push( new Video( "SQL 3", "https://www.youtube.com/embed/qMvDsarDdK0", "sssdssds" ));
            x.push( new Video( "SQL 4", "https://www.youtube.com/embed/8Fo_KTDrBSU", "sdsdssdss" ));
            return from([x]);

    The model Video

    export class Video{
            public title : string,
            public  videoUrl: string,
            public  description : string

    Component class

    import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
    import {Input  } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    import { LMSVideoResulful } from '../../LMSServices/LMSVideos.service' 
    import { Video } from '../../LMSServices/video.model';
    import{ jqxListBoxComponent } from 'jqwidgets-ng/jqxlistbox';           
      selector: 'app-video-list',
      templateUrl: './video-list.component.html',
      styleUrls: ['./video-list.component.css']
    export class VideoListComponent implements OnInit{
      safeURL : any;
      videoList : Array<Video>
      @ViewChild('listBoxReference', { static: false }) myListBox: jqxListBoxComponent;
      constructor( private _sanitizer: DomSanitizer, public myVideoService : LMSVideoResulful ){    
        this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/MV0vLcY652c");
        this.myVideoService.getVideos(1).subscribe( x => {
          this.videoList = x;
        }, error => error)
    	//access stored object 
          console.log("select cahnge::" + e.args.item.label );
     ngOnInit(){  }

    The View

     <jqxListBox #listBoxReference  [width]="100"  (onChange)="onChange($event)">  
                    <li *ngFor="let v of videoList">  

    Issue #1
    At the moment i can bind only a simple value. But assume i would want to bind an object array to listbox, how do i bind an object array? ( the Binding must be like how we do in drop downs, which has a value and a display text. So the object “Video” property ‘title’ must be display text and property “videoUrl” must the value of each list item )

    Issue #2
    How do i access each select item’s display text and value ?



    Hello learner1010,

    Please, take a look at this example:
    But the right approach should be related to this demo:

    Best Regards,
    Hristo Hristov

    jQWidgets team

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.