Wijmo 5 Angular 2 ListBox - object binding

Wijmo 5 Angular 2 ListBox - object binding

Posted by: feniksreborn on 14 September 2017, 12:07 pm EST

• 

  feniksreborn

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:07 pm EST

  Hi,

  I am using visual studio 2015, typescript, angular 2 and Wijmo 5 in my project. I have questions about ListBox control.
  
  In my project I have array of objects. In this objects I have property “Name” , this property I want to bind to ListBox. I try with next example, but no luck:

      <wj-list-box #listBox
                                       *ngIf="items"
                                       style="height:150px;width:250px;"
                                       [displayMemberPath]="items.Name">
       </wj-list-box>
  

  Also in ListBox control I have checkbox with event - this checkbox is also bind from object property “IsCheck”. Only one chekbox can be check, in event i always uncheck all checboxes , but this bindings are not working.

  I know how to bind array of strings. But I am more interested in array of objects?
  
  Do you have some example for this behavior that I describe?

  Thank you,
  
  M

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Hi,
  
  You need to assign items to itemsSource property. displayMemberPath property should be bound to Name. Please refer to the following code snippet for the same:

  <wj-list-box  [itemsSource]="items"
                [displayMemberPath]="'Name'"
                [checkedMemberPath]="'isCheck'">
   </wj-list-box>

  Thanks,
  
  Manish Kumar Gupta

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Thank you Manish,

  One more question, can you please explain to me how to bold a item in list box witch is checked? I try this approach:

            <wj-list-box #listBox
                                           *ngIf="items"
                                           style="height:150px;width:250px;"
                                           [itemsSource]="items"
                                           [displayMemberPath]="'Name'"
                                           [checkedMemberPath]="'isCheck'"
                                           (itemChecked)="setLeader(listBox, $event)">
                              </wj-list-box>
  
  setTeamLeader(leader: wjcInput.ListBox, e: wjcCore.EventArgs) {
  this.listBox.itemFormatter = customItemFormatter.bind(this);
    function customItemFormatter(index, content) {
      if (this.makeItemBold(index)) {
        content = '<b>' + content + '</b>';
      }
      return content;
    }
  }

  Also do you have option that one checkbox can be checked at the time? (no multi-selected)

  Best regards,
  
  M

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Hello,
  
  You are on the right path for making item bold. Now, you need to check which item would you like to make bold in customItemFormatter function. Please set isContentHtml property to true for displaying item with HTML applied on the item.

  By design, ListBox’s checkedItems provide multiple selection functionalities. If you would like to make only one item checked at a time, please assign selectedItem to checkedItems array.

  For your reference, please refer to the following code snippet for the same.

  <wj-list-box #listBox 
               [itemsSource]="data"
               [isContentHtml]="true"
               [displayMemberPath]="'country'"
               [checkedMemberPath]="'active'"
               (itemChecked)="setLeader(listBox,$event)">
  
  </wj-list-box>
  
   setLeader(s: wjInput.ListBox, e: wjCore.EventArgs) {
          s.checkedItems = [s.selectedItem];
          s.itemFormatter = customItemFormatter.bind(this);
          function customItemFormatter(index, content) {          
              if (s.itemsSource.items[index].active) {
                  content = '<b>' + content + '</b>';
              }
              return content;
          }
      }

  Thanks,
  
  Manish Kumar Gupta

• 

  feniksreborn

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:07 pm EST

  Hi,

  With slight changes i manage to resolve this request.
  
  Thank you Manish!

  Best regards,
  
  M

• 

  raj.ankathi

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 1:35 pm EST

  How to set the wj-listbox programmatically?