Using wj-combo-box in Angular 6, How to get selected Object

Posted by: ssmith on 23 July 2018, 7:26 am EST

    • Post Options:
    • Link

    Posted 23 July 2018, 7:26 am EST

    I’m using Flex Grid in an Angular 6 project. One of the flex grid columns uses a drop down list as defined below with combo-box.

    <wj-flex-grid-column [header]="'Current Season Name' [binding]="'Current_Season_Name'">
    
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    
                  <wj-combo-box class="wj-combo-box"
                    [(text)]="item.Current_Season_Name"
                    (textChanged)="getSelectedObject(item)"
                    [itemsSource]="Seasons"
                    [displayMemberPath]="'Season_Name'"
                    [selectedValuePath]="'Season_ID'"
                    [isEditable]="false"
                    [placeholder]="''">
                  </wj-combo-box>
    
    </ng-template>
    </wj-flex-grid-column>
    

    Seasons is an array of objects that looks like this:

    Season_End_Date : "2018-05-31 00:00:00"
    Season_ID : 20000024
    Season_Name : "Some Season"
    Season_Start_Date : "2018-05-01 00:00:00"
    

    When you pick from the dropdown/combo box list, the Season_Name value is displayed, which is correct, and that value is stored in the item.Current_Season_Name attribute, which is also correct.

    What I want to do is get the current complete value list row and pass it to a function when the item is changed via the (textChanged)=“getSelectedObject(item)” binding.

    ‘item’ is the wrong parameter to pass here, as it passes the data row of the grid, what I want is the array row selected from the drop down list.

    For example using [itemsSource]=“Seasons”:

    (with abbreviated attribute names to save space here)

    ID:"1234",Start:"July1",End:"July20",Name:"Season One"
    [b]ID:"2345",Start:"July3",End:"July22",Name:"Season Two"[/b]
    ID:"3456",Start:"July4",End:"July23",Name:"Season Three"
    ID:"4567",Start:"July5",End:"July24",Name:"Season Four"
    

    If we select the bolded second row, I want to pass the following to the function:

    ID:“2345”,Start:“July3”,End:“July22”,Name:“Season Two”

    Ideally as a single object so I can extract the values from it.

    getSelectedObject(item) {
                   console.log(item.Season_End_Date) 
                   console.log(item.Season_ID)
                   console.log(item.Season_Name)
                   console.log(item.Season_Start_Date)
    }
    

    What value can I pass in that (textChanged) binding to accomplish this?

  • Posted 24 July 2018, 1:19 am EST

    Hi,

    You may use the selectedItem property of the combo-box to get the currently selected item.

    Please refer to following code snippet:-

    
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    	<wj-combo-box class="wj-combo-box" #cb//define ref
    		[(text)]="item.Current_Season_Name"
    		(textChanged)="getSelectedObject(cb.selectedItem)"//get current item
    		[itemsSource]="Seasons"
    		[displayMemberPath]="'Season_Name'"
    		[selectedValuePath]="'Season_ID'"
    		[isEditable]="false"
    		[placeholder]="''">
    	</wj-combo-box>
    </ng-template>
    
    

    ~Manish

  • Posted 24 July 2018, 2:56 am EST

    Excellent! Thank you!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels