The MultiSelect formatItem doesn't fire in Vue

The MultiSelect formatItem doesn't fire in Vue

Posted by: fejlesztes on 12 March 2018, 11:46 pm EST

• 

  fejlesztes

  • Post Options:
  • Link
    Copy

  Posted 12 March 2018, 11:46 pm EST

  I have a MultiSelect component set up in Vue2 and TypeScript, and I’m trying to customize the list items via the formatItem function, but no matter what I do, it never gets invoked.

  
  <wj-multi-select placeholder="Please select an item"
                                       headerFormat="{count:n0} items selected"
                                       :format-item="formatListItem"
                                       :items-source="itemCodes"
                                       :checkedItemsChanged="itemCodesChanged"
                                       :display-member-path="'Name'"
                                       :selected-value-path="'CodeId'"/>
  
  

  
  methods: {              
                  formatListItem(s, e): void {
                      console.log("item formatter", s, e);
                  },
  
  

  I searched the forum, looked at the Vue examples and googled for about 2 hours but I just can’t get it to work.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2018, 4:19 pm EST

  Hi,
  
  There is no formatItem event is defined for MultiSelect control. You should use itemFormatter to format MultiSelect list.
  
  Please use the following code snippet for the same:

  <wj-multi-select   :items-source="usersSource" 
  				:is-content-html="true" 
  				:item-formatter="formatList" 
  				display-member-path="country">
  </wj-multi-select>
   methods: {
      formatList (index, content) {
        if (index > 3 && index < 7) {
          content = '<b>' + content + '</b>'
        }
        return content
      },
      getData (count) {
        var countries = 'US,UK,India,Japan,China'.split(',')
        var data = []
        for (var i = 0; i < count; i++) {
          data.push({
            id: i,
            country: countries[i % countries.length],
            sales: Math.random() * 100,
            downloads: Math.random() * 1000
          })
        }
        data[0].country = ''
        return data
      }
  }
  

  ~Manish