ListBox missing data-uid prop on list item

[Ana Vasilcoiu]

I have some logic dependent on the id of the list item. ListView has a property data-uid on the li element which corresponds to the id of the element, while ListBox component has instead the property data-value with alphabetic values. 

Comparison between ListView component and ListBox component:

How can I get the id of the item in the list in a different way from here without the data-uid in a Listbox?

[YuvanShankar Arunagiri]

Hi Ana,

We have validated your reported query and using the below code snippet, we can get the li element of specific list box item.

console.log(document.querySelector(`.e-list-item[data-value="${args.value[0]}"]`));

If we are misunderstanding your query, please share more details about your requirement & use case. Based on that we will check and provide you a better solution quickly.

Check with attached sample code file and get back to use if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: App_e46eb663.zip

[Ana Vasilcoiu]

Hi YuvanShankar, 

With your query I can indeed get the li element of the selected item. However, what I want to do is add an event on a double click of an item and get the actual id or value of the double clicked element. 

So that's why I compared with the ListView, because there I could use the data_uid to retrieve the value of the element from the options array. Is there a way to do this in the ListBox component as well? 

Regards,

Ana V

[YuvanShankar Arunagiri]

Ana,

We have prepared the sample based on your requirement. kindly refer to the below code snippet and attached sample code file.

<template>

  <div v-on:dblclick="doubleClick">

    <ejs-listbox :dataSource='data'></ejs-listbox>

  </div>

</template>

……

  methods: {

    doubleClick: function(args) {

      console.log(args.target.id);

      console.log(args.target.textContent);

    }

  }

Get back to use if you need any further assistance on this. 

Attachment: App_b42fcdf8.zip