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

Tagged: 

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

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

  • learner1010
    Participant

    Hi

    i have created the following service

    @Injectable()
    export class LMSVideoResulful { 
        getVideos( enrolmentId : number ) :Observable<Array<Video>> {
            var x = new Array<Video>();
            //https://www.youtube.com/embed/MV0vLcY652c
            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{
    
        constructor(        
            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';           
    
    @Component({
      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;
          console.log(JSON.stringify(x));
        }, error => error)
       
      }
    
     
    	//access stored object 
      onChange(e){
          console.log("select cahnge::" + e.args.item.label );
      }
    
     ngOnInit(){  }
    
    }

    The View

     <jqxListBox #listBoxReference  [width]="100"  (onChange)="onChange($event)">  
                <ul>  
                    <li *ngFor="let v of videoList">  
                        
                        {{v?.title}}
                    </li>  
                </ul>  
             </jqxListBox>  

    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 ?

    thanks


    Hristo
    Participant

    Hello learner1010,

    Please, take a look at this example:
    https://stackblitz.com/edit/github-dqudwx-ndtwb8?file=src/app/app.component.ts
    But the right approach should be related to this demo:
    https://stackblitz.com/edit/github-okeqei?file=src%2Fapp%2Fapp.component.ts

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.